Chart.js 学习笔记

1、引入Chart.js 文件

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

2、在html中创建画布

<canvas id="myChart" width="400" height="400"></canvas>

3、在js中实例化图表

var ctx = $("#myChart").get(0).getContext("2d");
var myNewChart = new Chart(ctx);

不同图表需要new出不同的Chart。

以下是雷达图的实例代码：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>图表插件</title>
  6     <link href="css/bootstrap.css" rel="stylesheet">
  7     <script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
  8     <script type="text/javascript" src="js/Chart.bundle.js"></script>
  9 
 10     <script type="text/javascript" src="js/bootstrap.js"></script>
 11     <style>
 12         .top-offset{
 13             margin: 5px 0;
 14         }
 15     </style>
 16 </head>
 17 <body>
 18 <div class="container">
 19     <div class="row top-offset">
 20         <div>
 21             <canvas id="canvas"></canvas>
 22         </div>
 23     </div>
 24     <div class="row">
 25         <div>
 26             <button id="randomizeData">随机数据</button>
 27             <button id="addDataset">添加数据</button>
 28             <button id="removeDataset">移除数据</button>
 29             <button id="addData">添加科目</button>
 30             <button id="removeData">移除科目</button>
 31         </div>
 32     </div>
 33 </div>
 34 <script>
 35     var randomScalingFactor = function() {
 36         return Math.round(Math.random() * 100);
 37     };
 38     var randomColorFactor = function() {
 39         return Math.round(Math.random() * 255);
 40     };
 41     var randomColor = function(opacity) {
 42         return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
 43     };
 44 
 45     var config = {
 46         type: 'radar',
 47         data: {
 48             labels: ["语文", "数学", "英语", "理综", "基本能力", "体育"],
 49             datasets: [{
 50                 label: "一本分数线",
 51                 backgroundColor: "rgba(1, 191, 157,0.2)",
 52                 pointBackgroundColor: "rgba(31, 207, 109,1)",
 53                 data: [122, 125, 118,210,92,95]
 54             },{
 55                 label: "二本分数线",
 56                 hidden: true,
 57                 backgroundColor: "rgba(220,220,220,0.2)",
 58                 pointBackgroundColor: "rgba(220,220,220,1)",
 59                 data: [115, 110, 105,180,85,86]
 60             }, {
 61                 label: '三本分数线',
 62                 hidden: true,
 63                 data: [90, 85, 98,130,80,82],
 64             }, {
 65                 label: "我的成绩",
 66                 backgroundColor: "rgba(243,112,33,0.2)",
 67                 pointBackgroundColor: "rgba(255,62,62,1)",
 68                 hoverPointBackgroundColor: "#fff",
 69                 pointHighlightStroke: "rgba(151,187,205,1)",
 70                 data: [122, 120, 128,190,90,92]
 71             },]
 72         },
 73         options: {
 74             legend: {
 75                 position: 'top',
 76             },
 77             title: {
 78                 display: true,
 79                 text: '高考成绩雷达图'
 80             },
 81             scale: {
 82                 reverse: false,
 83                 gridLines: {
 84                     color: ['black', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']
 85                 },
 86                 ticks: {
 87                     beginAtZero: true
 88                 }
 89             }
 90         }
 91     };
 92     // 实例化雷达图
 93     $(function () {
 94         window.myRadar = new Chart($("#canvas"), config);
 95     })
 96 
 97     // 随机数据
 98     $('#randomizeData').click(function() {
 99         $.each(config.data.datasets, function(i, dataset) {
100             dataset.data = dataset.data.map(function() {
101                 return randomScalingFactor();
102             });
103 
104         });
105 
106         window.myRadar.update();
107     });
108     // 添加学生数据
109     $('#addDataset').click(function() {
110         var newDataset = {
111             label: '学生 ' + config.data.datasets.length + " 成绩",
112             borderColor: randomColor(0.4),
113             backgroundColor: randomColor(0.5),
114             pointBorderColor: randomColor(0.7),
115             pointBackgroundColor: randomColor(0.5),
116             pointBorderWidth: 1,
117             data: [],
118         };
119 
120         for (var index = 0; index < config.data.labels.length; ++index) {
121             newDataset.data.push(randomScalingFactor());
122         }
123 
124         config.data.datasets.push(newDataset);
125         window.myRadar.update();
126     });
127     // 添加课程
128     $('#addData').click(function() {
129         if (config.data.datasets.length > 0) {
130             config.data.labels.push('科目 #' + config.data.labels.length);
131 
132             $.each(config.data.datasets, function (i, dataset) {
133                 dataset.data.push(randomScalingFactor());
134             });
135 
136             window.myRadar.update();
137         }
138     });
139     // 移除学生数据
140     $('#removeDataset').click(function() {
141         // 删除 splice(数据位置,数据个数)
142 //        config.data.datasets.splice(0, 1);
143         // pop() 最后一个元素出栈，删除并返回最后一个元素
144         config.data.datasets.pop();
145         window.myRadar.update();
146     });
147     // 移除课程数据
148     $('#removeData').click(function() {
149         config.data.labels.pop(); // remove the label first
150 
151         $.each(config.data.datasets, function(i, dataset) {
152             dataset.data.pop();
153         });
154 
155         window.myRadar.update();
156     });
157 
158 
159 </script>
160 </body>
161 
162 </html>

View Code