kcharts前端js图表库之折线图

柔情只为你懂 2022-01-13 16:35 428阅读 0赞

一个简单的折线图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/][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>

转载于:https://blog.51cto.com/huxiaoqi/1181033

[http_docs.kissyui.com]: http://docs.kissyui.com/