在线做图 · 漏斗图 漏斗图制作
按顺序粘贴步骤和到达每一步的人数。图上同时标出较上一步和较第一步的转化率,下面的表列出每一步流失了多少人。
- 支持 Excel / WPS / 飞书粘贴
- PNG、SVG、内嵌代码
- 本地运行
贴数据,选图型
第一列是类别(或横轴),后面每一列是一组数据;第一行是名称时自动当表头。桑基图换成一行一条「来源, 去向, 数值」。
从表格复制的(Tab 分隔)、逗号或分号分隔都行。1,200、12%、¥5.4、1.2万、−30 都能识别成数字。
在左边粘贴表格就会出图。
每步转化
| 步骤 | 人数 | 较上一步 | 较第一步 | 变化 |
|---|---|---|---|---|
| 浏览商品 | 2,400 | — | 100.0% | — |
| 加入购物车 | 1,248 | 52.0% | 52.0% | -1,152 |
| 提交订单 | 674 | 54.0% | 28.1% | -574 |
| 支付成功 | 508 | 75.4% | 21.2% | -166 |
内嵌 SVG 代码
可以直接贴进 HTML 页面、支持 HTML 的 CMS 区块或 Markdown 文件。图会随容器缩放,并带读屏软件能读的标题。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680 286" width="680" height="286" font-family="Inter,"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif" role="img" aria-label="下单漏斗(近 30 天)" style="display:block;max-width:100%;height:auto;margin:0 auto"><title>下单漏斗(近 30 天)</title><desc>浏览商品 2,400 → 加入购物车 1,248 → 提交订单 674 → 支付成功 508</desc><rect width="680" height="286" fill="#ffffff"/><text x="16" y="28" font-size="16" font-weight="700" fill="#0b0f19">下单漏斗(近 30 天)</text><text x="664" y="54" text-anchor="end" font-size="11" fill="#6b7280">总转化</text><rect x="88" y="62" width="512" height="34" rx="4" fill="#2050f0"><title>浏览商品: 2,400 · 100.0%</title></rect><text x="76" y="83" text-anchor="end" font-size="12" fill="#0b0f19">浏览商品</text><text x="344" y="83" text-anchor="middle" font-size="12" font-weight="600" fill="#ffffff">2,400</text><text x="664" y="83" text-anchor="end" font-size="12" font-weight="600" fill="#0b0f19">100.0%</text><rect x="210.9" y="120" width="266.2" height="34" rx="4" fill="#2050f0"><title>加入购物车: 1,248 · 52.0%</title></rect><text x="76" y="141" text-anchor="end" font-size="12" fill="#0b0f19">加入购物车</text><text x="344" y="141" text-anchor="middle" font-size="12" font-weight="600" fill="#ffffff">1,248</text><text x="664" y="141" text-anchor="end" font-size="12" font-weight="600" fill="#0b0f19">52.0%</text><text x="344" y="112" text-anchor="middle" font-size="11" fill="#6b7280">↓ 52.0%</text><rect x="272.1" y="178" width="143.8" height="34" rx="4" fill="#2050f0"><title>提交订单: 674 · 28.1%</title></rect><text x="76" y="199" text-anchor="end" font-size="12" fill="#0b0f19">提交订单</text><text x="344" y="199" text-anchor="middle" font-size="12" font-weight="600" fill="#ffffff">674</text><text x="664" y="199" text-anchor="end" font-size="12" font-weight="600" fill="#0b0f19">28.1%</text><text x="344" y="170" text-anchor="middle" font-size="11" fill="#6b7280">↓ 54.0%</text><rect x="289.8" y="236" width="108.4" height="34" rx="4" fill="#2050f0"><title>支付成功: 508 · 21.2%</title></rect><text x="76" y="257" text-anchor="end" font-size="12" fill="#0b0f19">支付成功</text><text x="344" y="257" text-anchor="middle" font-size="12" font-weight="600" fill="#ffffff">508</text><text x="664" y="257" text-anchor="end" font-size="12" font-weight="600" fill="#0b0f19">21.2%</text><text x="344" y="228" text-anchor="middle" font-size="11" fill="#6b7280">↓ 75.4%</text></svg>版本 v1.0更新于 更新记录
什么数据适合做漏斗图
漏斗图只用于一条有先后顺序的路径,而且每一步都是上一步的子集:同一批人,越往后越少。
同一条路径上的有序步骤
访问 → 注册 → 激活 → 付费。顺序本身就是数据,所以排序选项不生效。
每一步是上一步的子集
只有加了购物车的人才能提交订单。后一步更大,说明混了路径,或者一步按次数、一步按人数算;工具会标出来。
两个转化率
「较上一步」找漏得最多的那一步;「较第一步」是整体转化。示例里浏览到加购只有 52%,而提交订单的人有 75% 付了款。
不相关的总数不能用
不同时间段、不同人群的访问数、注册数、订单数只是三个数字。用柱状图。
每步转化 = 本步 ÷ 上一步;整体转化 = 本步 ÷ 第一步。示例数据和 TapCub 行为分析页上的下单漏斗一致。
从表格到 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 里,同样的图由实时事件生成,自动刷新。
漏斗转化率怎么算?
每一步除以上一步是每步转化,除以第一步是整体转化。示例:1,248 ÷ 2,400 = 52%,整体 508 ÷ 2,400 = 21.2%。
为什么我的漏斗越往下越宽?
某一步的人数比上一步多。通常是一步按次数、另一步按人数算,或者用户可以从中间进入。该改的是口径,不是图。
用漏斗图还是柱状图?
各步骤是一条路径、重点是步骤之间的流失时用漏斗图;比较互不包含的总数用柱状图。
能比较两个漏斗吗?
按人群各画一个,比较每步转化率;或者用漏斗计算器,它会标出漏得最多的一步。