图表生成器
把 CSV 或制表符分隔的数据粘贴进来，即可生成折线图、柱状图、堆叠柱状图、面积图、饼图、环形图、散点图与雷达图，并导出 SVG 源码。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
数据（第一行是表头）
第一列是分类标签，其余列是数值；逗号与制表符分隔都支持，数值可用引号包裹。
图表预览
图表由本站自己生成的 SVG 绘制，数据不会离开浏览器。
SVG 源码
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 420" width="720" height="420" role="img" aria-label="chart" data-test-id="chart" font-family="system-ui, -apple-system, 'Segoe UI', sans-serif"><line x1="58" y1="358.00" x2="702.00" y2="358.00" stroke="#9ca3af" stroke-opacity="0.28" stroke-width="1"/><text x="50" y="358.00" text-anchor="end" dominant-baseline="middle" font-size="11" fill="#6b7280">0</text><line x1="58" y1="289.60" x2="702.00" y2="289.60" stroke="#9ca3af" stroke-opacity="0.28" stroke-width="1"/><text x="50" y="289.60" text-anchor="end" dominant-baseline="middle" font-size="11" fill="#6b7280">50</text><line x1="58" y1="221.20" x2="702.00" y2="221.20" stroke="#9ca3af" stroke-opacity="0.28" stroke-width="1"/><text x="50" y="221.20" text-anchor="end" dominant-baseline="middle" font-size="11" fill="#6b7280">100</text><line x1="58" y1="152.80" x2="702.00" y2="152.80" stroke="#9ca3af" stroke-opacity="0.28" stroke-width="1"/><text x="50" y="152.80" text-anchor="end" dominant-baseline="middle" font-size="11" fill="#6b7280">150</text><line x1="58" y1="84.40" x2="702.00" y2="84.40" stroke="#9ca3af" stroke-opacity="0.28" stroke-width="1"/><text x="50" y="84.40" text-anchor="end" dominant-baseline="middle" font-size="11" fill="#6b7280">200</text><line x1="58" y1="16.00" x2="702.00" y2="16.00" stroke="#9ca3af" stroke-opacity="0.28" stroke-width="1"/><text x="50" y="16.00" text-anchor="end" dominant-baseline="middle" font-size="11" fill="#6b7280">250</text><line x1="58" y1="16" x2="58" y2="358" stroke="#9ca3af" stroke-opacity="0.5" stroke-width="1"/><line x1="58" y1="358" x2="702" y2="358" stroke="#9ca3af" stroke-opacity="0.5" stroke-width="1"/><text x="138.50" y="376" text-anchor="middle" font-size="11" fill="#6b7280">Q1</text><text x="299.50" y="376" text-anchor="middle" font-size="11" fill="#6b7280">Q2</text><text x="460.50" y="376" text-anchor="middle" font-size="11" fill="#6b7280">Q3</text><text x="621.50" y="376" text-anchor="middle" font-size="11" fill="#6b7280">Q4</text><polyline data-series="销售额" points="138.50,193.84 299.50,152.80 460.50,111.76 621.50,70.72" fill="none" stroke="#4d6bfe" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/><circle cx="138.50" cy="193.84" r="3" fill="#4d6bfe"><title>销售额 · Q1: 120</title></circle><circle cx="299.50" cy="152.80" r="3" fill="#4d6bfe"><title>销售额 · Q2: 150</title></circle><circle cx="460.50" cy="111.76" r="3" fill="#4d6bfe"><title>销售额 · Q3: 180</title></circle><circle cx="621.50" cy="70.72" r="3" fill="#4d6bfe"><title>销售额 · Q4: 210</title></circle><polyline data-series="成本" points="138.50,248.56 299.50,228.04 460.50,207.52 621.50,193.84" fill="none" stroke="#f59e0b" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/><circle cx="138.50" cy="248.56" r="3" fill="#f59e0b"><title>成本 · Q1: 80</title></circle><circle cx="299.50" cy="228.04" r="3" fill="#f59e0b"><title>成本 · Q2: 95</title></circle><circle cx="460.50" cy="207.52" r="3" fill="#f59e0b"><title>成本 · Q3: 110</title></circle><circle cx="621.50" cy="193.84" r="3" fill="#f59e0b"><title>成本 · Q4: 120</title></circle><g transform="translate(12 402)"><rect width="10" height="10" rx="2" fill="#4d6bfe"/><text x="15" y="9" font-size="11" fill="#6b7280">销售额</text></g><g transform="translate(130 402)"><rect width="10" height="10" rx="2" fill="#f59e0b"/><text x="15" y="9" font-size="11" fill="#6b7280">成本</text></g></svg>
这个工具能做什么
- 把 Excel 复制出来的两列表格粘进来，立刻得到一张能插进文档或 PPT 的折线图 / 柱状图，不用打开图表软件。
- 写技术文档时只需要一张静态图：导出 SVG 源码直接内联进页面，放大不模糊，还能随手改配色。
- 对比多组数据时切到堆叠柱状图或面积图，每列一个系列，图例和网格线都在同一个界面里开关。
- 只有一个维度的占比要展示时用饼图或环形图，8 种图表类型覆盖了大部分临时出图需求。
示例
输入
季度,销售额,成本 Q1,120,80 Q2,150,95 Q3,180,110 Q4,210,120
输出
<svg viewBox="0 0 720 420"> 折线图：y 轴刻度 0/50/100/150/200/250，两个系列各一条 polyline 与 4 个数据点，图例显示「销售额」「成本」
第一列是分类标签，其余列是数值；逗号和制表符都能自动识别，数字里的千分位逗号会被忽略。
常见问题
为什么粘贴进去提示「至少需要两列」或者「数据列里有无法解析的数字」？
表结构固定为「第一列标签 + 其余列数值」，只有一列就无法绘图。某一列出现空单元格、单位符号（120 万）或「暂无」这类文字时也会报错，先清理成纯数字再试。
饼图和环形图报负数或总和为 0 是怎么回事？
饼图只描述占比，负数没有意义，数值全是 0 也画不出扇形，所以这两种情况都会直接报错。换成柱状图或折线图就能正常显示负值。
雷达图为什么至少要 3 行数据？
雷达图用顶点之间的连线围成多边形，少于 3 个轴连不成面。需要画 2 个维度的对比时用柱状图更合适。
数据量有上限吗？
最多 2000 行、24 列。生成的是纯 SVG 文本，行数太多浏览器渲染和阅读都会吃力，超限会提示而不是卡死。
图表会上传到服务器吗？
不会。解析和 SVG 生成都是浏览器本地计算，页面不发任何请求，数据只在你的浏览器里处理，断网也能出图。
关键词：chartchart makersvg chartline chartbar chartpie chartradar chart图表图表生成折线图柱状图饼图雷达图svg 图表