輕巧實用的圖表套件Chart.js

Chart.js是一款輕巧但又包含了豐富內容的圖表套件，它可以幫助我們快速的製作出各種美觀的圖表，種類包含了折線圖(Line Chart)、圓餅圖(Pie Chart)、甜甜圈圖(Doughnut Chart)、雷達圖(Radar Chart)等多種圖形，並且每種圖形都提供了高度的客製化功能，滿足各種不同需求，在這裡介紹快速上手的方法，若想知道更多關於Chart.js可以做到的事情可以看看他們的官方文件

安裝

npm

1
npm install chart.js

CDN

1
<script src="https://cdnjs.com/libraries/Chart.js"></script>

引入方式

Script標籤

1
2
3
4
<script src="path/to/chartjs/dist/chart.js"></script>
<script>
    const myChart = new Chart(ctx, {...});
</script>

Webpack

1
2
3
4
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

const myChart = new Chart(ctx, {...});

使用

先在html中建立畫布

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

取得畫布元素

1
const ctx = document.getElementById('myChart');

建立圖表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
const data = {
  labels: [
    'Red',
    'Blue',
    'Yellow'
  ], // labels 為圖例的內容
  datasets: [{
    label: 'My First Dataset',
    data: [300, 50, 100],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)'
    ],
    hoverOffset: 4
  }]
};
const myChart = new Chart(ctx, {
    type: 'pie', // 圖表種類
    data,
    options: {
      plugins: {
        legend: {
          // legend 為圖例的設定
          position: 'bottom',
          labels: {
            color: '#F8EBCF',
            padding: 20,
            boxHeight: 24,
            font: {
              size: 16,
            },
          },
          maxWidth: 400,
        },
      },
    },
});

更新圖表

1
2
myChart.data.datasets[0].data[2] = 50; // 先修改資料
myChart.update(); // 再調用更新

調整畫布尺寸

1
2
myChart.resize(); // 根據父元素尺寸
myChart.resize(width, height); // 自訂尺寸

銷毀圖表

1
myChart.destroy();