Vega-Lite水平堆叠条形图：基于指定字段自定义图例颜色与标签

一、数据集要求 #

确保每条堆叠分段数据同时包含occuring_event和color_name字段，且同一occuring_event对应的color_name唯一——如果存在同一事件对应多种颜色的情况，先清理数据统一映射关系，避免图例混乱。

二、Vega-Lite配置修改 #

放弃手动设置scale range的方式，通过绑定事件字段到颜色编码，并建立事件与颜色的映射来实现需求：

方式1：手动指定事件-颜色映射（直观可控） #

直接在color编码的scale中定义domain（事件列表）和range（对应color_name值），同时配置图例显示：

{
  "mark": "bar",
  "encoding": {
    "x": {"field": "你的数值字段", "type": "quantitative"},
    "y": {"field": "你的分类字段", "type": "nominal"},
    "color": {
      "field": "occuring_event",
      "type": "nominal",
      "scale": {
        "domain": ["事件1", "事件2", "事件3"], // 替换为你的occuring_event唯一值
        "range": ["#ff6b6b", "#4ecdc4", "#45b7d1"] // 对应每个事件的color_name
      },
      "legend": {"title": "事件类型"} // 自定义图例标题
    }
  }
}

方式2：自动从数据提取映射（适配动态数据） #

如果数据是动态的，不想手动维护domain和range，可以通过数据转换自动提取唯一的事件-颜色映射：

{
  "data": {
    "values": [/* 你的原始数据集 */],
    "transform": [
      // 第一步：提取每个事件对应的唯一颜色
      {
        "aggregate": [{"op": "first", "field": "color_name", "as": "event_color"}],
        "groupby": ["occuring_event"],
        "as": "color_map"
      },
      // 第二步：将颜色映射合并回原始数据
      {
        "lookup": "occuring_event",
        "from": {"data": "color_map", "key": "occuring_event", "fields": ["event_color"]}
      }
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "你的数值字段", "type": "quantitative"},
    "y": {"field": "你的分类字段", "type": "nominal"},
    "color": {
      "field": "event_color",
      "type": "nominal",
      "legend": {
        "title": "事件类型",
        // 让图例标签显示occuring_event而非颜色值
        "labelExpr": "lookup(datum.label, data('color_map'), 'event_color', 'occuring_event')"
      }
    }
  }
}

三、原scale range方案失效原因 #

之前的配置仅手动设置了颜色范围，但未将occuring_event与color_name建立明确的映射关联，导致颜色分配和图例标签无法正确匹配。通过上述绑定事件到颜色编码并明确映射的方式，就能让图例自动对应正确的标签和颜色。

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