很棒的 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️⃣❕❕ | 条形漏斗 | 添加条形漏斗图类型 |
| 2️⃣ 3️⃣ 4️⃣ | 箱线图 | 添加箱线图和小提琴图图表类型 |
| 2️⃣ 3️⃣ 4️⃣ | 误差线 | 添加标准图表类型的多种误差线变体 |
| 2️⃣ 3️⃣ ❕ | 金融的 | 添加金融图表类型，例如烛台 |
| ❕3️⃣4️⃣ | 漏斗 | 添加漏斗图类型 |
| 2️⃣ 3️⃣ 4️⃣ | 地理 | 添加地理地图图表类型，例如等值线图和气泡图 |
| 2️⃣ 3️⃣ 4️⃣ | 图形 | 添加图表类型，例如力定向图 |
| 2️⃣ 3️⃣ 4️⃣ | 矩阵 | 添加矩阵图类型 |
| 2️⃣ 3️⃣ 4️⃣ | 五氯苯酚 | 添加平行坐标绘图图表类型 |
| ❕3️⃣4️⃣ | 桑基 | 添加桑基图图表类型 |
| 2️⃣❕❕ | 史密斯 | 添加史密斯图类型 |
| 2️⃣ 3️⃣ 4️⃣ | 堆叠100 | 绘制 100% 堆积条形图 |
| 2️⃣ 3️⃣ 4️⃣ | 树形图 | 添加树状图图表类型 |
| ❕3️⃣4️⃣ | 维恩 | 添加维恩图和欧拉图类型 |
| ❕3️⃣4️⃣ | 词云 | 添加词云图表类型 |
插件
造型
| 支持 | 姓名 | 描述 |
|---|
| ❕3️⃣4️⃣ | 自动着色器 | 自动颜色生成 |
| 2️⃣❕❕ | 配色方案 | 使用预定义的配色方案启用自动着色 |
| ❕3️⃣4️⃣ | 坡度 | 简单的渐变 |
| 2️⃣❕❕ | 粗糙的 | 使用 Rough.js 以类似手绘的粗略风格绘制图表 |
| 2️⃣❕❕ | 风格 | 提供样式选项，例如阴影、斜角、发光或叠加效果 |
| ❕❕4️⃣ | 时间堆栈 | 添加具有“良好”时间划分的固执己见的时间刻度格式 |
特征
| 支持 | 姓名 | 描述 |
|---|
| 2️⃣ 3️⃣ 4️⃣ | 注解 | 在图表区域上绘制线条、方框、点、标签、多边形和椭圆 |
| 2️⃣ 3️⃣ ❕ | 十字线 | 向折线图和散点图添加数据十字准线 |
| 2️⃣ 3️⃣ 4️⃣ | 数据标签 | 显示任何类型图表的数据标签 |
| 2️⃣❕❕ | 甜甜圈标签 | 在圆环图的中心显示文本标签 |
| 2️⃣ 3️⃣ 4️⃣ | 等级制度 | 添加可以折叠、展开和聚焦的分层比例 |
| ❕❕4️⃣ | 图像标签 | 在圆环图的数据上显示图像标签 |
| 2️⃣❕❕ | 饼图输出标签 | 在饼图/圆环图外部显示标签 |
| 2️⃣❕❕ | 回归 | 计算并绘制统计回归（趋势线） |
| ❕❕4️⃣ | 趋势线 | 绘制趋势线 |
| 2️⃣❕❕ | 瀑布 | 轻松使用瀑布图 |
互动
| 支持 | 姓名 | 描述 |
|---|
| ❕❕4️⃣ | a11y传奇 | 为图表图例提供键盘辅助功能 |
| ❕3️⃣4️⃣ | 图表2音乐 | 通过键盘导航和声音处理增强图表的可访问性 |
| 2️⃣ 3️⃣ 4️⃣ | 推迟的 | 推迟初始图表更新，直到图表滚动到视口中 |
| 2️⃣ 3️⃣ 4️⃣ | 拖动数据 | 允许用户在图表上拖动数据点 |
| 2️⃣ 3️⃣ 4️⃣ | 飞涨 | 启用图表上的缩放和平移 |
数据来源
| 支持 | 姓名 | 描述 |
|---|
| 2️⃣ 3️⃣ 4️⃣ | 数据源-prometheus | 显示 Prometheus 的时间序列 |
| 2️⃣ 3️⃣ ❕ | 流媒体 | 添加对实时流数据的支持 |
此外，许多插件可以在 npm 注册表中找到。
适配器
| 支持 | 姓名 | 描述 |
|---|
| 2️⃣ 3️⃣ 4️⃣ | 日期-fns | 日期-fns 适配器 |
| 2️⃣ 3️⃣ 4️⃣ | 戴杰斯 | Dayjs 适配器 |
| 2️⃣ 3️⃣ 4️⃣ | 勒克森 | 勒克森适配器 |
| 2️⃣ 3️⃣ 4️⃣ | 片刻 | Moment.js 适配器 |
| ❕3️⃣4️⃣ | 时空 | 时空适配器 |
集成
JavaScript
| 支持 | 姓名 | 描述 |
|---|
| 2️⃣❕❕ | ember-cli-图表 | 余烬 CLI |
| ❕❕4️⃣ | 新鲜图表 | 新鲜的 |
| 2️⃣❕❕ | 轻量级立方体 | 闪电网络组件 |
| 2️⃣ 3️⃣ 4️⃣ | ng2 图表 | 角度 v2+ |
| 2️⃣ 3️⃣ ❕ | 欧米图 | 近江 |
| 2️⃣ 3️⃣ 4️⃣ | 反应chartjs-2 | 反应 |
| ❕3️⃣4️⃣ | 固体图表 | SolidJs |
| ❕3️⃣4️⃣ | svelte-chartjs | 斯韦尔特 |
| 2️⃣ 3️⃣ 4️⃣ | vue-chartjs | Vue.js |
其他的
| 支持 | 姓名 | 描述 |
|---|
| ❕3️⃣❕ | BlazorChartjs | 布拉佐尔 |
| ❕3️⃣4️⃣ | pax.BlazorChartJs | Blazor（具有 JavaScript 隔离） |
| 2️⃣ 3️⃣ 4️⃣ | 查巴 | GWT/J2CL |
| 2️⃣❕❕ | 图表.java | 爪哇 |
| ❕❕4️⃣ | Chartjs-java-模型 | 爪哇 |
| 2️⃣❕❕ | Chartjs-ocaml | 奥卡米尔 |
| 2️⃣ 3️⃣ ❕ | Chartjs-错误 | Ruby，简化了 Rails 视图中 Chart.js 的使用 |
| ❕3️⃣4️⃣ | 图表-js-rs | Rust 中的 Chart.js 类型 API（Alpha 版中的 WIP/不完整） |
| 2️⃣❕❕ | django-chartjs | 姜戈 |
| 菲格玛 | 设计组件 |
| 2️⃣ 3️⃣ 4️⃣ | ipychart | Python |
| 2️⃣ 3️⃣ 4️⃣ | laravel-chartjs | 拉维尔 |
| 2️⃣❕❕ | 液化 | 使用 Angular 对流数据进行快速、多线程可视化 |
| 2️⃣❕❕ | nova-chartjs | 拉拉维尔·诺瓦 |
| 2️⃣ 3️⃣ 4️⃣ | 快速图表 | 用于静态图表的 Web API |
| 2️⃣❕❕ | 邪恶图表 | Java Web 应用程序的包装器 |
| ❕3️⃣❕ | symfony/ux-chartjs | Symfony UX 捆绑包 |
工具
| 支持 | 姓名 | 描述 |
|---|
| ❕3️⃣❕ | 网络中心 | GitHub 页面上 Chart.js（及更多）的浏览器扩展 |
