1、安装
根据需求自行下载需要的版本及文件即可
2、使用
首先，需要在页面中有一个画布：
<canvas id="myChart"></canvas>
在页面中包含Chart.js，引用前需要引入jquery
1 <link rel="stylesheet" href="{% static 'version/css/bootstrap.min.css' %}"> 2 3 <script src="{% static 'version/js/jquery-3.4.1.min.js' %}"></script> 4 <script src="{% static 'version/js/chart.min.js' %}"></script>
3、绘制
1 <canvas id="myChart" width="400" height="400"></canvas><!--对canvas设置宽高不起作用，可以使用div进行设置宽高<div style="800px; height: 500px;"><canvas id="myChart"></canvas></div>--> 2 <script> 3 var ctx = document.getElementById('myChart').getContext('2d'); 4 var myChart = new Chart(ctx, { 5 type: 'bar',//'horizontalBar','line','pie','doughnut'...想要创建的图形样式 6 data: { 7 labels: ['一月', '二月', '三月', '四月', '五月', '六月'], 8 datasets: [{ 9 label: '# of Votes',// 10 data: [12, 19, 3, 5, 2, 3],//数值 11 backgroundColor:'skyBlue',//统一设置颜色，也可以像下面那样分别设置颜色，borderColor同理 12 /*backgroundColor: [ 13 'rgba(255, 99, 132, 0.2)', 14 'rgba(54, 162, 235, 0.2)', 15 'rgba(255, 206, 86, 0.2)', 16 'rgba(75, 192, 192, 0.2)', 17 'rgba(153, 102, 255, 0.2)', 18 'rgba(255, 159, 64, 0.2)' 19 ],*/ 20 borderColor: [ 21 'rgba(255, 99, 132, 1)', 22 'rgba(54, 162, 235, 1)', 23 'rgba(255, 206, 86, 1)', 24 'rgba(75, 192, 192, 1)', 25 'rgba(153, 102, 255, 1)', 26 'rgba(255, 159, 64, 1)' 27 ], 28 borderWidth: 1//表框宽度 29 }] 30 }, 31 options: { 32 scales: { 33 yAxes: [{ 34 ticks: { 35 beginAtZero: true//纵轴从0开始 36 } 37 }] 38 } 39 } 40 }); 41 </script>
4、参数
加标题
1 options: { 2 title: { 3 display: true, 4 text: 'Custom Chart Title' 5 } 6 }
纵坐标最小值、最大值、步长设置
1 options = { 2 scale: { 3 angleLines: { 4 display: false 5 }, 6 ticks: { 7 suggestedMin: 50,//还可以设置min,max，stepSize 8 suggestedMax: 100, 9 } 10 } 11 };
自定义刻度线格式
1 var chart = new Chart(ctx, { 2 type: 'line', 3 data: data, 4 options: { 5 scales: { 6 yAxes: [{ 7 ticks: { 8 // Include a dollar sign in the ticks 9 callback: function(value, index, values) { 10 return '$' + value; 11 } 12 } 13 }] 14 } 15 } 16 });
5、混合图表类型
1 var mixedChart = new Chart(ctx, { 2 type: 'bar',//总体设置成条形图 3 data: { 4 datasets: [{ 5 label: 'Bar Dataset', 6 data: [10, 20, 30, 40] 7 }, { 8 label: 'Line Dataset', 9 data: [50, 50, 50, 50], 10 11 // Changes this dataset to become a line 12 type: 'line'//设置为线形图 13 }], 14 labels: ['January', 'February', 'March', 'April'] 15 }, 16 //options: options 17 });
6、多轴
1 <html> 2 <head> 3 <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> 4 </head> 5 <body> 6 7 <div style="800px; height: 500px;"> 8 <canvas id="myChart"></canvas> 9 </div> 10 </body> 11 12 <script> 13 var ctx = document.getElementById('myChart').getContext('2d'); 14 var myChart = new Chart(ctx, { 15 type: 'line', 16 data: { 17 datasets: [{ 18 data: [20, 50, 100, 75, 25, 0], 19 label: 'Left dataset', 20 21 // This binds the dataset to the left y axis 22 yAxisID: 'left-y-axis' 23 }, { 24 data: [0.1, 0.5, 1.0, 2.0, 1.5, 0], 25 label: 'Right dataset', 26 27 // This binds the dataset to the right y axis 28 yAxisID: 'right-y-axis' 29 }], 30 labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] 31 }, 32 options: { 33 scales: { 34 yAxes: [{ 35 id: 'left-y-axis', 36 type: 'linear', 37 position: 'left' 38 }, { 39 id: 'right-y-axis', 40 type: 'linear', 41 position: 'right' 42 }] 43 } 44 } 45 }); 46 47 </script> 48 </html>
图例：
