Chart.js：基于 Canvas 的 JavaScript 图表库

Chart.js：基于 Canvas 的 JavaScript 图表库

Chart.js 是一个 JavaScript 图表绘制库，在 GitHub 上有 67,485 个 Star：

Chart.js 基于 HTML5 Canvas 渲染，面向设计师和开发者，目标是提供简单灵活的图表方案。整个库用一个 JS 文件就能驱动，引入即可开始画图。

支持的图表类型

• 折线图（Line）
• 柱状图（Bar）
• 饼图和环形图（Pie / Doughnut）
• 散点图（Scatter）
• 雷达图（Radar）
• 极区图（Polar Area）
• 气泡图（Bubble）

每种图表都支持动画效果和响应式布局。浏览器窗口缩放时图表自动调整尺寸，不需要额外写适配代码。

基本用法

引入 Chart.js 后，一个 canvas 元素加几行代码就能生成图表：

<canvasid="myChart"width="400"height="200"></canvas><scriptsrc="https://cdn.jsdelivr.net/npm/chart.js"></script><script>constctx=document.getElementById('myChart').getContext('2d');newChart(ctx,{type:'bar',data:{labels:['一月','二月','三月','四月'],datasets:[{label:'销售额',data:[120,190,80,150],backgroundColor:'rgba(54, 162, 235, 0.5)'}]}});</script>

数据通过 data 对象传入，type 指定图表种类，样式通过 options 和 datasets 中的属性控制。

配置与扩展

Chart.js 的配置项覆盖标题、图例、提示框、坐标轴等所有视觉元素，字段命名直观，上手不难。

插件机制允许在图表渲染的各个阶段插入自定义逻辑。社区维护了一个扩展列表，涵盖导出图片、数据标注、主题切换等功能。

安装方式

CDN 引入：

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

npm 安装：

npm install chart.js

从源码构建需要 Node.js 环境，clone 仓库后执行 npm install 和 npm run build 即可。

当前版本

Chart.js 已经迭代到第 4 版，官方文档在 chartjs.org，包含入门指南、配置说明和示例代码。旧版文档通过 URL 指定版本号访问，比如 docs/2.9.4/。项目使用 MIT 协议，商业项目可以直接使用。

入门指南、配置说明和示例代码。旧版文档通过 URL 指定版本号访问，比如 docs/2.9.4/。项目使用 MIT 协议，商业项目可以直接使用。