Vega中按Color聚合分组，拼接Status并求和Duration的实现问题

实现方案 #

在Deneb的Vega配置里，通过组合transform操作就能完成分组求和+字段拼接需求，具体步骤如下：

1. 收集同颜色分组的Status值为数组
   先用window转换按Color分组，把每组的所有Status值收集成一个数组：

   {
     "type": "window",
     "groupby": ["Color"],
     "ops": ["collect"],
     "fields": ["Status"],
     "as": ["StatusList"]
   }
   

   这一步会给每条数据加上对应颜色分组的Status数组，比如所有红色数据都会带上["Pending", "Approved"]这样的数组。

2. 按颜色聚合求和并保留数组
   接着用aggregate转换按Color分组，计算Duration的总和，同时用first操作保留刚才生成的数组（同组内所有数据的数组内容一致，取第一个即可）：

   {
     "type": "aggregate",
     "groupby": ["Color"],
     "fields": ["Duration", "StatusList"],
     "ops": ["sum", "first"],
     "as": ["TotalDuration", "StatusList"]
   }
   

3. 将数组拼接为逗号分隔字符串
   最后用calculate转换，调用Vega的join函数把数组转成逗号分隔的字符串：

   {
     "type": "calculate",
     "as": "CombinedStatus",
     "expr": "join(datum.StatusList, ', ')"
   }
   

   注意：Vega的join和Power BI里的实现不同，它支持动态数组参数，完全能处理datum.StatusList这种从数据集生成的数组。

4. 配置tooltip展示结果
   在图表的tooltip配置里直接引用生成的CombinedStatus和TotalDuration字段即可：

   "tooltip": [
     {"field": "Color", "title": "颜色"},
     {"field": "TotalDuration", "title": "总时长"},
     {"field": "CombinedStatus", "title": "关联状态"}
   ]
   

完整示例配置 #

把以上步骤整合到完整的Vega配置中，用示例数据测试：

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "data": {
    "values": [
      {"Color": "Red", "Status": "Pending", "Duration": 10},
      {"Color": "Red", "Status": "Approved", "Duration": 20},
      {"Color": "Blue", "Status": "Rejected", "Duration": 15},
      {"Color": "Blue", "Status": "Pending", "Duration": 5}
    ]
  },
  "transform": [
    {
      "type": "window",
      "groupby": ["Color"],
      "ops": ["collect"],
      "fields": ["Status"],
      "as": ["StatusList"]
    },
    {
      "type": "aggregate",
      "groupby": ["Color"],
      "fields": ["Duration", "StatusList"],
      "ops": ["sum", "first"],
      "as": ["TotalDuration", "StatusList"]
    },
    {
      "type": "calculate",
      "as": "CombinedStatus",
      "expr": "join(datum.StatusList, ', ')"
    }
  ],
  "mark": "bar",
  "encoding": {
    "x": {"field": "Color", "type": "nominal"},
    "y": {"field": "TotalDuration", "type": "quantitative"},
    "color": {"field": "Color", "type": "nominal"},
    "tooltip": [
      {"field": "Color", "title": "颜色"},
      {"field": "TotalDuration", "title": "总时长"},
      {"field": "CombinedStatus", "title": "关联状态"}
    ]
  }
}

关键提示 #

• collect是实现数组收集的核心，它能把分组后的字段值打包成数组，这是拼接字符串的基础
• 聚合时用first保留数组是因为同组内的所有数据对应的数组内容完全相同，无需重复处理
• Vega的join函数支持动态数组，不用担心像Power BI那样只能处理字面量数组的问题

内容的提问来源于stack exchange，提问作者Jaap V.