如何在Vega-Lite图例中添加不同标记类型及自定义规则标记

当然可行，你可以通过给规则添加自定义数据并映射编码的方式，让每个规则都在图例中显示对应的名称。下面是调整后的完整代码示例，我添加了两个规则分别标注"阈值1"和"阈值2"：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"X": 1, "Y": 2, "Series": "A"}, 
      {"X": 1, "Y": 3, "Series": "B"}, 
      {"X": 2, "Y": 3, "Series": "A"}, 
      {"X": 2, "Y": 4, "Series": "B"}, 
      {"X": 3, "Y": 4, "Series": "A"}, 
      {"X": 3, "Y": 5, "Series": "B"},
      {"X": 4, "Y": 3, "Series": "A"}, 
      {"X": 4, "Y": 4, "Series": "B"},
      {"X": 5, "Y": 2, "Series": "A"}, 
      {"X": 5, "Y": 3, "Series": "B"}
    ]
  },
  "encoding": {
    "x": {"field": "X", "type": "nominal"},
    "y": {"field": "Y", "aggregate": "sum", "type": "quantitative"},
    "color": {"field": "Series"}
  },
  "layer":[
    {
      "mark":"bar"
    },
    {
      "data": {
        "values": [
          {"ruleName": "阈值1", "yValue": 6, "color": "red", "dash": [8,4]},
          {"ruleName": "阈值2", "yValue": 10, "color": "blue", "dash": [4,2]}
        ]
      },
      "mark": {
        "type": "rule",
        "strokeWidth": 1
      },
      "encoding":{
        "x": {},
        "y": {"field": "yValue"},
        "color": {"field": "ruleName", "scale": {"range": {"field": "color"}}},
        "strokeDash": {"field": "ruleName", "scale": {"range": {"field": "dash"}}}
      }     
    }    
  ],
  "resolve": {
    "legend": {
      "color": "independent"
    }
  }
}

关键调整说明： #

• 给规则层添加自定义data，每个对象对应一个规则，包含规则名称、y轴位置、颜色和虚线样式
• 将规则的stroke、strokeDash样式从mark配置移到encoding中，绑定到ruleName字段，触发Vega-Lite自动生成对应图例项
• 通过resolve.legend.color: "independent"配置，让柱状图的Series图例和规则图例分开展示（若需合并可改为"shared"）

这样图表的图例中就会显示所有规则的名称，每个名称对应规则的样式，方便区分多个规则。

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