Chart.js绘制图形

1、安装

在GitHub上下载Chart.js的最新版本

根据需求自行下载需要的版本及文件即可

 

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="width: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="width: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>

 图例：

 

 

 

 

 

 

更多  https://www.chartjs.org/

posted @ 2020-07-22 11:08  yanerfree  阅读(420)  评论(0)  编辑  收藏  举报