Vega Lite：如何为串联图表创建独立图例

要让每个堆叠条形图只显示自身用到的字段图例，核心是让每个子图的颜色编码仅绑定当前需要的字段，避免全局共享颜色配置导致图例包含所有字段。以下是具体实现方式：

基础实现：独立配置每个子图的颜色字段 #

如果是用concat、hconcat或vconcat组合多个图表，直接在每个子图的encoding.color里单独指定对应字段，Vega Lite会自动为每个图表生成仅包含该字段项的图例。

示例代码：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/movies.json"},
  "concat": [
    // 第一个图表：仅显示MPAA Rating图例
    {
      "mark": "bar",
      "encoding": {
        "x": {"aggregate": "count", "type": "quantitative"},
        "y": {"field": "Major Genre", "type": "nominal"},
        "color": {
          "field": "MPAA Rating",
          "type": "nominal",
          "legend": {"title": "MPAA Rating"}
        }
      }
    },
    // 第二个图表：仅显示Source图例
    {
      "mark": "bar",
      "encoding": {
        "x": {"aggregate": "count", "type": "quantitative"},
        "y": {"field": "Major Genre", "type": "nominal"},
        "color": {
          "field": "Source",
          "type": "nominal",
          "legend": {"title": "Source"}
        }
      }
    }
  ]
}

进阶：动态字段自动生成图例 #

如果需要动态切换字段（比如通过参数控制），可以用表达式自动获取当前字段的唯一值作为图例项，无需手动枚举：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/movies.json"},
  "params": [
    {"name": "targetField", "value": "MPAA Rating", "bind": {"select": {"options": ["MPAA Rating", "Source"]}}}
  ],
  "mark": "bar",
  "encoding": {
    "x": {"aggregate": "count", "type": "quantitative"},
    "y": {"field": "Major Genre", "type": "nominal"},
    "color": {
      "field": {"expr": "targetField"},
      "type": "nominal",
      "legend": {
        // 自动获取当前字段的所有唯一值
        "values": {"expr": "distinct(data('source_0').map(d => d[targetField]))"}
      }
    }
  }
}

注意事项 #

• 不要在全局encoding中定义color字段，否则所有子图会共享该配置，导致图例包含所有字段项。
• 如果使用facet分面展示不同字段的图表，需要在resolve中设置legend: "independent"，确保每个分面的图例独立：

  "resolve": {"legend": {"color": "independent"}}
  

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