frappe/charts

这是什么？

核心功能

• 01支持坐标轴图、面积图、趋势图、柱状图、折线图、饼图、百分比图、混合坐标轴图和热力图
• 02可添加 x、y 轴标记、区域和悬浮提示进行标注
• 03支持原地更新单个数据点或整体刷新数据集
• 04颜色、动画和标题等选项可自定义
• 05零依赖，可通过 npm 或 CDN 引入

适用场景

• 在 Web 仪表盘中添加简单的销售或活跃度图表
• 在管理后台或 ERP 类界面中展示图表，无需引入较重的图表库
• 在对包体积敏感的页面中嵌入轻量的 SVG 图表

快速上手

1. 1

   从 npm 安装该包

   npm install frappe-charts
2. 2

   在项目中导入 Chart 类及其 CSS

   import { Chart } from 'frappe-charts'
3. 3

   在容器元素中传入数据、图表类型和高度选项创建图表

收录于专题

标签

常见问题

charts 是什么？

一个零依赖的 JavaScript 库，用于绘制简洁、响应式、GitHub 风格的 SVG 图表。 Frappe Charts 是一个面向浏览器的图表库，将数值数组渲染为 SVG 图表。它的 API 简单，视觉风格参考 GitHub 上的图表，并且没有运行时依赖。

charts 可以免费使用吗？用的什么许可证？

charts 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

charts 还在维护吗？

活跃维护中。charts 最近一次提交是在 2026年10月19日。

charts 适合用来做什么？

在 Web 仪表盘中添加简单的销售或活跃度图表 在管理后台或 ERP 类界面中展示图表，无需引入较重的图表库 在对包体积敏感的页面中嵌入轻量的 SVG 图表

charts 怎么安装和运行？

从 npm 安装该包: npm install frappe-charts 在项目中导入 Chart 类及其 CSS: import { Chart } from 'frappe-charts' 在容器元素中传入数据、图表类型和高度选项创建图表

在哪里获取 charts？

源代码和安装说明在 GitHub 上：https://github.com/frappe/charts