Chart.js

简单、灵活、面向设计师和开发者的 HTML5 Canvas 图表库，以极低的配置成本生成美观的响应式图表。

精选工具可视化图表CanvasHTML5

Chart.js 是基于 HTML5 Canvas 的开源 JavaScript 图表库，以简单优雅著称，通过声明式配置即可生成柱状图、折线图、饼图等常见图表，支持 Retina 高清屏自动缩放，npm 周下载量数百万。

Chart.js

简单、灵活、面向设计师和开发者的 HTML5 Canvas 图表库，以极低的配置成本生成美观的响应式图表。

技术简介说明

Chart.js 是一个基于 HTML5 Canvas 技术的开源 JavaScript 图表库，由 Nick Downie 于 2013 年创建，目前由社区团队维护。它的核心设计理念是"简单而不失优雅"——通过声明式的配置对象（configuration object），开发者无需深入理解 Canvas API 或复杂的可视化理论，即可在几分钟内生成专业级的柱状图、折线图、饼图、雷达图、极地图、气泡图和散点图等常见图表类型。

Chart.js 的核心优势在于其极低的入门门槛和优秀的默认外观。它采用 Canvas 渲染而非 SVG，这使得它在处理中等规模数据集时性能优秀，并且图表天然支持高清屏（Retina display）自动缩放。Chart.js 的 API 设计以配置驱动为核心——几乎每一个视觉细节（颜色、字体、动画、交互、布局）都可以通过 JSON 风格的配置对象调整，而不需要直接操作 DOM 或 Canvas 上下文。

经过十余年的发展，Chart.js 已演进到 v4.x 版本，引入了 ESM 模块化、Tree-shaking 支持、性能优化、插件架构完善等重要改进。它是目前 npm 上周下载量最高的 JavaScript 图表库之一（~240 万至 1,000 万次，因统计口径而异），GitHub Stars 约 67,000+，被全球数百万网站使用，包括企业后台、SaaS 产品、数据看板和个人项目。

基本信息

官网：https://www.chartjs.org/
GitHub：https://github.com/chartjs/Chart.js
License：MIT
最新版本：v4.5.1（2025 年 10 月 13 日发布）
主要维护者/公司：Chart.js 社区团队（原 Nick Downie 创建，现由 Evert Timberg 等核心贡献者维护）
GitHub Stars：~67,400+（2025 年末数据）
npm 周下载量：~240 万至 1,000 万（因统计时间和口径不同）
Bundle 大小：~65KB gzipped（完整包）；v4 支持 Tree-shaking，按需导入可更小

快速上手

安装

# 使用 npm 安装
npm install chart.js
 
# 或使用 yarn
yarn add chart.js
 
# 或使用 pnpm
pnpm add chart.js
 
# CDN 方式（UMD 全局变量）
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
 
# CDN 方式（ESM Auto-registration 包，包含自动注册所有组件）
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
 
# 辅助库（按需安装）
npm install @kurkle/color          # 颜色工具（Chart.js 内部依赖）
npm install chart.js-date-adapter  # 时间轴日期适配器
npm install chartjs-adapter-date-fns  # date-fns 适配器
npm install chartjs-adapter-luxon     # luxon 适配器
npm install chartjs-adapter-moment    # moment 适配器

基础配置

Chart.js v4 采用模块化架构，所有组件需要显式注册后才能使用：

// 方式一：自动导入并注册所有组件（快速上手）
import Chart from 'chart.js/auto'
 
// 方式二：按需注册组件（推荐，减小 bundle 体积）
import {
  Chart,
  CategoryScale,
  LinearScale,
  BarController,
  BarElement,
  Title,
  Tooltip,
  Legend
} from 'chart.js'
 
Chart.register(
  CategoryScale,
  LinearScale,
  BarController,
  BarElement,
  Title,
  Tooltip,
  Legend
)

最小示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Chart.js 最小示例</title>
</head>
<body>
  <canvas id="myChart" width="400" height="200"></canvas>
  <script type="module">
    import Chart from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'
 
    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(255, 99, 132, 0.6)',
            'rgba(54, 162, 235, 0.6)',
            'rgba(255, 206, 86, 0.6)',
            'rgba(75, 192, 192, 0.6)',
            'rgba(153, 102, 255, 0.6)',
            'rgba(255, 159, 64, 0.6)'
          ],
          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: {
        responsive: true,
        plugins: {
          legend: { position: 'top' },
          title: {
            display: true,
            text: '2026 年上半年销售数据'
          }
        }
      }
    })
  </script>
</body>
</html>

核心概念与架构

三层架构

Chart.js 采用清晰的三层架构设计：

┌─────────────────────────────────────────────┐
│  图表实例（Chart Instance）                  │
│  - 接收 canvas 上下文 + 配置对象             │
│  - 管理生命周期、交互、动画、更新             │
├─────────────────────────────────────────────┤
│  控制器（Controller）                        │
│  - BarController / LineController / ...      │
│  - 协调数据、比例尺、元素的布局和渲染         │
│  - 每种图表类型对应一个控制器                 │
├─────────────────────────────────────────────┤
│  元素（Elements）                            │
│  - BarElement / PointElement / ArcElement    │
│  - LineElement                               │
│  - 负责单个视觉元素的绘制与命中检测           │
├─────────────────────────────────────────────┤
│  比例尺（Scales）                            │
│  - CategoryScale / LinearScale / LogarithmicScale │
│  - TimeScale / RadialLinearScale             │
│  - 负责数据到像素坐标的映射                   │
├─────────────────────────────────────────────┤
│  插件系统（Plugin API）                      │
│  - 全局插件 / 图表实例级插件                  │
│  - 生命周期钩子拦截渲染各阶段                 │
│  - Tooltip、Legend、Title 均以插件形式实现    │
└─────────────────────────────────────────────┘

核心工作原理

1. 配置驱动 Chart.js 的核心 API 是 new Chart(ctx, config)，配置对象包含三个主要部分：

{
  type: 'bar',           // 图表类型
  data: { ... },         // 数据定义（labels + datasets）
  options: { ... }       // 外观、布局、交互等所有配置
}

2. 数据与数据集分离 data.labels 定义 X 轴标签，data.datasets 定义数据序列。每个 dataset 可以有独立的类型、颜色、样式，支持混合图表（如柱状图和折线图共存）。

3. Canvas 渲染 所有图表通过 HTML5 <canvas> 渲染，不依赖 DOM 操作。这使得图表：

天然支持 Retina 高清屏（自动处理 devicePixelRatio）
渲染性能优于大量 SVG 元素
不支持单个数据点的 CSS 样式控制（与 SVG 图表的本质区别）

4. 插件生命周期 Chart.js 的渲染流程被拆分为多个生命周期钩子，插件可以在任意阶段介入：

beforeInit → afterInit → beforeUpdate → afterUpdate →
beforeLayout → afterLayout → beforeRender → afterRender →
beforeDraw → afterDraw → beforeEvent → afterEvent →
beforeDestroy → afterDestroy

核心特性

8 种内置图表类型：bar（柱状图）、line（折线图）、pie（饼图）、doughnut（环形图）、radar（雷达图）、polarArea（极地图）、bubble（气泡图）、scatter（散点图），覆盖绝大多数常见业务可视化需求
Canvas 高性能渲染：基于 HTML5 Canvas，自动支持 Retina 高清屏，渲染性能优于同数据量的 SVG 方案
响应式设计：内置 responsive: true，图表自动适应容器尺寸变化，支持 maintainAspectRatio 控制比例
丰富的动画系统：数据更新时自带平滑过渡动画，可自定义动画时长、缓动函数，也可禁用动画
强大的插件架构：Tooltip、Legend、Title 等均以插件形式实现，开发者可编写自定义插件扩展任意功能
时间序列轴支持：通过 date adapter（date-fns / luxon / moment）支持时间序列数据的智能刻度与格式化
混合图表类型：单个图表中可混合使用柱状图、折线图等不同类型，共享坐标轴
交互式交互：内置 hover、click 事件，支持多数据集联动、跨图表交互、自定义 tooltip
可访问性支持：v4 增强了对屏幕阅读器的支持，可通过 ARIA 属性和插件增强可访问性
Tree-shaking 支持：v4 采用 ESM 模块化，可按需导入图表类型、比例尺、元素、插件，减小 bundle 体积

生态图

官方与核心依赖

Chart.js 核心库零外部依赖（v4 内部使用 @kurkle/color 处理颜色），但时间轴需要适配器：

适配器	日期库	说明
`chartjs-adapter-date-fns`	date-fns	轻量、Tree-shakable，推荐
`chartjs-adapter-luxon`	luxon	功能丰富，支持时区和国际化
`chartjs-adapter-moment`	moment.js	传统选择，体积较大

核心插件生态

Chart.js 的插件生态是其最大的优势之一，社区贡献了大量高质量插件：

官方维护插件（chartjs org）：

插件	功能	安装
chartjs-plugin-annotation	在图表上添加线、框、文本注释	`npm i chartjs-plugin-annotation`
chartjs-plugin-datalabels	在数据点旁显示数值标签	`npm i chartjs-plugin-datalabels`
chartjs-plugin-zoom	鼠标滚轮/触摸缩放与拖拽平移	`npm i chartjs-plugin-zoom`（依赖 hammer.js）
chartjs-plugin-deferred	延迟渲染直到图表进入视口	`npm i chartjs-plugin-deferred`

社区热门插件：

插件	功能	说明
`chartjs-chart-boxplot`	箱线图/小提琴图	统计分析场景
`chartjs-chart-treemap`	Treemap 矩形树图	层次数据展示
`chartjs-chart-sankey`	桑基图	流程/转化分析
`chartjs-chart-wordcloud`	词云图	文本分析
`chartjs-chart-graph`	网络图/关系图	节点-链接可视化
`chartjs-plugin-streaming`	实时流数据	实时更新场景
`chartjs-plugin-stacked100`	百分比堆叠图	占比分析
`chartjs-plugin-border`	数据点边框	视觉增强

框架集成

Chart.js 在各主流框架中均有官方或社区维护的封装库：

框架	封装库	说明
React	`react-chartjs-2`	官方推荐，类型安全，hooks 友好
Vue 3	`vue-chartjs`	社区维护，响应式数据支持
Angular	`ng2-charts`	官方维护（valor-software）
Svelte	`svelte-chartjs`	社区维护
Web Components	原生支持	Chart.js 可直接在自定义元素中使用

服务端渲染

ChartjsNodeCanvas：在 Node.js 中使用 canvas 包渲染 Chart.js 图表为 PNG/SVG，适合服务端生成报表图片
QuickChart.io：在线服务，通过 URL 参数生成 Chart.js 图表图片，适合邮件、Markdown 等场景

适用场景

业务后台数据看板：Chart.js 的配置式 API 与后台框架（Ant Design、Element Plus）天然契合，快速构建 KPI 卡片、趋势图、占比图等后台常见图表
SaaS 产品数据展示：Bundle 体积小（~65KB gzipped）、无需额外依赖、默认样式美观，适合集成到 SaaS 产品的用户仪表板
数据报表与 PDF 导出：结合 ChartjsNodeCanvas 可在服务端生成 PNG/SVG 图表，嵌入 PDF 报表或邮件中
实时数据监控：通过 chartjs-plugin-streaming 或手动 chart.update() 支持实时数据推送场景，如服务器监控、股票行情等
营销落地页与数据故事：Chart.js 的轻量特性和响应式支持使其适合嵌入营销页面，展示产品数据和用户成果
教育与培训材料：Chart.js 的低学习曲线和美观默认样式，适合制作数据驱动的教学演示和培训材料
快速原型验证：产品经理和设计师可以快速用 Chart.js 制作数据可视化原型，验证图表类型和数据呈现方式

开发与工程化

开发流程

# 克隆 Chart.js 源码（用于开发或贡献）
git clone https://github.com/chartjs/Chart.js.git
cd Chart.js
 
# 安装依赖（Chart.js 使用 pnpm workspace）
pnpm install
 
# 启动开发服务器（含热重载的测试页面）
pnpm start
 
# 运行测试
pnpm test
 
# 构建
pnpm build
 
# 代码检查
pnpm lint

TypeScript 支持

Chart.js v3+ 内置完整的 TypeScript 类型声明：

import { Chart, ChartConfiguration } from 'chart.js'
 
const config: ChartConfiguration<'bar'> = {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{
      data: [1, 2, 3],
      backgroundColor: 'red'
    }]
  },
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: '标题'
      }
    }
  }
}
 
const chart = new Chart(ctx, config)

在 React 中使用

// 安装：npm install react-chartjs-2 chart.js
import { Bar } from 'react-chartjs-2'
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
} from 'chart.js'
 
ChartJS.register(
  CategoryScale, LinearScale, BarElement,
  Title, Tooltip, Legend
)
 
function App() {
  const data = {
    labels: ['一月', '二月', '三月'],
    datasets: [{
      label: '销售额',
      data: [12, 19, 3],
      backgroundColor: 'rgba(54, 162, 235, 0.5)'
    }]
  }
 
  return <Bar data={data} options={{ responsive: true }} />
}

自定义插件开发

const myPlugin = {
  id: 'myPlugin',
  beforeDraw(chart, args, options) {
    const { ctx, chartArea } = chart
    ctx.save()
    ctx.fillStyle = options.backgroundColor || 'transparent'
    ctx.fillRect(chartArea.left, chartArea.top, chartArea.width, chartArea.height)
    ctx.restore()
  }
}
 
// 全局注册
Chart.register(myPlugin)
 
// 或实例级注册
new Chart(ctx, {
  type: 'bar',
  data: { ... },
  plugins: [myPlugin]
})

构建与部署

Chart.js v4 是 ESM 模块，支持 Tree-shaking
提供 UMD 包（chart.umd.min.js）用于传统 <script> 引入
CDN：https://cdn.jsdelivr.net/npm/[email protected]
按需导入：import { Chart, BarController, BarElement } from 'chart.js'

CI/CD 集成

Chart.js 是纯客户端库，CI/CD 通常关注：

单元测试使用 chartjs-test-utils 和 Jasmine 框架
视觉回归测试使用 pixelmatch 进行 Canvas 截图对比
类型检查确保 API 兼容性

性能与安全

性能特点

Canvas 渲染：适合中小规模数据（100-10,000 个数据点），Canvas 绘制性能远优于同等数据量的 SVG
动画性能：Chart.js 使用 requestAnimationFrame 进行动画，但在大数据集时动画可能导致掉帧
内存占用：每个 Chart 实例维护一份 Canvas 上下文和数据副本，多图表页面积累内存
Tree-shaking：v4 按需导入可将 bundle 从 ~65KB 降至 ~20KB（仅 bar 图表）
渲染延迟：首次渲染通常在 10-50ms（取决于数据量），更新渲染通过 chart.update() 触发

优化建议

1. 禁用不必要的动画

new Chart(ctx, {
  type: 'line',
  data: { ... },
  options: {
    animation: false,           // 完全禁用动画
    // 或仅禁用首次渲染动画
    animation: { duration: 0 }
  }
})

2. 使用 chart.data.datasets[].data 的直接引用更新

// ❌ 不推荐：完整重建
chart.config.data = newData
chart.update()
 
// ✅ 推荐：直接修改数据引用
chart.data.datasets[0].data = newData
chart.update('none')  // 'none' 模式跳过动画

3. 控制数据点密度

// 超过 1000 点时考虑数据降采样
function downsample(data, maxPoints) {
  if (data.length <= maxPoints) return data
  const step = Math.ceil(data.length / maxPoints)
  return data.filter((_, i) => i % step === 0)
}

4. 多图表页面的内存管理

// 组件卸载时销毁图表实例
useEffect(() => {
  return () => {
    chart?.destroy()  // 释放 Canvas 上下文和内存
  }
}, [])

5. 使用 decimation 插件处理大数据

import { Decimation } from 'chart.js'
Chart.register(Decimation)
 
new Chart(ctx, {
  options: {
    plugins: {
      decimation: {
        enabled: true,
        algorithm: 'lttb',  // Largest Triangle Three Buckets
        samples: 500
      }
    }
  }
})

安全注意事项

XSS 风险：Chart.js 的 tooltip、label 等默认使用纯文本渲染，但如果使用 HTML tooltip 插件或自定义插件的 ctx.fillText() 渲染用户输入数据，需要转义防止 XSS
Canvas 注入：Chart.js 操作 Canvas 上下文，不直接操作 DOM，XSS 攻击面较小
CDN 完整性：使用 CDN 时应添加 SRI hash：<script src="..." integrity="sha384-..." crossorigin="anonymous">
依赖安全：定期运行 npm audit，关注 date adapter 等可选依赖的安全更新

已知性能瓶颈

> 10,000 数据点：Canvas 绘制开始掉帧，建议使用降采样或切换到 WebGL 方案
多图表页面：每个图表实例独立持有 Canvas 上下文，10+ 图表同时存在时内存压力明显
实时高频更新：每秒 30+ 次的 chart.update() 会导致主线程阻塞，需要节流（throttle）
复杂 tooltip：大量数据点的 tooltip 定位计算可能卡顿，建议使用 interaction.mode: 'nearest'
IE11 不支持：v4 明确不支持 IE11（使用 ES2020+ 语法），如需支持旧浏览器需使用 v2.x

技术对比

Chart.js vs D3.js vs ECharts vs Highcharts

对比维度	Chart.js	D3.js	Apache ECharts	Highcharts
定位	简单图表库	底层可视化引擎	商业级图表库	商业级图表库
License	MIT	ISC	Apache 2.0	商业付费（非商用免费）
学习曲线	低（配置式 API）	极高（命令式底层）	中（配置项多）	低（配置式 API）
Bundle 大小	~65KB gzipped	~90KB（按需可至 10KB）	~400KB gzipped	需付费获取
渲染方式	Canvas	SVG / Canvas / HTML	Canvas（SVG 可选）	SVG
内置图表类型	8 种	无（需手工构建）	20+ 种	40+ 种
灵活性	中（预设类型内可定制）	极高（任何可视化）	中高	中高
大数据支持	中（万级，需降采样）	高（Canvas 模式）	高（百万级）	中
3D 图表	不支持	需手工构建	有限支持	不支持
服务端渲染	ChartjsNodeCanvas	jsdom + Node	Node.js 环境	不支持
适合团队	前端开发	可视化专家	全栈开发	企业采购
GitHub Stars	~67,000	~113,000	~62,000	无开源仓库

Chart.js vs Apache ECharts

对比维度	Chart.js	Apache ECharts
入门难度	⭐ 极低	⭐⭐⭐ 中等
开箱即用图表	8 种	20+ 种
大数据集性能	万级数据点	百万级数据点
地图可视化	需配合插件	内置完整地图支持
中文文档	一般（社区翻译）	优秀（百度团队维护）
国内生态	一般	极好
Bundle 大小	小（~65KB）	大（~400KB，需按需引入）
移动端手势	基础支持	内置丰富手势

最佳实践

生产环境最佳实践

1. 按需注册组件

// ❌ 不推荐：全量导入
import Chart from 'chart.js/auto'
 
// ✅ 推荐：按需注册
import { Chart, CategoryScale, LinearScale, BarController, BarElement } from 'chart.js'
Chart.register(CategoryScale, LinearScale, BarController, BarElement)

2. 统一图表主题配置

// 全局默认配置，确保应用内图表风格一致
Chart.defaults.font.family = "'Inter', 'PingFang SC', sans-serif"
Chart.defaults.font.size = 12
Chart.defaults.color = '#6b7280'
Chart.defaults.plugins.legend.labels.usePointStyle = true
Chart.defaults.plugins.tooltip.backgroundColor = 'rgba(0, 0, 0, 0.8)'
Chart.defaults.plugins.tooltip.cornerRadius = 8
Chart.defaults.plugins.tooltip.padding = 12

3. 响应式与尺寸控制

new Chart(ctx, {
  options: {
    responsive: true,
    maintainAspectRatio: false,  // 允许自定义高度
    // 容器需设置明确的 height
  }
})

4. 性能优化：合理设置动画

new Chart(ctx, {
  options: {
    animation: {
      duration: 800,        // 常规动画 800ms
      easing: 'easeOutQuart'
    },
    // 数据更新时禁用动画（实时数据场景）
    // animations: {}  // 空对象禁用所有动画
  }
})

5. 可访问性增强

<canvas id="myChart" role="img" aria-label="2026年销售数据柱状图"></canvas>

// 使用 chartjs-plugin-a11y 增强可访问性
// 为每个数据点提供文本描述

常见陷阱

忘记注册组件：v4 的"按需注册"是新手最常踩的坑。忘记 Chart.register(...) 会报"BarElement is not a registered element"错误
Canvas 尺寸问题：Canvas 的 CSS 尺寸与实际像素尺寸不一致会导致模糊。确保设置 devicePixelRatio 或使用 responsive: true
日期轴未配置适配器：使用 type: 'time' 比例尺时必须安装并注册对应的 date adapter
多图表内存泄漏：SPA 中切换路由时未调用 chart.destroy()，导致 Canvas 上下文累积
数据更新不触发：直接修改 chart.data.datasets[0].data 后需要调用 chart.update() 才能触发重新渲染
混合图表类型错误：dataset 的 type 属性必须与已注册的控制器匹配
颜色透明度：backgroundColor 使用 rgba() 而非 rgb() 设置透明度；或使用 @kurkle/color 的 setAlpha()

技术局限与边界

已知限制

仅限预设图表类型：Chart.js 只提供 8 种内置图表（可通过插件扩展），无法创造 D3 级别的完全定制化可视化
Canvas 渲染的固有限制：Canvas 中的每个数据点不是独立 DOM 元素，无法通过 CSS 单独样式控制、无法直接绑定事件监听器
大数据集性能天花板：超过 ~10,000 数据点时渲染和动画性能下降明显，不适合实时高频大数据场景
不支持 3D 可视化：Chart.js 仅支持 2D 图表，无 3D 能力
服务端渲染需要额外工具：需要 canvas 包（Node.js native binding）或 ChartjsNodeCanvas，配置相对复杂
IE11 不支持：v3+ 使用 ES2020+ 语法，明确放弃 IE11 支持
地图能力弱：Chart.js 本身无地图可视化能力，需要第三方插件或配合其他库
动画自定义有限：虽然支持缓动函数和时长配置，但无法像 D3 那样精细控制每个属性的过渡

不适用场景

高度定制化的信息图或数据艺术 → D3.js
百万级数据点的实时可视化 → Apache ECharts 或 LightningChart
3D 可视化需求 → Three.js 或 deck.gl
复杂地图/地理可视化 → Mapbox、Leaflet、ECharts 地图
需要 SSR/SSG 友好的图表（如 Next.js App Router） → Recharts / Nivo
企业级需求（技术支持、SLA、高级图表类型）→ Highcharts

迁移注意事项

v3 → v4 迁移：主要是 ESM-only、Tree-shaking 配置、部分 API 调整。参考 v4 Migration Guide
v2 → v3 迁移：这是一次破坏性升级，配置结构大幅变化。参考 v3 Migration Guide
Chart.js → ECharts：主要差异在于 API 风格（配置式 vs 配置式但结构不同），数据和事件模型需要重新适配
Chart.js → D3.js：从"配置驱动"转向"命令式构建"，需要完全重写可视化逻辑

学习资源

官方文档：https://www.chartjs.org/docs/latest/（最权威的学习资源）
- 安装指南：https://www.chartjs.org/docs/latest/getting-started/installation.html
- 图表类型：https://www.chartjs.org/docs/latest/charts/
- 配置选项：https://www.chartjs.org/docs/latest/general/options.html
- 插件开发：https://www.chartjs.org/docs/latest/developers/plugins.html
- API 参考：https://www.chartjs.org/docs/latest/api/
GitHub 仓库：https://github.com/chartjs/Chart.js
- Releases：https://github.com/chartjs/Chart.js/releases
- Discussions：https://github.com/chartjs/Chart.js/discussions
- Awesome 资源列表：https://github.com/chartjs/awesome
中文资源：
- Chart.js 中文网：https://chart.nodejs.cn/
- BootCDN 镜像：https://www.bootcdn.cn/Chart.js/
教程：
- Chart.js 官方示例：https://www.chartjs.org/docs/latest/samples/
- YouTube 教程（Chart.js 官方频道）
- FreeCodeCamp Chart.js 课程
社区：
- Stack Overflow：[chartjs] 标签
- GitHub Issues：https://github.com/chartjs/Chart.js/issues
- Slack 频道：Chart.js 社区 Slack

2026 年现状

版本与活跃度

最新稳定版：v4.5.1（2025 年 10 月 13 日发布）
活跃开发线：v4.5.x（特性更新）+ v4.4.x（维护修复）
GitHub Stars：~67,400+（2025 年末），稳定增长中
v5.0.0 Milestone：已在 GitHub 建立里程碑，计划中但尚未发布
最近代码提交：2026 年 5 月仍有活跃提交

近期版本更新亮点

版本	发布日期	亮点
v4.5.1	2025-10-13	修复插件生命周期问题、Doughnut 图例同步
v4.5.0	2025-06-14	新增 Doughnut `selfJoin` 选项、Filler 插件支持水平折线图
v4.4.9	2025-04-15	修复折线图填充裁剪、Node.js 使用文档
v4.4.7	2024-12-01	Tooltip 字体文档、多系列饼图修复
v4.4.0	2023-10	新增 Scale `clip` 选项

发展趋势

v5 规划中：GitHub 已有 v5.0.0 里程碑，预计将带来进一步的模块化改进和 API 清理
社区稳定：Chart.js 在 2025 JavaScript Rising Stars 中仍是最受欢迎的图表库之一
生态成熟：插件生态（annotation、datalabels、zoom）已非常完善，基本覆盖常见业务需求
框架集成完善：React（react-chartjs-2）、Vue（vue-chartjs）、Angular（ng2-charts）的封装库均保持活跃更新
服务端渲染增强：v4.4.9 新增了 Node.js 使用文档，ChartjsNodeCanvas 持续更新

竞品格局

2026 年的 JavaScript 图表库竞争激烈：

Chart.js：简单场景的首选，低门槛 + 美观默认 + 小体积
Apache ECharts：中国市场主导，大数据集和复杂图表的首选
D3.js：定制化可视化的无可替代方案
Recharts / Nivo：React 生态的声明式图表选择
LightningChart：专业级高性能场景（金融、医疗、工程）
uPlot：极简、极快的时间序列图表

Chart.js 的核心竞争力仍然是"简单 + 美观 + 轻量"——对于 80% 的业务图表需求，Chart.js 是投入产出比最高的选择。