环形图生成器
通过 CSV 数据生成环形图——空心中央区域非常适合 KPI 幻灯片展示。导出 PNG，无需上传文件。
使用方法
- 1 粘贴两列的 CSV 数据——标签和数值。
- 2 根据你的设计需要开启或关闭图例。
- 3 将环形图下载为 PNG 图片。
为什么使用此工具
- 环形布局——数据与饼图完全相同,但中央留有更清晰的空间,方便在幻灯片中插入 KPI 数值。
- Chart.js 仅在需要时才会加载。
- 支持带引号的 CSV 单元格。
- 完全在浏览器端(client-side)处理——你的数据始终留在本地设备上。
常见问题
和饼图有什么区别?
视觉上是一个圆环,而不是实心圆形。数据和计算方式完全相同——参见<a class="underline" href="/pie-chart-maker">饼图生成器</a>。
我可以在中间添加标签吗?
请下载 PNG 图片,然后在幻灯片制作工具中插入你的 KPI 数值——这样可以让本工具保持零额外依赖。
为什么图例中没有显示每个扇区的具体数值?
将鼠标悬停在实时预览中的各个扇区上即可查看数值——导出的 PNG 默认保持界面简洁。
什么是 环形图生成器？
环形图生成器(Doughnut Chart Maker)是一款可在浏览器中直接根据 CSV 数据生成环形图的工具。工具会按比例将各部分显示在一个中心镂空的圆环上,这种布局特别适合用于 KPI 展示屏幕。生成的图表可导出为 PNG 图片,整个处理过程都在浏览器端(client-side)完成,无需上传任何文件。
功能特性
基于 CSV 的环形图渲染
将第一行作为表头读取，前两列作为标签/数值对，使用 Chart.js 的 doughnut 图表类型为每一行数据绘制一个环形扇区。
自动扇区配色
每一行都会从固定的 10 种色调调色板中分配一种颜色（按行索引循环），扇区之间以 1 像素的白色描边分隔，无需手动选色即可保持图表清晰易读。
一键导出 PNG
下载按钮会对渲染后的图表调用 canvas.toDataURL('image/png')，并触发浏览器下载名为 doughnut-chart-maker.png 的文件——导出的图片会完全反映当前屏幕上的显示效果，包括图例的显示/隐藏状态。
纯客户端运行，支持带引号的 CSV
Chart.js 在浏览器中动态导入，CSV 解析器支持符合 RFC 4180 规范的引号处理（带引号的字段、字段内嵌逗号、转义引号）；粘贴的数据始终不会离开设备——不存在任何上传或服务器端处理。
示例
Input
Source,Users
Organic,420
Direct,310
Referral,180
Social,140
Email,90Output
doughnut-chart-maker.png — canvas-resolution PNG (matches the on-screen preview element size), 5 colored ring segments sized proportionally to 420/310/180/140/90, white 1px segment borders, legend shown above the chart if the 'Show legend' toggle is on常见使用场景
-
1
用于 KPI 幻灯片，环形中心可叠加标签
导出某项指标构成（例如流量来源占比）的环形图 PNG，并在幻灯片编辑工具中将主要数字叠加在中心的空白区域，因为该工具本身不渲染中心文字。
-
2
快速可视化分类占比
粘贴一份包含类别和数值的两列 CSV（例如问卷答案计数、预算项目），无需打开表格软件即可立即以环形扇区的形式查看各项占比。
-
3
复用电子表格导出数据，无需重新格式化
可直接粘贴从 Excel 或 Google 表格复制的 CSV 行，包括含有内嵌逗号的带引号字段，因为内置的 RFC 4180 解析器会自动处理引号和分隔符识别。
Doughnut Chart Maker 会根据粘贴的两列 CSV 数据（标签、数值），使用 Chart.js 4 渲染环形图（doughnut chart）：第一列作为各扇区的标签，第二列作为数值，并从一套固定的 10 色调色板中按行分配颜色。CSV 在客户端由符合 RFC 4180 标准的解析器进行解析，Chart.js 按需懒加载，生成的图表通过 canvas 的 toDataURL 方法导出为 PNG——整个过程不会将任何数据上传到服务器。
- 分类
- 创作者
- 价格
- 免费
- 隐私
- 基于浏览器
- 注册
- 无需
参考资料
- Doughnut and Pie Chart —— Chart.js 文档 — Chart.js
- HTMLCanvasElement：toDataURL() 方法 — MDN Web Docs
- RFC 4180: Common Format and MIME Type for Comma-Separated Values (CSV) Files — IETF
- Colors —— Chart.js 文档 — Chart.js
隐私
除非另有说明，否则你的数据永远不会离开浏览器。环形图生成器 完全在客户端运行 — 无需上传服务器，不记录日志，不追踪你输入的内容。
相关工具
在 Zerethon Social 上创作、分享与成长
免费注册。赚取积分，收集成就，与全球创作者建立联系。