Chart.js 教程

Chart.js 是一个基于 HTML5 <canvas> 的开源 JavaScript 图表库，它提供了多种图表类型，易于使用，并且支持动画和交互效果。

1. Chart.js 安装

1.1 通过 CDN 引入

最简单的方法是使用 CDN 直接引入 Chart.js：

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

1.2 使用 npm 安装

如果你使用的是 Node.js，可以通过 npm 安装：

npm install chart.js

在 JavaScript 文件中导入：

import Chart from 'chart.js/auto';

2. 创建第一个图表

Chart.js 主要通过 Chart 构造函数来创建图表。

2.1 添加 Canvas

首先，在 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: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

3. 支持的图表类型

Chart.js 支持以下几种主要的图表类型：

  • 柱状图（bar）
  • 折线图（line）
  • 饼图（pie）
  • 雷达图（radar）
  • 气泡图（bubble）
  • 散点图（scatter）
  • 极区图（polarArea）
  • 混合图表（组合多个图表）

3.1 折线图

const lineChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April', '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. 配置选项（Options）

Chart.js 提供了许多自定义选项，例如：

  • responsive: true（自适应大小）
  • maintainAspectRatio: false（保持宽高比）
  • scales（坐标轴）
  • animations（动画效果）

示例：

options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
        y: {
            beginAtZero: true
        }
    },
    plugins: {
        legend: {
            position: 'top'
        }
    }
}

5. 更新和销毁图表

5.1 更新数据

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

5.2 销毁图表

myChart.destroy();

6. 结论

Chart.js 是一个强大的前端数据可视化库，支持多种图表类型，并且易于集成和自定义。你可以使用它来创建动态、交互式的数据可视化图表，提高 Web 应用的用户体验。

你想尝试某种特定的图表吗？ 😃