chart.js在html中画曲线图

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

http://www.bootcss.com/p/chart.js/docs/

http://www.chartjs.org/docs/ 中有详细讲解

一、简介

Chart.js是一个基于HTML5的简单的面向对象的图表库，支持包括IE7和8的所有现代浏览器。图表库中有6种表，分别是：曲线图（Linecharts）、柱状图（Barcharts）、雷达图（Radarcharts）、饼状图（Piecharts）、极坐标区域图（Polararea charts）以及圆环图（Doughnutcharts）。并且带有动画效果（animated），支持retina屏。

二、开始学习

①，首先Chart.js的官网地址是：http://www.chartjs.org/，可以从官网上下载JS文件。

然后加入到html文件中。

1 <script src="Chart.js" ></script>

②，曲线图（Line charts）

曲线图适合于表示数据的趋势变化，以及数据之间的对比。

测试代码如下：

1 <html>
2 <head>
3 <title>TestChart.js</title>
4 <script src="Chart.js" ></script>
5 </head>
6 <body>
7 <canvas id="myChart" width="400" height="400"></canvas>
8 <script type="text/javascript">
9 var ctx = document.getElementById("myChart").getContext("2d");
10 var data = {
11 /// 表现在X轴上的数据，数组形式
12 labels : ["January","February","March","April","May","June","July"],
13 /// 第一条线
14 datasets : [
15 {
16 /// 曲线的填充颜色
17 fillColor : "rgba(220,220,220,0.5)",
18 /// 填充块的边框线的颜色
19 strokeColor : "rgba(220,220,220,1)",
20 /// 表示数据的圆圈的颜色
21 pointColor : "rgba(220,220,220,1)",
22 /// 表示数据的圆圈的边的颜色
23 pointStrokeColor : "#fff",
24 data : [65,59,90,81,56,55,40]
25 },
26 /// 第二条线
27 {
28 fillColor : "rgba(151,187,205,0.5)",
29 strokeColor : "rgba(151,187,205,1)",
30 pointColor : "rgba(151,187,205,1)",
31 pointStrokeColor : "#fff",
32 data : [28,48,40,19,96,27,100]
33 }
34 ]
35 }
36 /// 动画效果
37 var options = {
38
39 //Boolean - If we show the scale above the chart data
40 scaleOverlay : false,
41
42 //Boolean - If we want to override with a hard coded scale
43 scaleOverride : false,
44
45 //** Required if scaleOverride is true **
46 //Number - The number of steps in a hard coded scale
47 scaleSteps : null,
48 //Number - The value jump in the hard coded scale
49 scaleStepWidth : null,
50 //Number - The scale starting value
51 scaleStartValue : null,
52
53 //String - Colour of the scale line
54 scaleLineColor : "rgba(0,0,0,.1)",
55
56 //Number - Pixel width of the scale line
57 scaleLineWidth : 1,
58
59 //Boolean - Whether to show labels on the scale
60 scaleShowLabels : true,
61
62 //Interpolated JS string - can access value
63 scaleLabel : "<%=value%>",
64
65 //String - Scale label font declaration for the scale label
66 scaleFontFamily : "'Arial'",
67
68 //Number - Scale label font size in pixels
69 scaleFontSize : 12,
70
71 //String - Scale label font weight style
72 scaleFontStyle : "normal",
73
74 //String - Scale label font colour
75 scaleFontColor : "#666",
76
77 ///Boolean - Whether grid lines are shown across the chart
78 scaleShowGridLines : true,
79
80 //String - Colour of the grid lines
81 scaleGridLineColor : "rgba(0,0,0,.05)",
82
83 //Number - Width of the grid lines
84 scaleGridLineWidth : 1,
85
86 //Boolean - Whether the line is curved between points
87 bezierCurve : true,
88
89 //Boolean - Whether to show a dot for each point
90 pointDot : true,
91
92 //Number - Radius of each point dot in pixels
93 pointDotRadius : 3,
94
95 //Number - Pixel width of point dot stroke
96 pointDotStrokeWidth : 1,
97
98 //Boolean - Whether to show a stroke for datasets
99 datasetStroke : true,
100
101 //Number - Pixel width of dataset stroke
102 datasetStrokeWidth : 2,
103
104 //Boolean - Whether to fill the dataset with a colour
105 datasetFill : true,
106
107 //Boolean - Whether to animate the chart
108 animation : true,
109
110 //Number - Number of animation steps
111 animationSteps : 60,
112
113 //String - Animation easing effect
114 animationEasing : "easeOutQuart",
115
116 //Function - Fires when the animation is complete
117 onAnimationComplete : null
118
119 }
120 /// 创建对象，生成图表
121 new Chart(ctx).Line(data,options);
122 </script>
123 </body>
124 </html>

效果如下：

③，柱状图（Barcharts）

代码如下：

1 <html>
2 <head>
3 <title>TestChart.js</title>
4 <script src="Chart.js" ></script>
5 </head>
6 <body>
7 <canvas id="myChart" width="400" height="400"></canvas>
8 <script type="text/javascript">
9 var ctx = document.getElementById("myChart").getContext("2d");
10 var data = {
11 /// 表现在X轴上的数据，数组形式
12 labels : ["January","February","March","April","May","June","July"],
13 /// 第一条线
14 datasets : [
15 {
16 /// 填充颜色
17 fillColor : "red",
18 /// 填充块的边框线的颜色
19 strokeColor : "yellow",
20 data : [65,59,90,81,56,55,40]
21 },
22 /// 第二条线
23 {
24 fillColor : "blue",
25 strokeColor : "green",
26 data : [28,48,40,19,96,27,100]
27 }
28 ]
29 }
30 /// 动画效果
31 var options = {
32
33 //Boolean - If we show the scale above the chart data
34 scaleOverlay : false,
35
36 //Boolean - If we want to override with a hard coded scale
37 scaleOverride : false,
38
39 //** Required if scaleOverride is true **
40 //Number - The number of steps in a hard coded scale
41 scaleSteps : null,
42 //Number - The value jump in the hard coded scale
43 scaleStepWidth : null,
44 //Number - The scale starting value
45 scaleStartValue : null,
46
47 //String - Colour of the scale line
48 scaleLineColor : "rgba(0,0,0,.1)",
49
50 //Number - Pixel width of the scale line
51 scaleLineWidth : 1,
52
53 //Boolean - Whether to show labels on the scale
54 scaleShowLabels : true,
55
56 //Interpolated JS string - can access value
57 scaleLabel : "<%=value%>",
58
59 //String - Scale label font declaration for the scale label
60 scaleFontFamily : "'Arial'",
61
62 //Number - Scale label font size in pixels
63 scaleFontSize : 12,
64
65 //String - Scale label font weight style
66 scaleFontStyle : "normal",
67
68 //String - Scale label font colour
69 scaleFontColor : "#666",
70
71 ///Boolean - Whether grid lines are shown across the chart
72 scaleShowGridLines : true,
73
74 //String - Colour of the grid lines
75 scaleGridLineColor : "rgba(0,0,0,.05)",
76
77 //Number - Width of the grid lines
78 scaleGridLineWidth : 1,
79
80 //Boolean - Whether the line is curved between points
81 bezierCurve : true,
82
83 //Boolean - Whether to show a dot for each point
84 pointDot : true,
85
86 //Number - Radius of each point dot in pixels
87 pointDotRadius : 3,
88
89 //Number - Pixel width of point dot stroke
90 pointDotStrokeWidth : 1,
91
92 //Boolean - Whether to show a stroke for datasets
93 datasetStroke : true,
94
95 //Number - Pixel width of dataset stroke
96 datasetStrokeWidth : 2,
97
98 //Boolean - Whether to fill the dataset with a colour
99 datasetFill : true,
100
101 //Boolean - Whether to animate the chart
102 animation : true,
103
104 //Number - Number of animation steps
105 animationSteps : 60,
106
107 //String - Animation easing effect
108 animationEasing : "easeOutQuart",
109
110 //Function - Fires when the animation is complete
111 onAnimationComplete : null
112
113 }
114 /// 创建对象，生成图表
115 new Chart(ctx).Bar(data,options);
116 </script>
117 </body>
118 </html>
119

效果如下：

④，雷达图（Radar charts）

代码如下：

1 <html>
2 <head>
3 <title>TestChart.js</title>
4 <script src="Chart.js" ></script>
5 </head>
6 <body>
7 <canvas id="myChart" width="400" height="400"></canvas>
8 <script type="text/javascript">
9 var ctx = document.getElementById("myChart").getContext("2d");
10 var data = {
11 labels : ["Eating","Drinking","Sleeping","Designing","Coding","Partying","Running"],
12 datasets : [
13 {
14 fillColor : "rgba(220,220,220,0.5)",
15 strokeColor : "rgba(220,220,220,1)",
16 pointColor : "rgba(220,220,220,1)",
17 pointStrokeColor : "#fff",
18 data : [65,59,90,81,56,55,40]
19 },
20 {
21 fillColor : "rgba(151,187,205,0.5)",
22 strokeColor : "rgba(151,187,205,1)",
23 pointColor : "rgba(151,187,205,1)",
24 pointStrokeColor : "#fff",
25 data : [28,48,40,19,96,27,100]
26 }
27 ]
28 }
29 /// 动画效果
30 var options = {
31
32 //Boolean - If we show the scale above the chart data
33 scaleOverlay : false,
34
35 //Boolean - If we want to override with a hard coded scale
36 scaleOverride : false,
37
38 //** Required if scaleOverride is true **
39 //Number - The number of steps in a hard coded scale
40 scaleSteps : null,
41 //Number - The value jump in the hard coded scale
42 scaleStepWidth : null,
43 //Number - The centre starting value
44 scaleStartValue : null,
45
46 //Boolean - Whether to show lines for each scale point
47 scaleShowLine : true,
48
49 //String - Colour of the scale line
50 scaleLineColor : "rgba(0,0,0,.1)",
51
52 //Number - Pixel width of the scale line
53 scaleLineWidth : 1,
54
55 //Boolean - Whether to show labels on the scale
56 scaleShowLabels : false,
57
58 //Interpolated JS string - can access value
59 scaleLabel : "<%=value%>",
60
61 //String - Scale label font declaration for the scale label
62 scaleFontFamily : "'Arial'",
63
64 //Number - Scale label font size in pixels
65 scaleFontSize : 12,
66
67 //String - Scale label font weight style
68 scaleFontStyle : "normal",
69
70 //String - Scale label font colour
71 scaleFontColor : "#666",
72
73 //Boolean - Show a backdrop to the scale label
74 scaleShowLabelBackdrop : true,
75
76 //String - The colour of the label backdrop
77 scaleBackdropColor : "rgba(255,255,255,0.75)",
78
79 //Number - The backdrop padding above & below the label in pixels
80 scaleBackdropPaddingY : 2,
81
82 //Number - The backdrop padding to the side of the label in pixels
83 scaleBackdropPaddingX : 2,
84
85 //Boolean - Whether we show the angle lines out of the radar
86 angleShowLineOut : true,
87
88 //String - Colour of the angle line
89 angleLineColor : "rgba(0,0,0,.1)",
90
91 //Number - Pixel width of the angle line
92 angleLineWidth : 1,
93
94 //String - Point label font declaration
95 pointLabelFontFamily : "'Arial'",
96
97 //String - Point label font weight
98 pointLabelFontStyle : "normal",
99
100 //Number - Point label font size in pixels
101 pointLabelFontSize : 12,
102
103 //String - Point label font colour
104 pointLabelFontColor : "#666",
105
106 //Boolean - Whether to show a dot for each point
107 pointDot : true,
108
109 //Number - Radius of each point dot in pixels
110 pointDotRadius : 3,
111
112 //Number - Pixel width of point dot stroke
113 pointDotStrokeWidth : 1,
114
115 //Boolean - Whether to show a stroke for datasets
116 datasetStroke : true,
117
118 //Number - Pixel width of dataset stroke
119 datasetStrokeWidth : 2,
120
121 //Boolean - Whether to fill the dataset with a colour
122 datasetFill : true,
123
124 //Boolean - Whether to animate the chart
125 animation : true,
126
127 //Number - Number of animation steps
128 animationSteps : 60,
129
130 //String - Animation easing effect
131 animationEasing : "easeOutQuart",
132
133 //Function - Fires when the animation is complete
134 onAnimationComplete : null
135
136 }
137 /// 创建对象，生成图表
138 new Chart(ctx).Radar(data,options);
139 </script>
140 </body>
141 </html>
142

效果如下：

⑤，饼状图（Piecharts）

代码如下：

效果如下：

⑤，极坐标区域图（Polararea charts）

代码如下：

1 <html>
2 <head>
3 <title>TestChart.js</title>
4 <script src="Chart.js" ></script>
5 </head>
6 <body>
7 <canvas id="myChart" width="400" height="400"></canvas>
8 <script type="text/javascript">
9 var ctx = document.getElementById("myChart").getContext("2d");
10 var data = [
11 {
12 value : 30,
13 color: "#D97041"
14 },
15 {
16 value : 90,
17 color: "#C7604C"
18 },
19 {
20 value : 24,
21 color: "#21323D"
22 },
23 {
24 value : 58,
25 color: "#9D9B7F"
26 },
27 {
28 value : 82,
29 color: "#7D4F6D"
30 },
31 {
32 value : 8,
33 color: "#584A5E"
34 }
35 ]
36 /// 动画效果
37 var options = {
38
39 //Boolean - Whether we show the scale above or below the chart segments
40 scaleOverlay : true,
41
42 //Boolean - If we want to override with a hard coded scale
43 scaleOverride : false,
44
45 //** Required if scaleOverride is true **
46 //Number - The number of steps in a hard coded scale
47 scaleSteps : null,
48 //Number - The value jump in the hard coded scale
49 scaleStepWidth : null,
50 //Number - The centre starting value
51 scaleStartValue : null,
52
53 //Boolean - Show line for each value in the scale
54 scaleShowLine : true,
55
56 //String - The colour of the scale line
57 scaleLineColor : "rgba(0,0,0,.1)",
58
59 //Number - The width of the line - in pixels
60 scaleLineWidth : 1,
61
62 //Boolean - whether we should show text labels
63 scaleShowLabels : true,
64
65 //Interpolated JS string - can access value
66 scaleLabel : "<%=value%>",
67
68 //String - Scale label font declaration for the scale label
69 scaleFontFamily : "'Arial'",
70
71 //Number - Scale label font size in pixels
72 scaleFontSize : 12,
73
74 //String - Scale label font weight style
75 scaleFontStyle : "normal",
76
77 //String - Scale label font colour
78 scaleFontColor : "#666",
79
80 //Boolean - Show a backdrop to the scale label
81 scaleShowLabelBackdrop : true,
82
83 //String - The colour of the label backdrop
84 scaleBackdropColor : "rgba(255,255,255,0.75)",
85
86 //Number - The backdrop padding above & below the label in pixels
87 scaleBackdropPaddingY : 2,
88
89 //Number - The backdrop padding to the side of the label in pixels
90 scaleBackdropPaddingX : 2,
91
92 //Boolean - Stroke a line around each segment in the chart
93 segmentShowStroke : true,
94
95 //String - The colour of the stroke on each segement.
96 segmentStrokeColor : "#fff",
97
98 //Number - The width of the stroke value in pixels
99 segmentStrokeWidth : 2,
100
101 //Boolean - Whether to animate the chart or not
102 animation : true,
103
104 //Number - Amount of animation steps
105 animationSteps : 100,
106
107 //String - Animation easing effect.
108 animationEasing : "easeOutBounce",
109
110 //Boolean - Whether to animate the rotation of the chart
111 animateRotate : true,
112
113 //Boolean - Whether to animate scaling the chart from the centre
114 animateScale : false,
115
116 //Function - This will fire when the animation of the chart is complete.
117 onAnimationComplete : null
118 }
119 /// 创建对象，生成图表
120 new Chart(ctx).PolarArea(data,options);
121 </script>
122 </body>
123 </html>
124