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>