瀑布图模块

一种展示累计走势的图表——一个起始值,后面跟着一系列增加和减少的条形,悬浮在每一步之前和之后的累计值之间,还可以在中途或末尾落在一根手动输入的"合计"条上。这是"收入桥"这类展示的标准形态:"期初 MRR" → 新增业务 → 扩展收入 → 流失 → "期末 MRR"。

工作原理

每一行手动输入的数据会变成一根条形,它要么给累计值加上一个带符号的增量(增加或减少),要么直接把累计值重置为一个绝对数值(合计或小计锚点)。这与漏斗图之间是真实的几何差异,而不只是样式差异。漏斗图的条形始终从零开始并单调收窄。瀑布图的条形则是悬浮的:它的左边缘停在累计值原本所在的位置,右边缘停在它最终到达的位置,而这个位置可以向任意方向移动。

增加、减少和合计条形始终使用同一套固定的三种颜色绘制,增加/减少这一对颜色永远不允许手动覆盖。这与产品对所有状态颜色执行的"红色始终代表不好"这条信任规则是一致的,因此瀑布图在每一封邮件中的读法都是一致的,而不会随着你上一次挑选的颜色而变化。只有中性的合计颜色是真正可以手动设置的选项,留空时默认使用项目的品牌色。

图片下方始终可见的数据表会重复每根条形的标签、数值、类型(增加/减少/合计),以及该条形之后的累计值。累计值这一列是这种图表类型独有的数字,因为只有一系列悬浮的增量才具有"这根条形之后情况如何"这种有意义的读数。图例只会列出手动输入的条形中实际存在的角色——如果没有合计条形,图表就不会显示一个没人用到的"合计"色块。

与漏斗图一样,条形顺序本身就是数据:累计值的计算取决于你手动输入行数据的顺序。超过 8 根条形之后,超出上限的部分会被直接丢弃,而不会像饼图/矩形树图处理溢出切片那样被折叠进一个合成分类——把两根条形合并会悄无声息地破坏其后每一根条形所依赖的累计值。空白标签或无法解析的数值会被跳过,而不会被计为一根数值为零的真实条形。

可配置字段:

图表标题——图表上方的可选标题文字。
条形(按顺序)——行列表:一个标签、一个数字数值(带符号的增量,若该行被标记为合计则为绝对数值),以及一个类型单元格——填写 total(不区分大小写)可将该行设为绝对锚点;其他任何内容,包括空白单元格,都视为普通增量。
合计颜色——覆盖合计/小计条形使用的中性颜色;留空则使用项目的品牌色。增加和减少的颜色不可配置。
卡片的背景色、内边距、边框与圆角半径。
标题颜色/字号与图例颜色/字号——图片下方标题和图例/表格文字的样式设置。

如果还没有输入任何条形,该模块会渲染标题和卡片外框,并用一条朴素的"请至少添加一行数据以渲染此图表"提示替代图片。

示例

一份月度收入桥报告——期初 MRR、新增业务、扩展收入、流失、期末 MRR——是最典型的用法,放进董事会更新或投资者简报中,让读者无需附带一张电子表格就能看清究竟是什么推动了这个数字的变化。一份人力报告可以为月度运营总结搭建"期初人数 → 新招聘 → 离职 → 期末人数"的桥接图。追踪某项功能上线情况的产品团队,可以用一根起始预算条形对比消耗该预算的各类事故,最终落在一根剩余预算的合计条形上。

静态回退效果是什么样子

<div style="margin:12px 0;background-color:#ffffff;padding:16px">
  <p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Monthly MRR bridge</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="280"
       alt="Waterfall: Starting MRR 12,000 (total) → New business +3,200 → Expansion +1,400 → Churn -1,800 → Ending MRR 14,800 (total)" />
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Label</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">Type</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Running total</th>
    </tr>
    <tr>
      <td style="padding:4px 8px">Churn</td>
      <td style="padding:4px 8px">-1,800</td>
      <td style="padding:4px 8px">Decrease</td>
      <td style="padding:4px 8px">13,000</td>
    </tr>
  </table>
</div>

<img> 的 alt 文本详细说明了每根条形的数值和角色;表格则补充了这张桥接图之所以得名的累计值这一栏。

瀑布图模块

工作原理

示例

静态回退效果是什么样子

相关内容