Chart.js 一套基于 HTML5 的简单、干净并且有吸引力的图表库

sinma

一套基于 HTML5 的简单、干净并且有吸引力的 JavaScript 图表库
安装：

1. npm install chart.js

复制代码

基本用法：

1. <canvas id="myChart" width="400" height="400"></canvas>
   
2. 
   
3. import Chart from 'chart.js/auto'
   
4. 
   
5. // 页面渲染完成后执行
   
6. const ctx = document.getElementById('myChart')
   
7. const myChart = new Chart(ctx, {
   
8.   type: 'bar',
   
9.   data: {
   
10.     labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    
11.     datasets: [
    
12.       {
    
13.         label: '# of Votes',
    
14.         data: [12, 19, 3, 5, 2, 3],
    
15.         backgroundColor: [
    
16.           'rgba(255, 99, 132, 0.2)',
    
17.           'rgba(54, 162, 235, 0.2)',
    
18.           'rgba(255, 206, 86, 0.2)',
    
19.           'rgba(75, 192, 192, 0.2)',
    
20.           'rgba(153, 102, 255, 0.2)',
    
21.           'rgba(255, 159, 64, 0.2)'
    
22.         ],
    
23.         borderColor: [
    
24.           'rgba(255, 99, 132, 1)',
    
25.           'rgba(54, 162, 235, 1)',
    
26.           'rgba(255, 206, 86, 1)',
    
27.           'rgba(75, 192, 192, 1)',
    
28.           'rgba(153, 102, 255, 1)',
    
29.           'rgba(255, 159, 64, 1)'
    
30.         ],
    
31.         borderWidth: 1
    
32.       }
    
33.     ]
    
34.   },
    
35.   options: {
    
36.     scales: {
    
37.       y: {
    
38.         beginAtZero: true
    
39.       }
    
40.     }
    
41.   }
    
42. })

复制代码