Vega-Lite：如何为折线与标记组合图表添加合并图例？

要实现你需要的合并式图例，推荐转换数据为长格式，这是Vega-Lite处理多系列图例最自然的方式，能直接复用官方示例的图例逻辑。以下是具体步骤：

1. 数据格式转换（宽转长） #

你的当前数据是宽格式（每一行包含多个指标），可通过Vega-Lite的fold变换自动转成长格式，无需手动修改原始数据：

"transform": [
  {
    "fold": ["my-score", "max", "avg", "min"], // 指定要展开的字段
    "as": ["score_type", "score_value"] // 新字段名：类型、对应分数
  }
]

转换后的数据结构会变成每行对应一个指标类型，示例如下：

2. 配置图层与图例 #

基于转换后的长数据，通过统一的color编码绑定score_type，就能让同类型的折线+标记自动合并为单个图例项，同时包含柱状图图例：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": { "url": "你的数据源" },
  "transform": [
    {
      "fold": ["my-score", "max", "avg", "min"],
      "as": ["score_type", "score_value"]
    }
  ],
  "layer": [
    // 个人分数柱状图
    {
      "mark": "bar",
      "encoding": {
        "x": {"field": "title", "type": "ordinal"},
        "y": {"field": "score_value", "type": "quantitative"},
        "color": {"field": "score_type", "type": "nominal", "legend": {"title": "分数类型"}}
      },
      "transform": [{"filter": {"field": "score_type", "equal": "my-score"}}]
    },
    // 最高分/平均分/最低分的折线+标记
    {
      "layer": [
        {"mark": "line"},
        {"mark": "circle"}
      ],
      "encoding": {
        "x": {"field": "title", "type": "ordinal"},
        "y": {"field": "score_value", "type": "quantitative"},
        "color": {"field": "score_type", "type": "nominal"},
        "detail": {"field": "score_type"} // 确保每个类型单独生成折线
      },
      "transform": [{"filter": {"field": "score_type", "oneOf": ["max", "avg", "min"]}}]
    }
  ]
}

关键逻辑说明 #

• 统一用color编码绑定score_type：这是让折线、标记、柱状图共享同一图例的核心，Vega-Lite会自动将同颜色的图形元素合并为单个图例项。
• 用transform筛选不同图层的数据：柱状图只保留my-score，折线图层保留max/avg/min，避免数据混淆。

不转换数据的替代方案（不推荐） #

如果坚持使用宽格式，需要手动统一颜色比例尺，并为折线和标记指定相同的图例分组，但步骤繁琐且不易维护：

1. 为每个指标（my-score/max/avg/min）手动设置相同的颜色值。
2. 给折线和标记图层添加legend配置，指定symbolType为"line"，并设置相同的title和values。
   但这种方式无法自动合并折线与标记的图例项，需要额外自定义配置，远不如长格式数据简洁。

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