安装与引入

在开始使用 Chart.js 之前，首先需要将库引入到你的项目中。根据不同的开发环境，主要有两种常用的方式：

通过 CDN 引入

这是最快速的方式，只需在 HTML 页面中添加以下 <script> 标签，即可使用最新稳定版的 Chart.js，无需额外安装：

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

通过 CDN 引入适合快速演示和小型项目，但在生产环境中推荐使用模块化方式管理依赖。

通过 npm 安装

对于使用现代前端构建工具（如 Vite、Webpack、Rollup 等）的项目，可以通过 npm 或 yarn 安装：

npm install chart.js
# 或者
yarn add chart.js

安装完成后，在你的 JavaScript 文件中导入 Chart.js：

import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

这种方式能更好地支持按需引入，减少包体积。

代码演示

loading