Chart.js 使用教程

Chart.js 是一个基于 HTML5 <canvas> 的轻量级 JavaScript 图表库，可以用于创建交互式的数据可视化图表。以下是 Chart.js 的基本使用方法，包括如何创建柱状图、折线图、饼图等。

1. 安装 Chart.js

1.1 通过 CDN 引入（推荐）

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

1.2 使用 npm 安装

npm install chart.js

在 JavaScript 文件中导入：

import Chart from 'chart.js/auto';

2. 创建基本图表

2.1 在 HTML 中添加 Canvas

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

2.2 在 JavaScript 中创建图表

const ctx = document.getElementById('myChart').getContext('2d');

const myChart = new Chart(ctx, {
    type: 'bar', // 图表类型（柱状图）
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: 'Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

3. Chart.js 支持的图表类型

Chart.js 支持多种图表类型，可以通过 type 指定：

图表类型type 值
柱状图'bar'
折线图'line'
饼图'pie'
环形图'doughnut'
雷达图'radar'
极区图'polarArea'
气泡图'bubble'
散点图'scatter'

3.1 折线图

const lineChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
        datasets: [{
            label: 'Sales',
            data: [10, 25, 15, 30, 20],
            borderColor: 'blue',
            backgroundColor: 'rgba(0, 0, 255, 0.2)',
            fill: true
        }]
    }
});

3.2 饼图

const pieChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [{
            data: [300, 50, 100],
            backgroundColor: ['red', 'blue', 'yellow']
        }]
    }
});

4. Chart.js 配置选项

你可以使用 options 来自定义图表的外观和行为。例如：

options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
        y: {
            beginAtZero: true
        }
    },
    plugins: {
        legend: {
            position: 'top' // 位置：'top', 'left', 'right', 'bottom'
        }
    }
}

5. 更新和销毁图表

5.1 更新数据

myChart.data.datasets[0].data = [5, 10, 15, 20, 25, 30];
myChart.update();

5.2 销毁图表

myChart.destroy();

6. 交互效果

Chart.js 允许你监听事件，例如 onclick：

document.getElementById('myChart').onclick = function(evt) {
    const activePoints = myChart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);
    if (activePoints.length > 0) {
        const datasetIndex = activePoints[0].datasetIndex;
        const index = activePoints[0].index;
        alert(`你点击了 ${myChart.data.labels[index]}！`);
    }
};

7. 结论

Chart.js 是一个强大且易于使用的前端数据可视化工具，支持多种图表类型，并提供丰富的自定义选项。你可以将其用于各种场景，如数据分析、仪表盘、报表等。

你希望尝试哪种图表呢？😃