使用方法
- 饼图图表生成的输入是每行一条「标签,数值」。打开页面时已经预置了 5 行流量来源示例：搜索引擎,1245、直接访问,863、社交分享,412、广告投放,197、其他来源,83。
- 点「生成饼图」或按 Ctrl / Cmd + Enter（Enter 留给换行）。右侧立即画出 320×320 的 SVG 扇形，图例同时给出每项占比与圆心角。
- 看明细表：5 项的总和是 2800，搜索引擎占比 44.46%、圆心角 160.07°，每一行都能用 圆心角 = 360° × 值 ÷ 总和 手算复核。
- 点「复制 SVG 代码」拿到纯文本矢量图，可直接粘进 HTML、PPT 或 Figma；「导出对照表 CSV」带 BOM，Excel 打开中文不乱码。
- 数据行数限 2 到 24 行：少于 2 行没有占比可比较，超过 24 行颜色循环重复且标签必然重叠，本页会直接报错而不是硬画。
饼图图表生成能解决什么问题
第一个场景是构成汇报。流量来源、预算拆分、工时分布这类「整体里各占多少」的数据，用饼图一张图就说清主次——示例里搜索引擎 44.46% 一眼就是大头，而它在表格里只是 1245/2800 这样一个需要心算的分数。
第二个场景是给非技术受众替代数据表。会议纪要、周报里贴一张扇形图，比让人读 5 行数字快得多；SVG 格式还保证投屏放大后不糊位图。
第三个场景是教学演示。因为本页把 2π × 值 ÷ 总和 这条公式和每条 path 的端点坐标都写出来，讲「占比如何变成角度」时可以直接对着代码讲。
要明确的是饼图有统计学软肋：它靠角度比较大小，人眼对角度差的分辨远不如对长度差敏感。两个扇区只差 2～3 个百分点时（例如 14.71% 与 12.5%），扇形图几乎分不出谁大——这类「相近数值比较」请改用条形图。条形图图表生成就是干这个的；本页也不做随时间变化的趋势线，那类需求走行图谱生成。
原理与规则说明
角度公式：第 i 项的圆心角 = 2π × 值 ÷ 总和（弧度制），即 360° × 值 ÷ 总和，这也是饼图图表生成与一切手算口径对齐的锚点。示例总和 2800，搜索引擎 1245/2800 = 44.46%，对应 160.07°；五项角度 160.07 + 110.96 + 52.97 + 25.33 + 10.67 = 360.00°，可以逐项验算。所有扇区从 12 点方向（-90°）顺时针起算，这是饼图的通行画法。
绘制走 SVG 路径而不是 Canvas。每个扇区是一条 path：M160 160 L160 40 A120 120 0 0 1 200.902 272.814 Z——M 移到圆心，L 画半径到起始点，A 画半径 120 的圆弧到终点，Z 闭合。其中第三段参数 large-arc-flag 在圆心角超过 180° 时必须从 0 改成 1，否则 SVG 只画短弧，占比超过一半的扇区会缺一角；sweep-flag 固定为 1 表示顺时针。选 SVG 而不选 Canvas 的取舍是：5～24 个扇区这点数据量，SVG 的 5 条 path 总共不到 300 字节文本，还能被 CSS 悬停、被屏幕阅读器读出 title、复制出去仍是矢量；Canvas 一旦画完就是像素，无法选择、无法复制，只有几千个数据点的散点图才值得用它。本页扇区上限 24 也正因此定在 SVG 的舒适区里。
配色用 8 色循环表（#2563eb、#16a34a、#f59e0b、#dc2626、#7c3aed、#0891b2、#db2777、#65a30d），相邻色相已拉开。超过 8 项后第 9 项会与第 1 项同色——它们不相邻时还能靠位置区分，这是上限不敢再放宽的第二个原因。
标签策略：本页不把百分比数字画进扇区，全部放图例。原因在下面「边界」一节用弦长算给你看：占比小于 5.87% 的扇区，相邻两个百分比标签在圆周上必然重叠。
完整示例（数值仅作演示）
用预置的 5 行数据点「生成饼图」，得到：
- 总和 = 1245 + 863 + 412 + 197 + 83 = 2800
- 搜索引擎 1245 → 44.46% → 160.07°；直接访问 863 → 30.82% → 110.96°；社交分享 412 → 14.71% → 52.97°；广告投放 197 → 7.04% → 25.33°；其他来源 83 → 2.96% → 10.67°
- 第一个扇区的完整 path 是
M160 160 L160 40 A120 120 0 0 1 200.902 272.814 Z，终点 (200.902, 272.814) 可以用 160 + 120×cos(70.07°)、160 + 120×sin(70.07°) 验证（70.07° = -90° + 160.07°） - 占比四舍五入到两位小数后合计 99.99%，不是 100%——这是舍入误差，不是算错，见下一节
输入范围与对照表
本页接受 2 到 24 行数据，每行数值为 0 或正数（上限 1e9，超出按科学计数法也认，但强烈建议先换算单位）。标签为空、缺逗号、负值、总和为 0 都会报具体错误而不是静默出图。
标签要不要画进扇区，取决于相邻扇区有多「瘦」。半径 120px 的圆上，占比 p% 对应的圆周弦长 = 2×120×sin(3.6p°/2)，而「44.46%」这样的百分比文字在 13px 字号下宽约 44px，弦长小于 44px 就必然重叠：
| 占比 | 圆心角 | 圆周弦长 (px) | 能否在扇区旁标数字 |
|---|---|---|---|
| 3% | 10.8° | 22.59 | 重叠，放图例 |
| 4% | 14.4° | 30.08 | 重叠，放图例 |
| 5% | 18.0° | 37.54 | 重叠，放图例 |
| 5.87%（临界） | 21.13° | 44.00 | 恰好不重叠 |
| 6% | 21.6° | 44.97 | 勉强可标 |
| 8% | 28.8° | 59.69 | 可标 |
临界值 5.87% 来自 2×asin(44/240) = 21.128° 换算成占比。明细表见工具区，默认 12 行、可加载更多、可导出 CSV。
输入范围、边界与精度说明
总和为 0 是硬报错。圆心角 = 2π × 值 ÷ 总和，总和为 0 时每项都算出 NaN，画出来的是一个空圈。本页检测到 sum = 0 直接给出「请至少让一项大于 0」的提示，而不是渲染一个看起来正常但没有任何信息的图形。
负值也是硬报错。若允许 -3 这类值，1245 与 -3 的总和是 1242，1245/1242 = 100.24%，圆心角 360.87° 直接超过整圆，弧线端点绕过起点。饼图的定义域就是非负数，做「盈亏」请用条形图。
舍入与 99.99%：内部全程用双精度浮点算角度，误差在 1e-13 量级，对绘图毫无影响。显示层把占比截到两位小数才出现 44.46 + 30.82 + 14.71 + 7.04 + 2.96 = 99.99% 的现象。若四舍五入到一位小数，小数据集甚至可能合计 100.1%。处理办法是固定保留最后一位最大项用 100 减去其余项（本页图例标注「演示计算」，供人工复核），CSV 导出的是未舍入的完整值。
24 项上限的两个依据：一是 8 色循环，第 9 项与第 1 项同色；二是 24 项均分时每项只有 15°，全部低于 5.87%×2 的可标注阈值，图形退化为「看不出区别的披萨」。真有几十个分类要展示，正确工具是条形图或Org图表生成这类层级图。
路径精度：弧线端点坐标保留 3 位小数（0.001px），在 320×320 视窗里远低于设备像素的一半，肉眼与导出打印都看不出接缝。首尾扇区的接合点 (160, 40) 与 (160.000, 40.000) 由公式天然闭合，不依赖手工对齐。
常见问题
为什么我的图里两个扇区几乎一样大，数字却差着几个百分点？
这正是饼图的分辨力极限。人眼比较的是角度，14.71% 与 12.5% 只差 2.21 个百分点、对应不到 8° 的圆心角，视觉上几乎重合。饼图适合「一大几小」的构成，不适合让读者分辨相近数值——两个百分比差在 5 个点以内时，请改用条形图让长度替你说话，本页标题与说明里的统计学警示就是给这个场景准备的。
占比加起来是 99.99%，少的那 0.01% 去哪了？
哪儿也没去，是显示层四舍五入的视觉现象。示例五项的真实占比是 1245/2800、863/2800……精确值合计恒等于 100%，但各自截到两位小数后合计 99.99%。同理，有的数据集会显示 100.01%。要做「补齐尾差」的正式报表，取最大项用 100% 减去其余项即可；本页 CSV 导出的是完整精度数值，不受此影响。
为什么总数填 0 时直接报错，而不是画一个空圈？
圆心角 = 2π × 值 ÷ 总和，除数 0 得到 NaN，SVG 拿到 NaN 坐标会整条路径失效。更本质的问题是「每项占 0/0」没有数学答案，静默画空圈等于假装算出来了。报错并指出「至少让一项大于 0」是唯一诚实的行为，这也是本页 fail 文案要把公式写出来的原因。
能不能超过 24 行？我手上有 30 个分类。
不能，这是刻意的。30 个扇区意味着至少 22 项低于 8 色循环能区分的范围，且平均圆心角只有 12°，全部低于 5.87% 的标签阈值——你得到的是一张无法阅读的图。正确做法是把最小的若干项合并成「其他」，控制到 8 项以内；如果每个分类都必须单独可见，饼图本身就不是合适的图型，换条形图。
为什么用 SVG 不用 Canvas？看起来两者都能画。
都能画，但产物不同。SVG 是 DOM 节点：可以复制源码（本页「复制 SVG 代码」按钮）、可以 CSS 悬停变色、无级缩放不糊、屏幕阅读器能读 title。Canvas 画完只剩像素矩阵，要交互得自己算鼠标落点在哪个扇形里。数据量上 Canvas 只有在几千个绘制对象时才有优势，饼图最多 24 个扇区，远够不着那个量级，所以本页选 SVG。
扇形从几点钟方向开始？为什么我的图和别处画的方向相反？
本页从 12 点方向（-90°）顺时针画，这是 Excel、ECharts 等主流实现的默认，读图者不需要重新定位起点。有些库（如 matplotlib 某些配置）从 3 点方向逆时针画，看起来就「转了 90°」。角度本身不受影响——搜索引擎始终是 160.07°，只是起始方位不同。同一份报告里保持一种约定即可。
复制出去的 SVG 能直接用吗？怎么改颜色？
能。复制到的是自包含的 <svg> 文本，粘进 HTML 或存成 .svg 文件都能显示。改颜色直接改 path 的 fill 属性；8 个默认色是按色相环拉开的无障碍安全色，若要换品牌色，注意保持相邻扇区明度差，否则又回到「分不清相近数值」的老问题。Excel 里粘贴时选「图片」而不是「文本」，否则拿到的是源码。
数据和别的图表工具对不上，是本页算错了吗？
先核对三件事：数据行是否一致（含没写的 0 值行）、是否有人把「数值」填成了已算好的百分比、舍入位数是否相同。本页角度 = 360° × 值 ÷ 总和 是无参数公式，同样输入下任何正确实现都给同一角度，分歧只会来自输入或舍入显示。若对方工具对 0 总和、负值不报错而是硬画，那它的「结果」反而不可信。