如何在Vega Lite中按SumA+SumB值单独缩放条形图高度

要实现你要求的条形图高度缩放规则，核心是动态调整不同层级图表的y轴带宽（bandSize），同时固定所有图表的整体高度。具体实现步骤如下：

关键调整点 #

1. 固定所有图表的高度为相同值，满足第一个要求
2. 针对EBENE_1（第一个图表），设置其单个条形高度等于图表总高度
3. 针对EBENE_4（最后一个图表），将总高度平均分配给所有条形，使得所有条形高度之和等于EBENE_1的条形高度
4. 结合SumA+SumB的全局值，为条形高度添加动态缩放比例

修改后的完整配置 #

{
  "data": {
    "values": [
      {"EBENE_1": "A", "EBENE_2": "AA", "EBENE_3": "AAA", "EBENE_4": "AAAA", "STORNO": -70, "EINGANG": 41},
      {"EBENE_1": "A", "EBENE_2": "AA", "EBENE_3": "AAB", "EBENE_4": "AABB", "STORNO": -22, "EINGANG": 81},
      {"EBENE_1": "A", "EBENE_2": "AB", "EBENE_3": "ABC", "EBENE_4": "ABCC", "STORNO": -31, "EINGANG": 89},
      {"EBENE_1": "A", "EBENE_2": "AB", "EBENE_3": "ABDD", "EBENE_4": "ABDD", "STORNO": -28, "EINGANG": 8},
      {"EBENE_1": "A", "EBENE_2": "AC", "EBENE_3": "ACE", "EBENE_4": "ACEE", "STORNO": -39, "EINGANG": 55},
      {"EBENE_1": "A", "EBENE_2": "AC", "EBENE_3": "ACE", "EBENE_4": "ACEF", "STORNO": -78, "EINGANG": 78},
      {"EBENE_1": "A", "EBENE_2": "AC", "EBENE_3": "ACF", "EBENE_4": "ACFG", "STORNO": -99, "EINGANG": 88},
      {"EBENE_1": "A", "EBENE_2": "AC", "EBENE_3": "ACF", "EBENE_4": "ACFH", "STORNO": -85, "EINGANG": 67}
    ]
  },
  "transform": [
    {"joinaggregate": [{"op": "sum", "field": "STORNO", "as": "SumA"}]},
    {"joinaggregate": [{"op": "sum", "field": "EINGANG", "as": "SumB"}]},
    {"calculate": "datum.SumA + datum.SumB", "as": "SumTotal"}
  ],
  "params": [
    {"name": "lowerLimit", "expr": "data('data_0')[0]['SumA']-200"},
    {"name": "upperLimit", "expr": "data('data_0')[0]['SumB']+100"},
    {"name": "baseHeight", "value": 400},
    // 根据实际数据调整基准缩放值，匹配SumTotal的量级
    {"name": "scaleBase", "value": 1000}
  ],
  "repeat": {
    "layer": ["STORNO", "EINGANG"],
    "column": ["EBENE_1", "EBENE_2", "EBENE_3", "EBENE_4"]
  },
  "spec": {
    "height": {"expr": "baseHeight"},
    "width": 300,
    "mark": {"type": "bar"},
    "encoding": {
      "x": {
        "field": {"repeat": "layer"},
        "aggregate": "sum",
        "scale": {
          "domain": [{"expr": "lowerLimit"}, {"expr": "upperLimit"}],
          "zero": true
        }
      },
      "y": {
        "field": {"repeat": "column"},
        "scale": {
          "padding": 0,
          // 动态计算每个层级的条形高度
          "bandSize": {
            "expr": "let total = data('data_0')[0].SumTotal; let catCount = length(unique(data('data_0')[repeat('column')])); repeat('column') === 'EBENE_1' ? baseHeight : (baseHeight / catCount) * (total / scaleBase)"
          }
        }
      }
    }
  }
}

配置说明 #

• 统一图表高度：通过baseHeight参数固定所有图表高度，满足第一个要求
• EBENE_1条形高度：直接将其bandSize设为baseHeight，单个条形占满整个图表高度
• EBENE_4条形高度：将baseHeight平均分配给所有类别，所有条形高度之和等于baseHeight，刚好匹配EBENE_1的条形高度
• SumTotal动态缩放：通过(total / scaleBase)比例因子，让条形高度随SumA+SumB的全局值变化，可根据你的实际数据调整scaleBase的数值
• 无padding布局：将y轴padding设为0，确保条形紧密排列，高度计算更精准

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