淘宝双十一超级红包 》
Chart.js 安装
Chart.js 提供了多种安装方式，适合不同的开发场景：
- NPM/Yarn - 适合使用构建工具的项目开发
- CDN - 适合快速原型开发和学习
- GitHub - 适合需要最新特性或参与贡献的开发
1. 通过 NPM/Yarn 安装
NPM (Node Package Manager) 是 JavaScript 的包管理工具，适合现代前端项目开发。
安装步骤
# 使用 npm 安装 npm install chart.js # 或者使用 yarn 安装 yarn add chart.js
在项目中引入
安装完成后，你可以在 JavaScript 文件中这样引入 Chart.js：
实例
// 引入整个 Chart.js 库
import Chart from 'chart.js/auto';
// 或者按需引入特定图表类型（减小打包体积）
import { Line } from 'chart.js';
import Chart from 'chart.js/auto';
// 或者按需引入特定图表类型（减小打包体积）
import { Line } from 'chart.js';
版本管理
要安装特定版本的 Chart.js，可以指定版本号：
npm install chart.js@3.9.1
2. 通过 CDN 使用
CDN (Content Delivery Network) 是通过网络直接加载库文件的方式，适合快速原型开发。
推荐 CDN 地址
<!-- 字节跳动 CDN（国内推荐） --> <script src="<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Chart.js/3.7.1/chart.min.js"></script>"></script> <!-- Staticfile CDN（国内备选） --> <script src="https://cdn.staticfile.net/Chart.js/3.9.1/chart.min.js"></script> <!-- cdnjs CDN（海外推荐） --> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
实例
<!DOCTYPE html>
<html>
<head>
<title>Chart.js CDN 示例</title>
<!-- 引入 Chart.js -->
<script src="<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Chart.js/3.7.1/chart.min.js"></script>"></script>
</head>
<body>
<div style="width: 600px; height: 400px;">
<canvas id="myChart"></canvas>
</div>
<script>
// 获取 canvas 元素
const ctx = document.getElementById('myChart').getContext('2d');
// 创建图表
const myChart = new Chart(ctx, {
type: 'bar', // 图表类型
data: {
labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
datasets: [{
label: '月度销售额',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'rgba(54, 162, 235, 0.5)'
}]
},
options: {
responsive: true, // 响应式设计
scales: {
y: {
beginAtZero: true // y轴从0开始
}
}
}
});
</script>
</body>
</html>
<html>
<head>
<title>Chart.js CDN 示例</title>
<!-- 引入 Chart.js -->
<script src="<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Chart.js/3.7.1/chart.min.js"></script>"></script>
</head>
<body>
<div style="width: 600px; height: 400px;">
<canvas id="myChart"></canvas>
</div>
<script>
// 获取 canvas 元素
const ctx = document.getElementById('myChart').getContext('2d');
// 创建图表
const myChart = new Chart(ctx, {
type: 'bar', // 图表类型
data: {
labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
datasets: [{
label: '月度销售额',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'rgba(54, 162, 235, 0.5)'
}]
},
options: {
responsive: true, // 响应式设计
scales: {
y: {
beginAtZero: true // y轴从0开始
}
}
}
});
</script>
</body>
</html>
尝试一下 »
本系列会采用国内的 CDN 地址来测试，如下实例：
实例
<script src="https://cdn.staticfile.net/Chart.js/3.9.1/chart.js"></script>
<script>
const myChart = new Chart(ctx, {...});
</script>
<script>
const myChart = new Chart(ctx, {...});
</script>
3. 从 GitHub 获取
GitHub 是开源项目的托管平台，适合需要最新特性或参与项目贡献的开发者。
获取方式
克隆仓库（需要 Git）：
git clone https://github.com/chartjs/Chart.js.git
下载 ZIP 文件
- 访问 Chart.js GitHub
- 点击 "Code" 按钮
- 选择 "Download ZIP"
构建项目
下载后，你可以构建自己的 Chart.js 版本：
cd Chart.js npm install npm run build
构建完成后，可以在 dist/ 目录找到生成的文件。
安装方式对比
| 方式 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| NPM/Yarn | 版本管理方便，适合现代前端项目 | 需要构建工具 | 正式项目开发 |
| CDN | 简单快捷，无需构建 | 依赖网络，版本更新不及时 | 快速原型、学习 |
| GitHub | 获取最新代码，可自定义 | 需要手动构建 | 高级开发、贡献代码 |