mailinapp
Documentation menu

桑基图模块

在命名节点之间流动的比例条带——由"从""到""值"这几列数据行构成,例如流量来源 → 落地页 → 转化。当一个普通漏斗图那种单一线性序列不足以展示分支路径时,这就是用来追踪数量在流经一系列阶段时如何分布的图形。

工作原理

与这个系列中的其他每一种图表都不同,桑基图的节点并非直接手动输入——根本没有一列"节点"字段可供填写。相反,节点是从从列和到列中重复出现的标签推导出来的:在某一行的"从"列中输入"已访问",又在另一行的"到"列中输入"已访问",这两处指的就是同一个节点。每个节点从左到右的位置(它所处的纵向层级)同样是计算得出的——通过对你数据行所描述的有向图进行一次最长路径遍历。没有任何流入的节点会从最左侧的层级开始,其他每个节点则位于其最上游前驱节点再往后一层的位置。这些都不是需要你手动摆放的内容。

每条流的值都必须是一个纯粹的正数——一次流动没有有意义的"负值"读数,因此在分组阶段,任何为零或负数的手动输入值都会被丢弃,而不会被绘制成一条反向或零宽度的条带。自环(某一行的"从"和"到"是同一个标签)会被直接跳过,因为一个流向自身的节点,在从左到右的布局中没有意义的条带可画。描述同一"从/到"组合的重复数据行会被相加,而不是相互覆盖——两行都写着"推荐 → 已注册",确实意味着两倍的流量,这与后续编辑本应替换掉的单次测量值不同。

一条流的颜色默认取自其来源节点自身的颜色(桑基图约定俗成的"按来源着色"读法),除非你通过可选的流颜色单元格按行覆盖它。节点颜色本身并不能直接指定——一个节点只会按照首次出现的顺序,占用下一个固定的颜色槽位,这与该系列中其他每一种图表所使用的、基于身份的颜色分配方式相同。

超出节点或链接的上限(12 个节点、24 条链接)后,溢出的节点会被丢弃,而不是合并。这是与饼图或矩形树图处理溢出方式的一处刻意区别。把两个截然不同的流动端点合并成一个合成的"其他"节点,会歪曲这张图实际想要展示的内容,因为桑基图的整个意义就在于追踪彼此不同的路径,而不是概括整体中的某个占比。

任何源节点或目标节点因被裁剪而一并丢弃的链接,同样会被丢弃。不过,数据表仍会列出你手动输入过的每一行,无论它最终是否被画进了图表中——包括因为循环式的输入失误(A → B → A)而没有被绘制、但依然真实存在的流动。你输入的任何内容都不会被悄悄地从视图中抹去。

可配置字段:

  • 图表标题 — 图表上方的可选标题文字。
  • 流(从、到、值) — 数据行列表:一个从标签、一个到标签、一个数值型值,以及可选的按流流颜色覆盖项。
  • 卡片的背景色、内边距、边框和圆角半径。
  • 标题颜色/字号和图例颜色/字号 — 图片下方标题和图例/表格文字的样式。

如果目前还没有输入任何有效的流数据行——所有行都为空、构成自环,或值非正——该模块会跳过图片,只渲染其标题和卡片外框,并显示一条简单的提示:"请至少添加一行流数据(从、到、值)以渲染此图表"。

示例

一张用户旅程图——已访问 → 已注册 → 已购买,再加上一条通往已跳出的分支和一条通往已流失的分支——可以在一张图片中同时呈现流失和分支情况,而这是一个漏斗图会被迫压缩成单一线条、无法做到的。一张预算分配流程图(收入 → 部门预算 → 具体项目)可以为财务汇总提供一条资金逐阶段流动的可视化轨迹。支持团队可以将工单量从渠道(邮件/在线聊天/电话)经由类别(账单/故障/使用方法)流向处理结果(已解决/已升级),从而直观呈现哪些渠道导致了哪些结果。

静态回退效果是什么样子

<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 journey</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="360"
       alt="Flow diagram: Visited to Signed up 120, Visited to Bounced 380, Signed up to Purchased 45, Signed up to Churned 75" />
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600">From</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">To</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Value</th>
    </tr>
    <tr>
      <td style="padding:4px 8px">Visited</td>
      <td style="padding:4px 8px">Signed up</td>
      <td style="padding:4px 8px">120</td>
    </tr>
  </table>
</div>

替代文字列出了每一条被绘制出的流动条带;表格则列出了每一行手动输入过的数据,包括因节点/链接上限或循环式布局而未被绘制出来的那些。

相关内容