Chart.js：基于 Canvas 的 JavaScript 图表库
文章目录Chart.js基于 Canvas 的 JavaScript 图表库Chart.js基于 Canvas 的 JavaScript 图表库Chart.js 是一个 JavaScript 图表绘制库在 GitHub 上有 67,485 个 StarChart.js 基于 HTML5 Canvas 渲染面向设计师和开发者目标是提供简单灵活的图表方案。整个库用一个 JS 文件就能驱动引入即可开始画图。支持的图表类型折线图Line柱状图Bar饼图和环形图Pie / Doughnut散点图Scatter雷达图Radar极区图Polar Area气泡图Bubble每种图表都支持动画效果和响应式布局。浏览器窗口缩放时图表自动调整尺寸不需要额外写适配代码。基本用法引入 Chart.js 后一个 canvas 元素加几行代码就能生成图表canvasidmyChartwidth400height200/canvasscriptsrchttps://cdn.jsdelivr.net/npm/chart.js/scriptscriptconstctxdocument.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 引入scriptsrchttps://cdn.jsdelivr.net/npm/chart.js/scriptnpm 安装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 协议商业项目可以直接使用。
