访问官网
Github
文档
超赞 Chart.js 
与 Chart.js 相关的精选超赞资源列表
Chart.js 支持。 目前使用的 Chart.js 主要有三个版本。请参考下面的版本徽章，检查库是否支持你使用的 Chart.js 版本。（另外，"❕"表示不支持该版本。）
- Chart.js v. 4️⃣ — 2022年11月发布
- Chart.js v. 3️⃣ — 2021年4月发布
- Chart.js v. 2️⃣ — 2016年4月发布
资源
- 官方指南 | 用户指南和文档网站。
图表
| 支持 | 名称 | 描述 |
|---|---|---|
| 2️⃣ ❕ ❕ | bar-funnel | 添加条形漏斗图类型 |
| 2️⃣ 3️⃣ 4️⃣ | boxplot | 添加箱线图和小提琴图类型 |
| 2️⃣ 3️⃣ 4️⃣ | error-bars | 添加标准图表类型的各种误差条变体 |
| 2️⃣ 3️⃣ ❕ | financial | 添加金融图表类型，如K线图 |
| ❕ 3️⃣ 4️⃣ | funnel | 添加漏斗图类型 |
| 2️⃣ 3️⃣ 4️⃣ | geo | 添加地理地图图表类型，如等值线图和气泡地图 |
| 2️⃣ 3️⃣ 4️⃣ | graph | 添加图表类型，如力导向图 |
| 2️⃣ 3️⃣ 4️⃣ | matrix | 添加矩阵图类型 |
| 2️⃣ 3️⃣ 4️⃣ | pcp | 添加平行坐标图类型 |
| ❕ 3️⃣ 4️⃣ | sankey | 添加桑基图类型 |
| 2️⃣ ❕ ❕ | smith | 添加史密斯图类型 |
| 2️⃣ 3️⃣ 4️⃣ | stacked100 | 绘制100%堆叠条形图 |
| 2️⃣ 3️⃣ 4️⃣ | treemap | 添加树状图类型 |
| ❕ 3️⃣ 4️⃣ | venn | 添加维恩图和欧拉图类型 |
| ❕ 3️⃣ 4️⃣ | word-cloud | 添加词云图类型 |
插件
样式
| 支持 | 名称 | 描述 |
|---|---|---|
| ❕ 3️⃣ 4️⃣ | autocolors | 自动生成颜色 |
| 2️⃣ ❕ ❕ | colorschemes | 使用预定义的配色方案实现自动着色 |
| ❕ 3️⃣ 4️⃣ | gradient | 简易渐变 |
| 2️⃣ ❕ ❕ | rough | 使用Rough.js绘制粗略的手绘风格图表 |
| 2️⃣ ❕ ❕ | style | 提供阴影、浮雕、发光或叠加效果等样式选项 |
| ❕ ❕ 4️⃣ | timestack | 添加独特的时间刻度格式化，具有"优雅"的时间划分 |
功能
| 支持 | 名称 | 描述 |
|---|---|---|
| 2️⃣ 3️⃣ 4️⃣ | annotation | 在图表区域绘制线条、方框、点、标签、多边形和椭圆 |
| 2️⃣ 3️⃣ ❕ | crosshair | 为线形图和散点图添加数据十字准线 |
| 2️⃣ 3️⃣ 4️⃣ | datalabels | 在任何类型的图表上显示数据标签 |
| 2️⃣ ❕ ❕ | doughnutlabel | 在环形图中心显示文本标签 |
| 2️⃣ 3️⃣ 4️⃣ | hierarchical | 添加可折叠、展开和聚焦的层次结构刻度 |
| ❕ ❕ 4️⃣ | image-label | 在环形图上显示图像标签 |
| 2️⃣ ❕ ❕ | piechart-outlabels | 在饼图/环形图外部显示标签 |
| 2️⃣ ❕ ❕ | regression | 计算并绘制统计回归线（趋势线） |
| ❕ ❕ 4️⃣ | trendline | 绘制趋势线 |
| 2️⃣ ❕ ❕ | waterfall | 支持轻松使用瀑布图 |
交互
| 支持 | 名称 | 描述 |
|---|---|---|
| ❕ ❕ 4️⃣ | a11y-legend | 为图表图例提供键盘无障碍功能 |
| ❕ 3️⃣ 4️⃣ | chart2music | 通过键盘导航和声音反馈增强图表的无障碍性 |
| 2️⃣ 3️⃣ 4️⃣ | deferred | 延迟初始图表更新，直到图表滚动到视口中 |
| 2️⃣ 3️⃣ ❕ | dragdata | 允许用户拖动图表上的数据点 |
| 2️⃣ 3️⃣ 4️⃣ | zoom | 支持图表的缩放和平移 |
数据源
| 支持 | 名称 | 描述 |
|---|---|---|
| 2️⃣ 3️⃣ 4️⃣ | datasource-prometheus | 显示来自Prometheus的时间序列数据 |
| 2️⃣ 3️⃣ ❕ | streaming | 添加对实时流数据的支持 |
此外，还可以在npm注册表上找到许多插件。
适配器
| 支持 | 名称 | 描述 |
|---|---|---|
| 2️⃣ 3️⃣ 4️⃣ | date-fns | date-fns 适配器 |
| 2️⃣ 3️⃣ 4️⃣ | dayjs | dayjs 适配器 |
| 2️⃣ 3️⃣ 4️⃣ | luxon | Luxon 适配器 |
| 2️⃣ 3️⃣ 4️⃣ | moment | Moment.js 适配器 |
| ❕ 3️⃣ 4️⃣ | spacetime | Spacetime 适配器 |
集成
JavaScript
| 支持 | 名称 | 描述 |
|---|---|---|
| 2️⃣ ❕ ❕ | ember-cli-chart | Ember CLI |
| 2️⃣ ❕ ❕ | lwcc | Lightning Web 组件 |
| 2️⃣ 3️⃣ 4️⃣ | ng2-charts | Angular v2+ |
| 2️⃣ 3️⃣ ❕ | omi-chart | Omi |
| 2️⃣ 3️⃣ 4️⃣ | react-chartjs-2 | React |
| ❕ 3️⃣ 4️⃣ | solid-chartjs | SolidJs |
| ❕ 3️⃣ 4️⃣ | svelte-chartjs | Svelte |
| 2️⃣ 3️⃣ 4️⃣ | vue-chartjs | Vue.js |
其他
| 支持 | 名称 | 描述 |
|---|---|---|
| ❕ 3️⃣ ❕ | BlazorChartjs | Blazor |
| ❕ 3️⃣ 4️⃣ | pax.BlazorChartJs | Blazor（使用JavaScript隔离） |
| 2️⃣ 3️⃣ 4️⃣ | charba | GWT/J2CL |
| 2️⃣ ❕ ❕ | chart.java | Java |
| ❕ ❕ 4️⃣ | chartjs-java-model | Java |
| 2️⃣ ❕ ❕ | chartjs-ocaml | OCaml |
| 2️⃣ 3️⃣ ❕ | chartjs-ror | Ruby，简化在Rails视图中使用Chart.js |
| ❕ 3️⃣ 4️⃣ | chart-js-rs | Rust中的Chart.js类型API（Alpha版/未完成的工作进行中） |
| 2️⃣ ❕ ❕ | django-chartjs | Django |
| figma | 设计组件 | |
| 2️⃣ 3️⃣ 4️⃣ | ipychart | Python |
| 2️⃣ 3️⃣ 4️⃣ | laravel-chartjs | Laravel |
| 2️⃣ ❕ ❕ | liquify | 使用Angular进行快速、多线程的流数据可视化 |
| 2️⃣ ❕ ❕ | nova-chartjs | Laravel Nova |
| 2️⃣ 3️⃣ 4️⃣ | quickchart | 静态图表的Web API |
| 2️⃣ ❕ ❕ | wicked-charts | Java Web应用的包装器 |
| ❕ 3️⃣ ❕ | symfony/ux-chartjs | Symfony UX包 |
工具
| 支持 | 名称 | 描述 |
|---|---|---|
| ❕ 3️⃣ ❕ | xhub | GitHub页面上Chart.js（及更多）的浏览器扩展 |
