Chart.js学习

一、简介

　　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）

代码如下：

 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:"#F38630"
14     },
15     {
16         value : 50,
17         color : "#E0E4CC"
18     },
19     {
20         value : 100,
21         color : "#69D2E7"
22     }            
23 ]
24             /// 动画效果
25             var options = {
26     //Boolean - Whether we should show a stroke on each segment
27     segmentShowStroke : true,
28     
29     //String - The colour of each segment stroke
30     segmentStrokeColor : "#fff",
31     
32     //Number - The width of each segment stroke
33     segmentStrokeWidth : 2,
34     
35     //Boolean - Whether we should animate the chart    
36     animation : true,
37     
38     //Number - Amount of animation steps
39     animationSteps : 100,
40     
41     //String - Animation easing effect
42     animationEasing : "easeOutBounce",
43     
44     //Boolean - Whether we animate the rotation of the Pie
45     animateRotate : true,
46 
47     //Boolean - Whether we animate scaling the Pie from the centre
48     animateScale : false,
49     
50     //Function - Will fire on animation completion.
51     onAnimationComplete : null
52 }
53             /// 创建对象，生成图表
54             new Chart(ctx).Pie(data,options);
55         </script>
56     </body>
57 </html>
58

效果如下：

⑤，极坐标区域图（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

效果如下：

⑥，圆环图（Doughnutcharts）

代码如下：

 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:"#F7464A"
14     },
15     {
16         value : 50,
17         color : "#E2EAE9"
18     },
19     {
20         value : 100,
21         color : "#D4CCC5"
22     },
23     {
24         value : 40,
25         color : "#949FB1"
26     },
27     {
28         value : 120,
29         color : "#4D5360"
30     }
31 
32 ]
33             /// 动画效果
34             var options = {
35     //Boolean - Whether we should show a stroke on each segment
36     segmentShowStroke : true,
37     
38     //String - The colour of each segment stroke
39     segmentStrokeColor : "#fff",
40     
41     //Number - The width of each segment stroke
42     segmentStrokeWidth : 2,
43     
44     //The percentage of the chart that we cut out of the middle.
45     percentageInnerCutout : 50,
46     
47     //Boolean - Whether we should animate the chart    
48     animation : true,
49     
50     //Number - Amount of animation steps
51     animationSteps : 100,
52     
53     //String - Animation easing effect
54     animationEasing : "easeOutBounce",
55     
56     //Boolean - Whether we animate the rotation of the Doughnut
57     animateRotate : true,
58 
59     //Boolean - Whether we animate scaling the Doughnut from the centre
60     animateScale : false,
61     
62     //Function - Will fire on animation completion.
63     onAnimationComplete : null
64 }
65             /// 创建对象，生成图表
66             new Chart(ctx).Doughnut(data,options);
67         </script>
68     </body>
69 </html>
70