Chart.js 快速上手教程：10 分钟安装并画出你的第一张 Canvas 图表-平芜编程栈

Chart.js 快速上手教程：10 分钟安装并画出你的第一张 Canvas 图表

【免费下载链接】Chart.jsSimple HTML5 Charts using the项目地址: https://gitcode.com/gh_mirrors/ch/Chart.js

Chart.js 是一款轻量、零依赖的 HTML5 图表库，它使用<canvas>标签在前端页面中绘制柱状图、折线图、饼图等 8 种常用图表。本教程带你快速完成 Chart.js 安装，只需 10 分钟，你就能在自己的网页上画出第一张带图例、网格、悬浮提示的 Canvas 图表——不需要任何图表引擎经验，也不需要后端支持。

为什么选择 Chart.js？

在动手之前，先看看 Chart.js 的"卖点"，帮你判断它是否适合你的项目：

特性	说明
🎯 轻量零依赖	核心包仅依赖 Canvas API，不捆绑任何其他库
📊 8 种图表类型	柱状图、折线图、散点图、气泡图、饼图、环形图、雷达图、极坐标图
🎨 高度可定制	颜色、动画、图例、坐标轴刻度全部可通过`options`配置
📦 支持 Tree-shaking	按需注册组件，生产环境可显著减小打包体积
✨ 开箱即用	默认自带响应式布局、入场动画和悬浮 Tooltip

Chart.js 的核心入口定义在 src/index.ts，所有图表类型分别由独立的控制器实现，例如柱状图控制器 src/controllers/controller.bar.js。

Chart.js 安装：3 种方式任选其一

Chart.js 支持三种常见的引入方式，按需选择即可，详细步骤见官方文档 docs/getting-started/installation.md。

方式一：npm 安装（推荐用于构建工具项目）

如果你使用 Webpack、Rollup、Vite、Parcel 等打包工具，直接运行：

npm install chart.js

之后在代码中以 ES Module 方式引入：

import Chart from 'chart.js/auto'; // 自动注册全部组件，开发最省事

方式二：Script 标签直接引入（零构建，最快上手）

如果只是想快速搭一个演示页面，可以下载 Chart.js 构建产物，用<script>标签引用本地文件：

<script src="path/to/chartjs/dist/chart.umd.min.js"></script>

UMD 构建会暴露全局Chart对象，无需任何打包配置，打开页面就能用。

方式三：克隆源码仓库（适合深度定制）

如果你希望阅读源码、修改行为或参与开发，可以克隆仓库（仓库为只读镜像，请勿直接提交修改）：

git clone https://gitcode.com/gh_mirrors/ch/Chart.js

⚠️ 提示：源码仓库不包含预构建的dist文件，生产环境更建议使用 npm 或 UMD 构建产物。

画出你的第一张 Canvas 图表：完整最小示例

安装完成后，在 HTML 页面中加入一个canvas元素和一段初始化代码。以下是官方文档 docs/getting-started/index.md 中的经典最小示例——一个柱状图只需要不到 30 行代码：

<div> <canvas id="myChart"></canvas> </div> <script> const ctx = document.getElementById('myChart'); new Chart(ctx, { type: 'bar', // 图表类型：bar 柱状图 data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true } // Y 轴从 0 开始 } } }); </script>

运行后你会得到一张完整的 Chart.js Canvas 柱状图，包含图例、网格线和坐标轴刻度：

💡 小技巧：建议像上面那样把<canvas>包在一个容器div中。Chart.js 默认是响应式的，图表会自动填满外层容器，容器尺寸即图表尺寸。

读懂这段代码的 4 个核心概念

概念	代码位置	作用
画布	`canvas#myChart`	Chart.js 的绘制载体，所有图表都渲染在 canvas 上
type	`'bar'`	指定图表类型，可换成`'line'`、`'doughnut'`、`'radar'`等
data	`labels`+`datasets`	`labels`是 X 轴标签，`datasets`是一个数组，每个数据集包含`label`和`data`数据点
options	`scales.y.beginAtZero`	配置项入口，控制坐标轴、插件、动画等一切外观

进阶：从"能画"到"好看"的 3 个技巧

跑通第一个图只是开始，下面 3 个技巧能让你快速做出"产品级"图表。完整分步实践可参考官方指南 docs/getting-started/usage.md。

1. 利用默认能力：图例、网格与动画免费送你

如上示例所示，Chart.js 的柱状图默认就带上了图例、网格线和入场动画，鼠标悬停还会出现 Tooltip 提示。带图例、网格和完整坐标轴的完整效果如下：

注意：点击图例可以切换数据集的显示/隐藏，多数据集场景下非常实用。

2. 用 options 做精细定制

所有定制都通过options完成。例如关闭动画、隐藏图例：

options: { animation: false, // 关闭入场动画 plugins: { legend: { display: false }, // 隐藏图例 tooltip: { enabled: false } // 关闭悬浮提示 } }

接入真实数据后，柱状图可以轻松承载上万个数据点而不卡顿：

3. 多数据集与多图表类型自由组合

Chart.js 支持在同一张图中绘制多个数据集，每个数据集可独立设置标签、颜色与样式。下图是官方示例中把数据拆分为 3 个数据集后的气泡图，不同类别一目了然：

除柱状图外，气泡图、折线图、饼图等类型只需修改type字段即可切换。配合坐标轴刻度格式化（如把数值显示为"米"），效果如下：

各类型图表的完整配置项可在官方文档中查阅：柱状图 docs/charts/bar.md、折线图 docs/charts/line.md、环形图 docs/charts/doughnut.md。

生产环境建议：按需注册组件减小打包体积

开发阶段用chart.js/auto图省事，但生产环境建议按需引入，让打包工具做 Tree-shaking 优化。以柱状图为例，只需注册控制器、柱形元素和两个坐标轴：

import { Chart, BarController, BarElement, CategoryScale, LinearScale } from 'chart.js'; Chart.register(BarController, BarElement, CategoryScale, LinearScale);

这样可以从 bundle 中移除未使用的图表类型代码。每种图表的"最小注册清单"详见 docs/getting-started/integration.md。