Vega-lite子弹图添加图例时颜色覆盖、图例重叠问题咨询

你之前的修改错误在于将color编码绑定到了具体的数值字段，Vega-Lite会自动生成连续渐变的色阶，且默认所有图层的color通道共享同一比例尺，因此自定义的固定颜色会被色阶覆盖，同时每个图层单独声明legend会导致多个图例重叠。

核心思路是为每个图层手动绑定类别标识，通过离散色阶映射自定义颜色，仅生成单个统一图例：

1. 每个图层的color编码使用datum属性声明该图层对应的业务含义，不要绑定数值字段
2. 统一配置color通道的比例尺，将类别标识和自定义颜色一一映射
3. 仅声明一次legend配置，避免重复生成

修改后可正常运行的完整代码如下：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"title":"Revenue", "subtitle":"US$, in thousands", "ranges":[150,225,300],"measures":[220,270],"markers":[250]},
      {"title":"Profit", "subtitle":"%", "ranges":[20,25,30],"measures":[21,23],"markers":[26]},
      {"title":"Order Size", "subtitle":"US$, average", "ranges":[350,500,600],"measures":[100,320],"markers":[550]},
      {"title":"New Customers", "subtitle":"count", "ranges":[1400,2000,2500],"measures":[1000,1650],"markers":[2100]},
      {"title":"Satisfaction", "subtitle":"out of 5", "ranges":[3.5,4.25,5],"measures":[3.2,4.7],"markers":[4.4]}
    ]
  },
  "facet": {
    "row": {
      "field": "title", "type": "ordinal",
      "header": {"labelAngle": 0, "title": ""}
    }
  },
  "spacing": 10,
  "spec": {
    "encoding": {
      "x": {
        "type": "quantitative",
        "scale": {"nice": false},
        "title": null
      },
      "color": {
        "scale": {
          "domain": ["最高阈值", "中间阈值", "最低阈值", "测量值上限", "测量值下限", "目标值"],
          "range": ["#eee", "#ddd", "#ccc", "lightsteelblue", "steelblue", "black"]
        },
        "legend": {"orient": "right", "title": "类型"}
      }
    },
    "layer": [
      {
        "mark": {"type": "bar"},
        "encoding": {
          "x": {"field": "ranges[2]"},
          "color": {"datum": "最高阈值"}
        }
      },
      {
        "mark": {"type": "bar"},
        "encoding": {
          "x": {"field": "ranges[1]"},
          "color": {"datum": "中间阈值"}
        }
      },
      {
        "mark": {"type": "bar"},
        "encoding": {
          "x": {"field": "ranges[0]"},
          "color": {"datum": "最低阈值"}
        }
      },
      {
        "mark": {"type": "bar", "size": 10},
        "encoding": {
          "x": {"field": "measures[1]"},
          "color": {"datum": "测量值上限"}
        }
      },
      {
        "mark": {"type": "bar", "size": 10},
        "encoding": {
          "x": {"field": "measures[0]"},
          "color": {"datum": "测量值下限"}
        }
      },
      {
        "mark": {"type": "tick", "thickness": 2},
        "encoding": {
          "x": {"field": "markers[0]"},
          "color": {"datum": "目标值"}
        }
      }
    ]
  },
  "resolve": {"scale": {"x": "independent"}}
}

修改后自定义颜色不会被覆盖，仅生成单个离散图例，每个图例项对应一个图层的颜色和含义，原有分面布局、独立x轴的逻辑均不受影响，完全符合子弹图的展示需求。

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