技术问询：如何用Vega实现带小计的Waterfall Chart？

Vega（含Vega-Lite）支持实现带小计功能的瀑布图，核心是通过数据预处理或内置计算变换调整柱子的起始位置，模拟Excel、Tableau中的小计效果。

实现思路 #

• 数据预处理：提前计算累计值，针对小计行之后的条目，将其起始基准设为小计的累计值，而非常规的前序累计值。
• 内置计算变换：用window变换计算全局累计，再通过条件判断区分普通行与小计行，动态调整后续条目的起始值。
• 自定义编码：在y和y2编码中分别指定柱子的结束值与起始值，小计行可设置为实心柱（从0到累计值），后续条目基于小计值继续计算。

关键配置示例（Vega-Lite） #

{
  "data": {"values": [
    {"category": "初始值", "value": 100},
    {"category": "收入1", "value": 50},
    {"category": "收入2", "value": 30},
    {"category": "小计", "isSubtotal": true},
    {"category": "支出1", "value": -40},
    {"category": "支出2", "value": -20},
    {"category": "总计", "isTotal": true}
  ]},
  "transform": [
    {
      "window": [{"op": "sum", "field": "value", "as": "cumulative"}],
      "frame": [null, 0]
    },
    {
      "calculate": "datum.isSubtotal ? datum.cumulative : (datum.category === '总计' ? datum.cumulative : null)",
      "as": "subtotalValue"
    },
    {
      "calculate": "datum.isSubtotal ? 0 : (datum.subtotalValue ? datum.subtotalValue : (datum.cumulative - datum.value))",
      "as": "yStart"
    },
    {
      "calculate": "datum.isSubtotal ? datum.cumulative : datum.cumulative",
      "as": "yEnd"
    }
  ],
  "mark": {"type": "bar", "tooltip": true},
  "encoding": {
    "x": {"field": "category", "type": "ordinal"},
    "y": {"field": "yEnd", "type": "quantitative"},
    "y2": {"field": "yStart"},
    "color": {
      "condition": [
        {"test": "datum.isSubtotal || datum.isTotal", "value": "#888"},
        {"test": "datum.value > 0", "value": "#2ecc71"},
        {"test": "datum.value < 0", "value": "#e74c3c"}
      ],
      "value": "#bdc3c7"
    }
  }
}

说明 #

• window变换计算全局累计值，calculate逻辑区分小计行与普通行，动态生成柱子的起始/结束坐标。
• 小计行设置为实心柱，后续条目自动基于小计的累计值作为起始基准，实现连贯的瀑布流效果。
• 颜色编码区分收入、支出、小计/总计，提升图表可读性。

内容的提问来源于stack exchange，提问作者Antonymous