# 安装与引入

URL: https://caijiao.org/chartjs/01-intro/02-installation
Source: docs/chartjs/01-intro/02-installation.md
Description: 介绍如何在项目中安装和引入 Chart.js，包括通过 CDN 快速使用和通过 npm 安装到前端构建环境的多种方式，帮助快速搭建图表开发环境。

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

## 通过 CDN 引入

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

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

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

## 通过 npm 安装

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

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

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

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

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

## 代码演示

[在线代码演示](/chartjs/demos/2.html)