文章目录
- 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 协议，商业项目可以直接使用。
