Chart.js 中文文档

Chart.js是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。
步骤：
1、在HTML中引入Chart.js文件
<script src="Chart.js"></script>
2、在body内使用canvas，设置ID以及相应样式
<canvas id="myChart" width="400" height="400"></canvas>
3、获取canvas的ID、设置画笔
  var myChart = document.getElementById("myChart");
    if (myChart.getContext) {                             //判断浏览器的兼容性
        //画笔
        var ctx = myChart.getContext('2d');
       -----图标数据结构内容---------------
    } else {
        alert("您的浏览器不支持Canvas，请升级浏览器！");
    }
4、在“图标数据结构内容”区域写入相应图表的数据


注意：
1）数据结构（var data = {..........}）要写在“var myNewChart = new Chart(ctx).Line(data,options);”之前；
2）在“var myNewChart = new Chart(ctx).Line(data,options);”中的“options”是“图表参数”要放置的位置， 
    切记要将其更改为“图表参数”
     例：var myNewChart = new Chart(ctx).Line(data,"scaleFontFamily : 'Arial'");
3）
   Line----------曲线图
   Bar-----------柱状图
   Radar--------雷达图或蛛网图
   Polar---------极地区域图
   Pie-----------饼图
   Doughnut---环形图

   

****图表参数的注释部分为软件直译，翻译了一个大概的意思；若不明白可实际操作观看效果，以明确语句含义。****

1、曲线图（Line chart）
new Chart(ctx).Line(data,options);

数据结构

[html] view plain copy

1. var data = {  
2. labels : ["January","February","March","April","May","June","July"],  
3. datasets : [  
4. {  
5. fillColor : "rgba(220,220,220,0.5)",  
6. strokeColor : "rgba(220,220,220,1)",  
7. pointColor : "rgba(220,220,220,1)",  
8. pointStrokeColor : "#fff",  
9. data : [65,59,90,81,56,55,40]  
10. },  
11. {  
12. fillColor : "rgba(151,187,205,0.5)",  
13. strokeColor : "rgba(151,187,205,1)",  
14. pointColor : "rgba(151,187,205,1)",  
15. pointStrokeColor : "#fff",  
16. data : [28,48,40,19,96,27,100]  
17. }  
18. ]  
19. }  

图表参数

[html] view plain copy

1. Line.defaults = {   
2. //布尔——如果我们展示规模以上的图表数据  
3. scaleOverlay : false,  
4. //布尔——如果我们想要用硬编码的范围覆盖  
5. scaleOverride : false,  
6. //** 如果需要scaleOverride是正确的 **  
7. //步骤的数量在一个硬编码的数量规模  
8. scaleSteps : null,  
9. //数量-值硬编码的规模  
10. scaleStepWidth : null,  
11. //数量规模起始值  
12. scaleStartValue : null,  
13. //字符串,刻度线的颜色   
14. scaleLineColor : "rgba(0,0,0,.1)",  
15. //像素数量标度线的宽度   
16. scaleLineWidth : 1,  
17. //布尔——无论是规模上的标签  
18. scaleShowLabels : false,  
19. //插值JS字符串,可以访问值  
20. scaleLabel : "<%=value%>",  
21. //字符串,标尺刻度标尺刻度的字体声明  
22. scaleFontFamily : "'Arial'",  
23. //规模数量的标签字体大小(以像素为单位)  
24. scaleFontSize : 12,  
25. //字符串——规模标签字体风格  
26. scaleFontStyle : "normal",  
27. //字符串——规模标签字体颜色  
28. scaleFontColor : "#666",  
29. //布尔——无论是网格线在图所示  
30. scaleShowGridLines : true,  
31. //字符串,网格线的颜色  
32. scaleGridLineColor : "rgba(0,0,0,.05)",  
33. //网格线的宽度  
34. scaleGridLineWidth : 1,  
35. //布尔——无论是点之间的线是弯曲的  
36. bezierCurve : true,  
37. //布尔——是否显示为每个点一个点  
38. pointDot : true,  
39. //每个点的像素点的数量,半径  
40. pointDotRadius : 3,  
41. //数字像素宽度的点中风  
42. pointDotStrokeWidth : 1,  
43. //布尔——是否显示数据集的中风  
44. datasetStroke : true,  
45. //像素宽度的数量数据集  
46. datasetStrokeWidth : 2,  
47. //布尔——是否用颜色填充数据集  
48. datasetFill : true,  
49. //布尔——无论是动画图表  
50. animation : true,  
51. //数字,数字动画的步骤  
52. animationSteps : 60,  
53. //字符串——动画放松效果  
54. animationEasing : "easeOutQuart",  
55. //函数——火灾当动画完成  
56. onAnimationComplete : null  
57. }  

2、柱状图（Bar chart）
new Chart(ctx).Bar(data,options);

数据结构

[html] view plain copy

1. var data = {  
2. labels : ["January","February","March","April","May","June","July"],  
3. datasets : [  
4. {  
5. fillColor : "rgba(220,220,220,0.5)",  
6. strokeColor : "rgba(220,220,220,1)",  
7. data : [65,59,90,81,56,55,40]  
8. },  
9. {  
10. fillColor : "rgba(151,187,205,0.5)",  
11. strokeColor : "rgba(151,187,205,1)",  
12. data : [28,48,40,19,96,27,100]  
13. }  
14. ]  
15. }  

图表参数

[html] view plain copy

1. Bar.defaults = {   
2. //布尔——如果我们展示规模以上的图表数据  
3. scaleOverlay : false,  
4. //布尔——如果我们想要用硬编码的范围覆盖  
5. scaleOverride : false,  
6. //** 如果需要scaleOverride是正确的 **  
7. //步骤的数量在一个硬编码的数量规模  
8. scaleSteps : null,  
9. //数量-值硬编码的规模  
10. scaleStepWidth : null,  
11. //数量规模起始值  
12. scaleStartValue : null,  
13. //字符串,刻度线的颜色   
14. scaleLineColor : "rgba(0,0,0,.1)",  
15. //像素数量标度线的宽度   
16. scaleLineWidth : 1,  
17. //布尔——无论是规模上的标签  
18. scaleShowLabels : false,  
19. //插值JS字符串,可以访问值  
20. scaleLabel : "<%=value%>",  
21. //字符串,标尺刻度标尺刻度的字体声明  
22. scaleFontFamily : "'Arial'",  
23. //规模数量的标签字体大小(以像素为单位)  
24. scaleFontSize : 12,  
25. //字符串——规模标签字体风格  
26. scaleFontStyle : "normal",  
27. //字符串——规模标签字体颜色  
28. scaleFontColor : "#666",  
29. ///布尔——无论是网格线在图所示  
30. scaleShowGridLines : true,  
31. //字符串,网格线的颜色  
32. scaleGridLineColor : "rgba(0,0,0,.05)",  
33. //网格线的宽度  
34. scaleGridLineWidth : 1,  
35. //布尔——如果有一个中风在每一栏  
36. barShowStroke : true,  
37. //数量——像素宽度  
38. barStrokeWidth : 2,  
39. //每个X -间距值集  
40. barValueSpacing : 5,  
41. //数量-间距在X值的数据集  
42. barDatasetSpacing : 1,  
43. //布尔——无论是动画图表  
44. animation : true,  
45. //数字,数字动画的步骤  
46. animationSteps : 60,  
47. //字符串——动画放松效果  
48. animationEasing : "easeOutQuart",  
49. //函数——当动画完成  
50. onAnimationComplete : null  
51. }  

3、雷达图或蛛网图（Radar chart）
new Chart(ctx).Radar(data,options);

数据结构

[html] view plain copy

1. var data = {  
2. labels : ["Eating","Drinking","Sleeping","Designing","Coding","Partying","Running"],  
3. datasets : [  
4. {  
5. fillColor : "rgba(220,220,220,0.5)",  
6. strokeColor : "rgba(220,220,220,1)",  
7. pointColor : "rgba(220,220,220,1)",  
8. pointStrokeColor : "#fff",  
9. data : [65,59,90,81,56,55,40]  
10. },  
11. {  
12. fillColor : "rgba(151,187,205,0.5)",  
13. strokeColor : "rgba(151,187,205,1)",  
14. pointColor : "rgba(151,187,205,1)",  
15. pointStrokeColor : "#fff",  
16. data : [28,48,40,19,96,27,100]  
17. }  
18. ]  
19. }  

图表

[html] view plain copy

1. Radar.defaults = {   
2. //布尔——如果我们展示规模以上的图表数据  
3. scaleOverlay : false,  
4. //布尔——如果我们想要用硬编码的范围覆盖  
5. scaleOverride : false,  
6. //** 如果需要scaleOverride是正确的 **  
7. //步骤的数量在一个硬编码的数量规模  
8. scaleSteps : null,  
9. //数量-值硬编码的规模  
10. scaleStepWidth : null,  
11. //中心起始值  
12. scaleStartValue : null,  
13. //布尔——为每个点规模是否显示行  
14. scaleShowLine : true,  
15. //字符串,刻度线的颜色   
16. scaleLineColor : "rgba(0,0,0,.1)",  
17. //像素数量标度线的宽度  
18. scaleLineWidth : 1,  
19. //布尔——无论是规模上的标签  
20. scaleShowLabels : false,  
21. //插值JS字符串,可以访问值  
22. scaleLabel : "<%=value%>",  
23. //字符串,标尺刻度标尺刻度的字体声明  
24. scaleFontFamily : "'Arial'",  
25. //规模数量的标签字体大小(以像素为单位)  
26. scaleFontSize : 12,  
27. //字符串——规模标签字体风格  
28. scaleFontStyle : "normal",  
29. //字符串——规模标签字体颜色  
30. scaleFontColor : "#666",  
31. //布尔——显示标尺刻度的背景  
32. scaleShowLabelBackdrop : true,  
33. //字符串,标签的颜色背景   
34. scaleBackdropColor : "rgba(255,255,255,0.75)",  
35. //数量——背景填充上面和下面的标签像素  
36. scaleBackdropPaddingY : 2,  
37. //数量——背景填充像素的标签  
38. scaleBackdropPaddingX : 2,  
39. //布尔——我们是否显示雷达的角线  
40. angleShowLineOut : true,  
41. //字符串-颜色的角线  
42. angleLineColor : "rgba(0,0,0,.1)",  
43. //数量的像素宽度角线  
44. angleLineWidth : 1,  
45. //字符串点标签字体声明  
46. pointLabelFontFamily : "'Arial'",  
47. //字符串点标签的字重  
48. pointLabelFontStyle : "normal",  
49. //点数量的标签字体大小(以像素为单位)  
50. pointLabelFontSize : 12,  
51. //字符串点标签的字体颜色   
52. pointLabelFontColor : "#666",  
53. //布尔——是否显示为每个点一个点  
54. pointDot : true,  
55. //每个点的像素点的数量,半径  
56. pointDotRadius : 3,  
57. //数字像素宽度的点  
58. pointDotStrokeWidth : 1,  
59. //布尔——是否显示数据集  
60. datasetStroke : true,  
61. //-像素宽度的数量数据集  
62. datasetStrokeWidth : 2,  
63. //布尔——是否用颜色填充数据集  
64. datasetFill : true,  
65. //布尔——无论是动画图表  
66. animation : true,  
67. //数字,数字动画的步骤  
68. animationSteps : 60,  
69. //字符串——动画放松效果  
70. animationEasing : "easeOutQuart",  
71. //函数——当动画完成  
72. onAnimationComplete : null  
73. }  

4、极地区域图（Polar area chart）
new Chart(ctx).PolarArea(data,options);

数据结构

[html] view plain copy

1. var data = [  
2. {  
3. value : 30,  
4. color: "#D97041"  
5. },  
6. {  
7. value : 90,  
8. color: "#C7604C"  
9. },  
10. {  
11. value : 24,  
12. color: "#21323D"  
13. },  
14. {  
15. value : 58,  
16. color: "#9D9B7F"  
17. },  
18. {  
19. value : 82,  
20. color: "#7D4F6D"  
21. },  
22. {  
23. value : 8,  
24. color: "#584A5E"  
25. }  
26. ]  

图表

[html] view plain copy

1. PolarArea.defaults = {   
2. //布尔——我们是否显示规模高于或低于图表部分  
3. scaleOverlay : true,  
4. //布尔——如果我们想要用硬编码的范围覆盖  
5. scaleOverride : false,  
6. //** 如果需要scaleOverride是正确的 **  
7. //步骤的数量在一个硬编码的数量规模  
8. scaleSteps : null,  
9. //数量-值硬编码的规模  
10. scaleStepWidth : null,  
11. //中心起始值  
12. scaleStartValue : null,  
13. //布尔——显示一行中每一个值范围  
14. scaleShowLine : true,  
15. //字符串-刻度线的颜色  
16. scaleLineColor : "rgba(0,0,0,.1)",  
17. //数量——线的宽度,以像素为单位  
18. scaleLineWidth : 1,  
19. //布尔——我们是否应该显示文本标签  
20. scaleShowLabels : true,  
21. //插值JS字符串,可以访问值  
22. scaleLabel : "<%=value%>",  
23. //字符串,标尺刻度标尺刻度的字体声明  
24. scaleFontFamily : "'Arial'",  
25. //规模数量的标签字体大小(以像素为单位)  
26. scaleFontSize : 12,  
27. //字符串——规模标签字体风格  
28. scaleFontStyle : "normal",  
29. //字符串——规模标签字体颜色  
30. scaleFontColor : "#666",  
31. //布尔——显示标尺刻度的背景  
32. scaleShowLabelBackdrop : true,  
33. //字符串,标签的颜色背景   
34. scaleBackdropColor : "rgba(255,255,255,0.75)",  
35. //数量——背景填充上面和下面的标签像素  
36. scaleBackdropPaddingY : 2,  
37. //数量——背景填充像素的标签  
38. scaleBackdropPaddingX : 2,  
39. //布尔——一行在图表中的每一部分  
40. segmentShowStroke : true,  
41. //字符串,在每一部分的颜色。  
42. segmentStrokeColor : "#fff",  
43. //数量-描边的宽度值像素  
44. segmentStrokeWidth : 2,  
45. //布尔——是否动画图表  
46. animation : true,  
47. //数量,数量的动画的步骤  
48. animationSteps : 100,  
49. //字符串——动画放松效果  
50. animationEasing : "easeOutBounce",  
51. //布尔——动画的旋转图  
52. animateRotate : true,  
53. //布尔——动画缩放中心的图表  
54. animateScale : false,  
55. //功能——这动画图完成  
56. onAnimationComplete : null  
57. }  

5、饼图（Pie chart）
new Chart(ctx).Pie(data,options);

数据结构

[html] view plain copy

1. var data = [  
2. {  
3. value: 30,  
4. color:"#F38630"  
5. },  
6. {  
7. value : 50,  
8. color : "#E0E4CC"  
9. },  
10. {  
11. value : 100,  
12. color : "#69D2E7"  
13. }   
14. ]  

图表

[html] view plain copy

1. Pie.defaults = {  
2. //布尔——我们是否应该显示两个扇形之间的间隙  
3. segmentShowStroke : true,  
4. //字符串,两个扇形之间间隙的颜色  
5. segmentStrokeColor : "#fff",  
6. //数量——两个扇形之间间隙的宽度  
7. segmentStrokeWidth : 2,  
8. //布尔——我们是否应该动画图表  
9. animation : true,  
10. //数量,数量的动画的步骤  
11. animationSteps : 100,  
12. //字符串——动画放松效果  
13. animationEasing : "easeOutBounce",  
14. //布尔——我们动画是否旋转  
15. animateRotate : true,  
16. //布尔——我们动画是否缩放中心的扇形  
17. animateScale : false,  
18.   
19. //函数—动画完成。  
20. onAnimationComplete : null  
21. }  

6、环形图（Doughnut chart）
new Chart(ctx).Doughnut(data,options);

数据结构

[html] view plain copy

1. var data = [  
2. {  
3. value: 30,  
4. color:"#F7464A"  
5. },  
6. {  
7. value : 50,  
8. color : "#E2EAE9"  
9. },  
10. {  
11. value : 100,  
12. color : "#D4CCC5"  
13. },  
14. {  
15. value : 40,  
16. color : "#949FB1"  
17. },  
18. {  
19. value : 120,  
20. color : "#4D5360"  
21. }  
22.   
23.   
24. ]  

图表

[html] view plain copy

1. Doughnut.defaults = {  
2. //布尔——我们是否应该显示两个扇形之间的间隙  
3. segmentShowStroke : true,  
4. //字符串,两个扇形之间的间隙的颜色  
5. segmentStrokeColor : "#fff",  
6. //数量——两个扇形之间间隙的宽度  
7. segmentStrokeWidth : 2,  
8. //中间，图表的比例.  
9. percentageInnerCutout : 50,  
10. //布尔——我们是否应该动画图表  
11. animation : true,  
12. //数量,数量的动画的步骤  
13. animationSteps : 100,  
14. //字符串——动画放松效果  
15. animationEasing : "easeOutBounce",  
16. //布尔——我们是否动画甜甜圈的旋转  
17. animateRotate : true,  
18. //布尔——我们是否动画缩放的甜甜圈中心  
19. animateScale : false,  
20. //函数——动画完成。  
21. onAnimationComplete : null  
22. }