一个简单的折线图demo:

1.建立容器

 

 
  
  1. <div id="demo1">  
  2.   
  3. </div> 
 
  
 
 
  
2.KISSY包配置：
 
  
 
 
  
 
  
  1. //包配置  
  2. KISSY.config({ 
  3.  combine:true, 
  4.   packages:[ 
  5.       { 
  6.         name:"gallery", 
  7.         path:"http://a.tbcdn.cn/s/kissy/", 
  8.         charset:"utf-8" 
  9.       } 
  10.     ] 
  11. }); 
 
  
 
 
  
关于kissy可以参考 官方网站 ：http://docs.kissyui.com/
 
  
3.引入linechart js文件
 
  
 
  
  1. KISSY.use("gallery/kcharts/1.1/linechart/index",function(S,LineChart){ 
  2. //TODO 
  3. } 
 
  
4.构造Linechart实例
 
  
 
  
  1. var linechart = new LineChart({ 
  2.      renderTo:"#demo1", 
  3.      points:{ 
  4.        attr:{ 
  5.          type:"auto" 
  6.        } 
  7.      }, 
  8.      yLabels:{ 
  9.        css:{ 
  10.          "marginLeft":"-4px", 
  11.          "font-family":"Microsoft Yahei", 
  12.          "font-size":"10px" 
  13.        } 
  14.      }, 
  15.      xLabels:{ 
  16.        css:{ 
  17.          "font-family":"Microsoft Yahei", 
  18.           "font-size":"10px" 
  19.        } 
  20.      }, 
  21.      title:{ 
  22.              content:"Monthly Average Temperature", 
  23.              css:{ 
  24.              } 
  25.            }, 
  26.            anim:{}, 
  27.            subTitle:{ 
  28.              content:"Source: WorldClimate.com", 
  29.              css:{ 
  30.  
  31.              } 
  32.            }, 
  33.            lineType:"arc", 
  34.       xAxis: { 
  35.          text:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
  36.                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
  37.            }, 
  38.            yAxis:{ 
  39.              num:7 
  40.            }, 
  41.      series:[{ 
  42.                text: 'Tokyo', 
  43.                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 
  44.            }, { 
  45.                text: 'New York', 
  46.                data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] 
  47.            } 
  48.            , { 
  49.                text: 'Berlin', 
  50.                data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] 
  51.            }, { 
  52.                text: 'London', 
  53.                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] 
  54.            } 
  55.            ], 
  56.      defineKey:{ 
  57.        x:"week", 
  58.        y:"y" 
  59.      }, 
  60.      legend:{ 
  61.        isShow:true, 
  62.        css:{ 
  63.          marginLeft:250, 
  64.          marginTop:260 
  65.        } 
  66.      }, 
  67.      tip:{ 
  68.        offset:{ 
  69.                    x:10, 
  70.                    y:10 
  71.                }, 
  72.        template:function(){ 
  73.          return "<span style='font-size:10px'>"+arguments['0']['text'] + "</span><br/>" + arguments['0']['y'] + "\u2103"; 
  74.        } 
  75.      } 
  76.  }); 
 
  
 
 
  
 
 
  
整体代码如下：（复制到html文件运行即可）
 
  
 
  
  1. <!doctype html> 
  2. <html> 
  3. <head> 
  4.   <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
  5. <link rel="stylesheet" href="http://a.tbcdn.cn/p/global/1.0/global-min.css" /> 
  6. <style> 
  7. #demo1{ 
  8.     width:750px; 
  9.     height:300px; 
  10.     margin:0px auto; 
  11. } 
  12. #demo1 .ks-charts-legend ul li{ 
  13.   float: left;   
  14.   padding: 10px; 
  15. } 
  16. #demo1 .ks-charts-legend .disable{ 
  17.   color:#ccc; 
  18. } 
  19. #demo1 .ks-charts-legend .legend-text{ 
  20.   padding-left: 5px; 
  21. } 
  22. </style> 
  23. </head> 
  24. <body> 
  25. <div id="demo1"> 
  26.  
  27. </div> 
  28. <script src="http://a.tbcdn.cn/s/kissy/1.3.0/kissy-min.js"></script> 
  29. <script type="text/javascript"> 
  30. // KISSY.Config.debug = true; 
  31. //包配置  
  32. KISSY.config({ 
  33.  combine:true, 
  34.   packages:[ 
  35.       { 
  36.         name:"gallery", 
  37.         path:"http://a.tbcdn.cn/s/kissy/", 
  38.         charset:"utf-8" 
  39.       } 
  40.     ] 
  41. }); 
  42.  
  43. KISSY.use("gallery/kcharts/1.1/linechart/index",function(S,LineChart){ 
  44.   var linechart = new LineChart({ 
  45.       renderTo:"#demo1", 
  46.       points:{ 
  47.         attr:{ 
  48.           type:"auto" 
  49.         } 
  50.       }, 
  51.       yLabels:{ 
  52.         css:{ 
  53.           "marginLeft":"-4px", 
  54.           "font-family":"Microsoft Yahei", 
  55.           "font-size":"10px" 
  56.         } 
  57.       }, 
  58.       xLabels:{ 
  59.         css:{ 
  60.           "font-family":"Microsoft Yahei", 
  61.            "font-size":"10px" 
  62.         } 
  63.       }, 
  64.       title:{ 
  65.               content:"Monthly Average Temperature", 
  66.               css:{ 
  67.               } 
  68.             }, 
  69.             anim:{}, 
  70.             subTitle:{ 
  71.               content:"Source: WorldClimate.com", 
  72.               css:{ 
  73.  
  74.               } 
  75.             }, 
  76.             lineType:"arc", 
  77.        xAxis: { 
  78.           text:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
  79.                     'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
  80.             }, 
  81.             yAxis:{ 
  82.               num:7 
  83.             }, 
  84.       series:[{ 
  85.                 text: 'Tokyo', 
  86.                 data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 
  87.             }, { 
  88.                 text: 'New York', 
  89.                 data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] 
  90.             } 
  91.             , { 
  92.                 text: 'Berlin', 
  93.                 data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] 
  94.             }, { 
  95.                 text: 'London', 
  96.                 data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] 
  97.             } 
  98.             ], 
  99.       defineKey:{ 
  100.         x:"week", 
  101.         y:"y" 
  102.       }, 
  103.       legend:{ 
  104.         isShow:true, 
  105.         css:{ 
  106.           marginLeft:250, 
  107.           marginTop:260 
  108.         } 
  109.       }, 
  110.       tip:{ 
  111.         offset:{ 
  112.                     x:10, 
  113.                     y:10 
  114.                 }, 
  115.         template:function(){ 
  116.           return "<span style='font-size:10px'>"+arguments['0']['text'] + "</span><br/>" + arguments['0']['y'] + "\u2103"; 
  117.         } 
  118.       } 
  119.   }); 
  120.  
  121. });</script> 
  122. </body> 
  123. </html>