如何获取堆叠条形图的条形编号及总数？dense_rank窗口函数失效问题

需要在Vega-Lite的堆叠条形图中，为每个按DATE分组的堆叠条形添加编号，并显示总条形数量。尝试使用dense_rank窗口函数未达到预期效果。

原代码示例 #

{
  "data": {
    "values": [
      {"DATE": "2020-02-02", "Category": "AA", "Value": 50},
      {"DATE": "2020-02-02", "Category": "BB", "Value": 50},
      {"DATE": "2020-02-03", "Category": "AA", "Value": 70},
      {"DATE": "2020-02-03", "Category": "BB", "Value": 100},
      {"DATE": "2020-02-04", "Category": "AA", "Value": 110},
      {"DATE": "2020-02-04", "Category": "BB", "Value": 140},
      {"DATE": "2020-02-05", "Category": "AA", "Value": 150},
      {"DATE": "2020-02-05", "Category": "BB", "Value": 190},
      {"DATE": "2020-02-06", "Category": "AA", "Value": 200},
      {"DATE": "2020-02-06", "Category": "BB", "Value": 250}
    ]
  },
  "transform": [
    {"window": [{"op": "dense_rank", "as": "BarNo"}], "sortby": ["DATE"]}
  ],
  "encoding": {
    "x": {"field": "DATE", "type": "nominal"},
    "y": {"field": "Value", "aggregate": "sum", "type": "quantitative"}
  },
  "layer": [
    {"mark": "bar", "encoding": {"color": {"field": "Category"}}},
    {
      "mark": {"type": "text", "dy": -5},
      "encoding": {
        "text": {"field": "BarNo", "aggregate": "min", "type": "quantitative"}
      }
    }
  ]
}

问题分析 #

原代码的dense_rank窗口函数能为同一DATE的行分配相同编号，但缺少总条形数量的计算逻辑，且仅显示单一编号，未满足同时展示总数的需求。

修正后的代码 #

{
  "data": {
    "values": [
      {"DATE": "2020-02-02", "Category": "AA", "Value": 50},
      {"DATE": "2020-02-02", "Category": "BB", "Value": 50},
      {"DATE": "2020-02-03", "Category": "AA", "Value": 70},
      {"DATE": "2020-02-03", "Category": "BB", "Value": 100},
      {"DATE": "2020-02-04", "Category": "AA", "Value": 110},
      {"DATE": "2020-02-04", "Category": "BB", "Value": 140},
      {"DATE": "2020-02-05", "Category": "AA", "Value": 150},
      {"DATE": "2020-02-05", "Category": "BB", "Value": 190},
      {"DATE": "2020-02-06", "Category": "AA", "Value": 200},
      {"DATE": "2020-02-06", "Category": "BB", "Value": 250}
    ]
  },
  "transform": [
    // 为每个DATE分配条形编号
    {"window": [{"op": "dense_rank", "as": "BarNo"}], "sortby": ["DATE"]},
    // 计算总条形数（取BarNo的最大值）
    {"window": [{"op": "max", "field": "BarNo", "as": "TotalBars"}], "frame": [null, null]}
  ],
  "encoding": {
    "x": {"field": "DATE", "type": "nominal"},
    "y": {"field": "Value", "aggregate": "sum", "type": "quantitative"}
  },
  "layer": [
    {"mark": "bar", "encoding": {"color": {"field": "Category"}}},
    {
      "mark": {"type": "text", "dy": -5},
      "encoding": {
        // 显示"编号/总数"格式的文本
        "text": {"signal": "min(datum.BarNo) + ' / ' + min(datum.TotalBars)"}
      }
    }
  ]
}

关键改动说明 #

• 新增第二个window变换：通过max(BarNo)结合全局窗口（frame: [null, null]）计算总条形数，确保每一行数据都能获取总数。
• 修改文本编码：使用signal将编号与总数拼接为X/Y格式的字符串，同时用min()聚合保证同一DATE下的文本内容一致。

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