在线做图 · 折线图 折线图制作
第一列放日期或周期,后面一列一条线。每条线在末尾直接标名称,缺的数据留断口而不是画成 0,纵轴按数据范围自动调整。
- 支持 Excel / WPS / 飞书粘贴
- PNG、SVG、内嵌代码
- 本地运行
贴数据,选图型
第一列是类别(或横轴),后面每一列是一组数据;第一行是名称时自动当表头。桑基图换成一行一条「来源, 去向, 数值」。
从表格复制的(Tab 分隔)、逗号或分号分隔都行。1,200、12%、¥5.4、1.2万、−30 都能识别成数字。
在左边粘贴表格就会出图。
每步转化
内嵌 SVG 代码
可以直接贴进 HTML 页面、支持 HTML 的 CMS 区块或 Markdown 文件。图会随容器缩放,并带读屏软件能读的标题。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680 360" width="680" height="360" font-family="Inter,"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif" role="img" aria-label="每周访问量,今年对比去年" style="display:block;max-width:100%;height:auto;margin:0 auto"><title>每周访问量,今年对比去年</title><desc>2026年: 第1周 3,200, 第2周 3,450, 第3周 3,300, 第4周 3,900, 第5周 4,150, 第6周 4,420, 第7周 4,380, 第8周 4,760; 2025年: 第1周 2,900, 第2周 3,050, 第3周 3,100, 第4周 3,150, 第5周 3,300, 第6周 3,380, 第7周 3,500, 第8周 3,560</desc><rect width="680" height="360" fill="#ffffff"/><text x="16" y="28" font-size="16" font-weight="700" fill="#0b0f19">每周访问量,今年对比去年</text><rect x="16" y="46" width="10" height="10" rx="2" fill="#2050f0"/><text x="31" y="55" font-size="12" fill="#4b5563">2026年</text><rect x="90.7" y="46" width="10" height="10" rx="2" fill="#eb6834"/><text x="105.7" y="55" font-size="12" fill="#4b5563">2025年</text><path d="M55.46000000000001 330H614.8" stroke="#d1d5db" stroke-width="1"/><path d="M55.46000000000001 278H614.8" stroke="#e5e7eb" stroke-width="1"/><path d="M55.46000000000001 226H614.8" stroke="#e5e7eb" stroke-width="1"/><path d="M55.46000000000001 174H614.8" stroke="#e5e7eb" stroke-width="1"/><path d="M55.46000000000001 122H614.8" stroke="#e5e7eb" stroke-width="1"/><path d="M55.46000000000001 70H614.8" stroke="#e5e7eb" stroke-width="1"/><path d="M55.5 257.2L135.4 231.2L215.3 246.8L295.2 184.4L375.1 158.4L455 130.3L534.9 134.5L614.8 95" fill="none" stroke="#2050f0" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/><g><title>第1周 · 2026年: 3,200</title><circle cx="55.5" cy="257.2" r="4" fill="#2050f0" stroke="#fff" stroke-width="2"/><circle cx="55.5" cy="257.2" r="9" fill="transparent"/></g><g><title>第2周 · 2026年: 3,450</title><circle cx="135.4" cy="231.2" r="4" fill="#2050f0" stroke="#fff" stroke-width="2"/><circle cx="135.4" cy="231.2" r="9" fill="transparent"/></g><g><title>第3周 · 2026年: 3,300</title><circle cx="215.3" cy="246.8" r="4" fill="#2050f0" stroke="#fff" stroke-width="2"/><circle cx="215.3" cy="246.8" r="9" fill="transparent"/></g><g><title>第4周 · 2026年: 3,900</title><circle cx="295.2" cy="184.4" r="4" fill="#2050f0" stroke="#fff" stroke-width="2"/><circle cx="295.2" cy="184.4" r="9" fill="transparent"/></g><g><title>第5周 · 2026年: 4,150</title><circle cx="375.1" cy="158.4" r="4" fill="#2050f0" stroke="#fff" stroke-width="2"/><circle cx="375.1" cy="158.4" r="9" fill="transparent"/></g><g><title>第6周 · 2026年: 4,420</title><circle cx="455" cy="130.3" r="4" fill="#2050f0" stroke="#fff" stroke-width="2"/><circle cx="455" cy="130.3" r="9" fill="transparent"/></g><g><title>第7周 · 2026年: 4,380</title><circle cx="534.9" cy="134.5" r="4" fill="#2050f0" stroke="#fff" stroke-width="2"/><circle cx="534.9" cy="134.5" r="9" fill="transparent"/></g><g><title>第8周 · 2026年: 4,760</title><circle cx="614.8" cy="95" r="4" fill="#2050f0" stroke="#fff" stroke-width="2"/><circle cx="614.8" cy="95" r="9" fill="transparent"/></g><path d="M55.5 288.4L135.4 272.8L215.3 267.6L295.2 262.4L375.1 246.8L455 238.5L534.9 226L614.8 219.8" fill="none" stroke="#eb6834" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/><g><title>第1周 · 2025年: 2,900</title><circle cx="55.5" cy="288.4" r="4" fill="#eb6834" stroke="#fff" stroke-width="2"/><circle cx="55.5" cy="288.4" r="9" fill="transparent"/></g><g><title>第2周 · 2025年: 3,050</title><circle cx="135.4" cy="272.8" r="4" fill="#eb6834" stroke="#fff" stroke-width="2"/><circle cx="135.4" cy="272.8" r="9" fill="transparent"/></g><g><title>第3周 · 2025年: 3,100</title><circle cx="215.3" cy="267.6" r="4" fill="#eb6834" stroke="#fff" stroke-width="2"/><circle cx="215.3" cy="267.6" r="9" fill="transparent"/></g><g><title>第4周 · 2025年: 3,150</title><circle cx="295.2" cy="262.4" r="4" fill="#eb6834" stroke="#fff" stroke-width="2"/><circle cx="295.2" cy="262.4" r="9" fill="transparent"/></g><g><title>第5周 · 2025年: 3,300</title><circle cx="375.1" cy="246.8" r="4" fill="#eb6834" stroke="#fff" stroke-width="2"/><circle cx="375.1" cy="246.8" r="9" fill="transparent"/></g><g><title>第6周 · 2025年: 3,380</title><circle cx="455" cy="238.5" r="4" fill="#eb6834" stroke="#fff" stroke-width="2"/><circle cx="455" cy="238.5" r="9" fill="transparent"/></g><g><title>第7周 · 2025年: 3,500</title><circle cx="534.9" cy="226" r="4" fill="#eb6834" stroke="#fff" stroke-width="2"/><circle cx="534.9" cy="226" r="9" fill="transparent"/></g><g><title>第8周 · 2025年: 3,560</title><circle cx="614.8" cy="219.8" r="4" fill="#eb6834" stroke="#fff" stroke-width="2"/><circle cx="614.8" cy="219.8" r="9" fill="transparent"/></g><text x="622.8" y="99" font-size="11" font-weight="600" fill="#0b0f19">2026年</text><text x="622.8" y="223.8" font-size="11" font-weight="600" fill="#0b0f19">2025年</text><text x="47.5" y="334" text-anchor="end" font-size="11" fill="#6b7280">2,500</text><text x="47.5" y="282" text-anchor="end" font-size="11" fill="#6b7280">3,000</text><text x="47.5" y="230" text-anchor="end" font-size="11" fill="#6b7280">3,500</text><text x="47.5" y="178" text-anchor="end" font-size="11" fill="#6b7280">4,000</text><text x="47.5" y="126" text-anchor="end" font-size="11" fill="#6b7280">4,500</text><text x="47.5" y="74" text-anchor="end" font-size="11" fill="#6b7280">5,000</text><text x="55.5" y="348" text-anchor="start" font-size="11" fill="#4b5563">第1周</text><text x="135.4" y="348" text-anchor="middle" font-size="11" fill="#4b5563">第2周</text><text x="215.3" y="348" text-anchor="middle" font-size="11" fill="#4b5563">第3周</text><text x="295.2" y="348" text-anchor="middle" font-size="11" fill="#4b5563">第4周</text><text x="375.1" y="348" text-anchor="middle" font-size="11" fill="#4b5563">第5周</text><text x="455" y="348" text-anchor="middle" font-size="11" fill="#4b5563">第6周</text><text x="534.9" y="348" text-anchor="middle" font-size="11" fill="#4b5563">第7周</text><text x="614.8" y="348" text-anchor="end" font-size="11" fill="#4b5563">第8周</text></svg>版本 v1.0更新于 更新记录
什么数据适合做折线图
把点连成线,等于告诉读者「这些值是同一个量随时间的变化」。只有这是真的时候才用。
等间隔的时间
天、周、月。有哪一期缺数,就把格子留空:线会断开,而不是一条直线跨过空档。
同一个单位、一个纵轴
访问量和销售额放一张图就得两个纵轴,而双轴会误导。做两张图,或都换算成以 100 为起点的指数。
两到四条线
每条线在末尾标名称,不用来回看图例。超过 4 条,突出一条、其余变灰,或拆成几张小图。
类别不能连线
渠道、省份之间没有先后,用线连起来就暗示了一个不存在的趋势。用柱状图。
数据离 0 不远时纵轴从 0 开始,否则自动放大,让 5% 的趋势也看得出来。柱状图永远不放大。
从表格到 PPT 四步
一边改,图一边重画。
-
1
复制单元格
在 Excel、WPS 或飞书表格里选中数据(连表头一起)复制;也可以直接粘贴 CSV 文本。
-
2
粘贴,选图型
第一列当类别,其余每列是一组数据。选好图型,图下面的检查会告诉你数据适不适合这种图。
-
3
调整
加标题、换配色、柱子从大到小排、名称长就改成横向、多列数据选并排或堆叠。
-
4
导出
PNG 放 PPT、微信和钉钉;SVG 用于印刷和设计软件;内嵌代码贴进网页。
解析规则
工具尽量少猜;不得不猜的地方会明说。
- 分隔符:只要有 Tab 就按 Tab 分(从表格复制出来就是这样),否则在逗号、分号、竖线里选列数最一致的那个。支持带引号的 CSV。
- 表头:第一行里除第一列外只要有一格不是数字,就当表头。
- 数字:千分位、货币符号、末尾的 %、负号或会计括号、全角数字、万 / 亿 / k 都能识别;读不出来的按空值处理并列出来。
- 上限:200 行、8 列数字。饼图保留最大的 7 块,其余合并成「其它」。
| 图型 | 列 | 示例行 |
|---|---|---|
| 柱状图 / 折线图 | 名称, 数值, [数值…] | 1月, 1240, 860 |
| 饼图 | 名称, 数值(正数) | 抖音, 860 |
| 漏斗图 | 步骤, 人数(按顺序) | 加入购物车, 1248 |
| 桑基图 | 来源, 去向, 数值 | 百度搜索, 价格页, 150 |
同一张表,三种说法
默认数据是 5 个月里官网、App、小程序三端的注册人数。同样的数,换一种图回答的是不同的问题。
| 问题 | 用什么图 | 看到什么 |
|---|---|---|
| 哪一端来的人最多? | 柱状图,并排 | 每个月都是小程序最多,官网第二。 |
| 总数在涨吗? | 柱状图,堆叠 | 合计从 1 月的 3,410 涨到 5 月的 4,450。 |
| 哪一端涨得最快? | 折线图 | 小程序涨 42%(1,310 → 1,860),App 26%,官网 22%。 |
| 5 月小程序占多少? | 饼图(只放 5 月) | 1,860 ÷ 4,450 = 41.8%。 |
增长率 =(5 月 − 1 月)÷ 1 月。只把 5 月那一列贴进饼图,就能自己核对占比。
数都对,图却误导人
每个数字都没错,图照样能给人错误的印象。
柱状图纵轴不从 0 开始
柱子的长度就是数值。纵轴从 900 截断,950 看起来就是 925 的两倍。本工具的柱子一律从 0 起;折线可以放大。
饼图里混进合计行
把「合计」和各部分一起贴进来,每块都只剩真实大小的一半。某一行等于其它行之和时,工具会提醒。
双纵轴
有两套刻度时,两条线在哪儿交叉,完全由设刻度的人决定。做两张图,或把两组数都换算成以 100 为起点的指数。
只靠颜色区分
大约每 12 个男性里就有 1 个有某种色觉异常。这里每张图都同时用图例或标签写出名称。
会自己更新的图
粘贴出来的图是一张快照。在 TapCub 里,同样的图由实时事件生成,自动刷新。