Chart.js

網路上有很多圖表套件，Chart.js 算是我比較喜歡的，他確實沒有非常複雜厲害的功能，但開發網站通常也只需要基本統計圖表，Chart.js 可以滿足大部分需求。

一、安裝

1. npm

先透過 npm 安裝

npm install chart.js

然後在 JavaScript 中載入

import Chart from 'chart.js/auto';

2. CDN

直接在 HTML 引入

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.5.0/chart.min.js"></script>

二、使用

根據官方範例畫一個簡易長條圖。

1. HTML

<div>
    <canvas id="myChart"></canvas>
</div>

2. JavaScript

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctx = document.getElementById('myChart');

    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: [
                '1月', 
                '2月', 
                '3月', 
                '4月', 
                '5月', 
                '6月', 
                '7月', 
                '8月', 
                '9月', 
                '十月', 
                '11月', 
                '12月'
            ],
            datasets: [{
                label: '銷售額 (萬元)',
                data: [7, 19, 3, 5, 2, 3, 6, 13, 3, 5, 2, 3],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>

參考文件

• Chart.js