Chart.js 安装指南

Chart.js 是一个轻量级、简单易用的 JavaScript 图表库，适用于创建响应式数据可视化图表。下面介绍几种安装和引入方式。

1. 通过 CDN 引入（推荐）

最简单的方法是使用 CDN 直接加载 Chart.js，无需额外安装。

1.1 在 HTML 文件中引入

在 <head> 或 <body> 末尾添加以下代码：

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

然后，你就可以在 JavaScript 中使用 Chart 进行图表绘制。

2. 使用 npm 安装

如果你正在使用 Node.js 或现代前端框架（如 React、Vue、Angular），可以使用 npm 安装 Chart.js。

2.1 运行以下命令安装

npm install chart.js

2.2 在 JavaScript 文件中导入

import Chart from 'chart.js/auto';

如果使用的是 ES5 语法：

const Chart = require('chart.js');

3. 使用 yarn 安装

如果你使用 yarn 作为包管理工具，可以运行：

yarn add chart.js

然后在 JavaScript 文件中导入：

import Chart from 'chart.js/auto';

4. 使用 <script> 本地引入

你也可以手动下载 Chart.js 并在本地使用：

  1. 前往 Chart.js 官方 GitHub 仓库 或 官方网站 下载 Chart.js 文件。
  2. 将 chart.min.js 放入你的项目目录，例如 js 目录。
  3. 在 HTML 文件中引入： <script src="js/chart.min.js"></script>

5. 验证安装

无论你选择哪种安装方式，你都可以在 JavaScript 控制台输入：

console.log(Chart);

如果安装成功，它应该会返回一个 Chart 对象。

6. 创建第一个 Chart.js 图表

确认安装成功后，你可以创建一个简单的柱状图：

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

<script>
  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
              }
          }
      }
  });
</script>

总结

方式适用场景
CDN 引入最简单，适用于普通 HTML 页面
npm 安装适用于 Node.js 和前端框架（React/Vue/Angular）
yarn 安装适用于 yarn 作为包管理器的项目
手动下载适用于无包管理的本地项目

安装完成后，你就可以使用 Chart.js 创建各种数据可视化图表了！😃

你需要关于某种特定图表类型的示例吗？