如何在Vega-Lite制作Y轴为计数、标签为百分比的堆叠柱状图？

需求说明 #

• X轴为variety
• Y轴为按site分组的计数
• 每个堆叠段上方显示该site在对应variety中的占比（预期为1/6≈16.7%）

原配置代码 #

{
  "data": {"url": "data/barley.json"},
  "width": 400,
    "transform": [    
    {
      "joinaggregate": [{"op": "count", "field": "yield", "as": "col_count", "groupby": "variety"}],
      "groupby": ["variety"],
      "frame": [null, null]
    },
    {
      "joinaggregate": [{"op": "count", "field": "yield", "as": "group_count"}],
      "groupby": ["variety", "site"],
      "frame": [null, null]
    },
    {
      "calculate": "datum.group_count / datum.col_count",
      "as": "variety_percentage",
      "groupby": ["variety", "site"]
    }
  ],
 "encoding": {
    "y": {
      "type": "quantitative",
      "aggregate": "sum",
      "field": "yield",
      "stack": "zero"
    },
    "x": {"type": "nominal", "field": "variety"}
  },
  "layer": [
    {
      "mark": "bar",
      "encoding": {"color": {"type": "nominal", "field": "site"}}
    },
    {
      "mark": {"type": "text", "color": "black", "dx": 0, "dy": -10},
      "encoding": {
        "detail": {"type": "nominal", "field": "variety_percentage"},
        "text": {
          "type": "quantitative",
          "aggregate": "none",
          "field": "variety_percentage",
          "format": ".1%"
        }
      }
    }
  ]
}

问题分析 #

1. Y轴聚合错误：原配置用sum(yield)，但需求是按site分组的计数，应该使用count聚合逻辑
2. 数据转换冗余偏差：原joinaggregate重复分组，未正确关联每个site计数与对应variety总计数的映射关系
3. 文本标记定位失效：文本层未绑定正确的Y轴堆叠位置，导致重复显示或偏移

修正后的配置代码 #

{
  "data": {"url": "data/barley.json"},
  "width": 400,
  "transform": [
    // 按variety+site分组，计算每组计数
    {
      "aggregate": [{"op": "count", "as": "site_count"}],
      "groupby": ["variety", "site"]
    },
    // 按variety计算总计数，关联到每组数据
    {
      "joinaggregate": [{"op": "sum", "field": "site_count", "as": "variety_total"}],
      "groupby": ["variety"]
    },
    // 计算site在对应variety中的占比
    {
      "calculate": "datum.site_count / datum.variety_total",
      "as": "percentage"
    }
  ],
  "encoding": {
    "x": {"type": "nominal", "field": "variety"},
    "y": {
      "type": "quantitative",
      "field": "site_count",
      "stack": "zero",
      "title": "计数"
    }
  },
  "layer": [
    {
      "mark": "bar",
      "encoding": {"color": {"type": "nominal", "field": "site", "title": "站点"}}
    },
    {
      "mark": {"type": "text", "dy": -5, "color": "#000"},
      "encoding": {
        "text": {
          "type": "quantitative",
          "field": "percentage",
          "format": ".1%"
        },
        // 绑定文本到堆叠段顶部位置
        "y": {
          "aggregate": "sum",
          "field": "site_count",
          "stack": "zero"
        }
      }
    }
  ]
}

关键修改说明 #

• Y轴逻辑调整：将Y轴改为基于分组后的site_count实现计数堆叠，匹配需求中的计数逻辑
• 数据转换简化：先聚合分组计数，再关联总计数计算占比，逻辑更直接且无冗余
• 文本定位优化：给文本层Y轴设置与柱状图一致的堆叠聚合，确保文本精准显示在每个堆叠段顶部

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