漏斗图模块

一种展示"访问 → 注册 → 购买"这类递进阶段序列的图表,每个阶段都以序列起点的阶段为基准来衡量。它要回答的是一个普通柱状图回答不了的问题:不只是每个阶段有多大,而是原始受众中有多少走到了这一步。

工作原理

图表将每个手动输入的阶段绘制为一条水平条形,随着数值下降从左到右逐渐收窄——这与产品中其他地方用于表现互动漏斗的视觉语言一致。它使用的是一种顺序色阶(同一色相,按阶段位置深浅渐变)着色,而不是其他图表使用的分类调色板。这个区别很重要:漏斗的一个阶段并不像饼图切片或柱状图系列那样是一个独立的身份,而是一个有序序列中的一个位置,颜色也如实反映了这一点。

图片下方始终配有一张不可省略的数据表——这不是可选项,因为正是这张表让该模块在纯文本客户端、图片被屏蔽的收件箱,以及屏幕阅读器中都可用。漏斗图的表格携带了两个图片本身无法展示的数字:

占首阶段的百分比——该阶段数值占第一个阶段的百分比,即"原始受众还剩下多少"的读数。
占上一阶段的百分比——该阶段数值占其前一个阶段的百分比,即漏斗图存在的意义所在——逐级流失情况。

阶段顺序本身就是数据。由于漏斗图的含义完全取决于你手动输入阶段的顺序,因此不能像饼图或矩形树图那样在空间不够时把溢出的阶段折叠进一个"其他"分类。把两个阶段合并会歪曲整个序列的形态。因此,超过 8 个阶段之后,超出上限的部分会被直接忽略(既不绘制也不列入表格)。空白标签、无法解析的数值,或负值都会被直接跳过——漏斗的一个阶段不可能是负数,因此低于零的数值会被当作未填写处理,而不是当作数值为零的真实阶段。

可配置字段:

图表标题——图表上方的可选标题文字。
阶段(按顺序)——行列表本身:每行包含一个阶段标签和一个数字数值,按阶段推进的顺序手动输入。没有单独的按行颜色字段——一个阶段的颜色永远由它的位置决定,而不是逐行挑选。
色阶颜色——覆盖顺序色阶的基础色相;留空则使用项目的品牌色。
卡片的背景色、内边距、边框与圆角半径。
标题颜色/字号与图例颜色/字号——图片下方标题和图例/表格文字的样式设置。

如果还没有输入任何阶段,该模块会渲染标题和卡片外框,并用一条朴素的"请至少添加一行数据以渲染此图表"提示替代图片。这样一来,编辑过程中就不会出现损坏或空白的图表。

示例

一份"注册到购买"的报告(访问、注册、加入购物车、购买)可以让团队直观看到流失情况。一封支持或引导入门邮件可以追踪一个多步骤的设置流程(创建账户 → 完善资料 → 创建首个项目 → 邀请队友),精确找出新用户卡住的位置。运营网络研讨会的内容团队可以绘制"注册 → 出席 → 提问 → 请求跟进"来了解注册名单中究竟有多少人真正参与了直播互动。

静态回退效果是什么样子

<div style="margin:12px 0;background-color:#ffffff;padding:16px">
  <p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Signup funnel</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="280"
       alt="Funnel: Visited 1,000 (100%) → Signed up 420 (42%) → Added to cart 180 (18%) → Purchased 95 (9.5%)" />
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Stage</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Value</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">% of first</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">% of previous</th>
    </tr>
    <tr>
      <td style="padding:4px 8px">Signed up</td>
      <td style="padding:4px 8px">420</td>
      <td style="padding:4px 8px">42%</td>
      <td style="padding:4px 8px">42%</td>
    </tr>
  </table>
</div>

<img> 的 alt 文本中包含了每个阶段的完整文字说明,下方的表格以可选中的 HTML 文本重复了相同的数字——包括图片本身没有画出的流失率一列。

漏斗图模块

工作原理

示例

静态回退效果是什么样子

相关内容