如何使用Vega Lite的Transform实现堆叠柱状图的Top N展示？

堆叠柱状图实现Top N的核心是先筛选出总数值最高的前N个主分类，再保留这些分类下的所有堆叠项数据。以下是具体的Transform实现方案：

核心步骤与代码示例 #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "你的数据源地址"},
  "transform": [
    // 1. 计算每个主分类的总数值，选出Top N分类
    {
      "aggregate": [{"op": "sum", "field": "数值字段", "as": "分类总值"}],
      "groupby": ["主分类字段"],
      "as": ["主分类字段", "分类总值"]
    },
    {"window": [{"op": "rank", "field": "分类总值", "as": "排名"}], "sort": [{"field": "分类总值", "order": "descending"}]},
    {"filter": "datum.排名 <= 5"}, // 这里设置Top 5，可按需修改N值
    {"project": ["主分类字段"]}, // 仅保留Top N的分类名称

    // 2. 关联原始数据，过滤出属于Top N分类的所有堆叠项
    {
      "lookup": "主分类字段",
      "from": {
        "data": {"url": "你的数据源地址"},
        "key": "主分类字段"
      },
      "as": "堆叠项数据"
    },
    {"flatten": ["堆叠项数据"]},
    {"project": ["堆叠项数据.主分类字段", "堆叠项数据.子分类字段", "堆叠项数据.数值字段"], "as": ["主分类", "子分类", "数值"]}
  ],
  "mark": "bar",
  "encoding": {
    "x": {"field": "主分类", "type": "nominal"},
    "y": {"field": "数值", "type": "quantitative", "aggregate": "sum"},
    "color": {"field": "子分类", "type": "nominal"},
    "order": {"field": "子分类", "type": "nominal"}
  }
}

关键Transform说明 #

• 聚合与排名：先按主分类聚合求和，用窗口函数对总值降序排名，过滤出前N个分类；
• Lookup关联：将Top N分类列表与原始数据关联，匹配每个分类对应的所有子分类数据；
• 数据扁平化：通过flatten展开嵌套的堆叠项数据，再用project整理成绘图所需的扁平结构。

注意事项 #

• 若使用内联数据，将{"url": "你的数据源地址"}替换为{"values": [你的数据数组]}；
• 替换代码中主分类字段、子分类字段、数值字段为你的实际字段名；
• 调整filter中的排名 <= 5来设置想要的Top N数量。

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