chart.js参数问题

chart.js参数问题

标签： chart.jsjavascript

2015-11-12 14:06 2631人阅读 评论(0) 收藏 举报

分类：

前端learn（4）

[html] view plain copy

1. var lineChartData = {  
2.     labels : ["09/12","09/13","09/14","09/15","09/16","09/17","09/18"], //X轴 坐标  
3.     datasets : [  
4.         {  
5.             fillColor : "transparent", // 背景色  
6.             strokeColor : "#ef7c1f", // 线  
7.             pointColor : "#ef7c1f", // 点  
8.             pointStrokeColor : "#fff", // 点的包围圈  
9.             data : [120,140,110,130,150,170,160] // Y轴坐标  
10.         },  
11.         {  
12.             fillColor : "transparent",  
13.             strokeColor : "#3dc448",  
14.             pointColor : "#3dc448",  
15.             pointStrokeColor : "#fff",  
16.             data : [80,90,80,100,110,130,100]  
17.         }  
18.     ]  
19.   
20. }  
21. var defaults = {  
22.                   
23.     //Boolean - If we show the scale above the chart data             
24.     scaleOverlay : false,  
25.       
26.     //Boolean - If we want to override with a hard coded scale  
27.     scaleOverride : false,  
28.       
29.     //** Required if scaleOverride is true **  
30.     //Number - The number of steps in a hard coded scale  
31.     scaleSteps : null,  
32.       
33.     //Number - The value jump in the hard coded scale  
34.     scaleStepWidth : 20,  
35.       
36.     // Y 轴的起始值  
37.     scaleStartValue : null,  
38.   
39.     // Y/X轴的颜色  
40.     scaleLineColor : "rgba(0,0,0,.1)",  
41.       
42.     // X,Y轴的宽度  
43.     scaleLineWidth : 1,  
44.   
45.     // 刻度是否显示标签, 即Y轴上是否显示文字  
46.     scaleShowLabels : true,  
47.       
48.     // Y轴上的刻度,即文字  
49.     scaleLabel : "<%=value%>",  
50.       
51.     // 字体  
52.     scaleFontFamily : "'Arial'",  
53.       
54.     // 文字大小  
55.     scaleFontSize : 12,  
56.       
57.     // 文字样式  
58.     scaleFontStyle : "normal",  
59.       
60.     // 文字颜色  
61.     scaleFontColor : "#666",      
62.       
63.     // 是否显示网格  
64.     scaleShowGridLines : false,  
65.       
66.     // 网格颜色  
67.     scaleGridLineColor : "rgba(0,0,0,.05)",  
68.       
69.     // 网格宽度  
70.     scaleGridLineWidth : 2,   
71.       
72.     // 是否使用贝塞尔曲线? 即:线条是否弯曲  
73.     bezierCurve : false,  
74.       
75.     // 是否显示点数  
76.     pointDot : true,  
77.       
78.     // 圆点的大小  
79.     pointDotRadius : 8,  
80.       
81.     // 圆点的笔触宽度, 即:圆点外层白色大小  
82.     pointDotStrokeWidth : 2,  
83.       
84.     // 数据集行程  
85.     datasetStroke : true,  
86.       
87.     // 线条的宽度, 即:数据集  
88.     datasetStrokeWidth : 2,  
89.       
90.     // 是否填充数据集  
91.     datasetFill : false,  
92.       
93.     // 是否执行动画  
94.     animation : true,  
95.   
96.     // 动画的时间  
97.     animationSteps : 60,  
98.       
99.     // 动画的特效  
100.     animationEasing : "easeOutQuart",  
101.   
102.     // 动画完成时的执行函数  
103.     onAnimationComplete : null  
104.       
105. }  
106. var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData, defaults);