如何为Vega-Lite Deneb双面积图添加自定义圆形图例？

要在Vega-Lite Deneb的双面积图右侧添加对应颜色的圆形图例，只需通过颜色编码绑定年份字段+图例符号与位置配置即可实现，具体修改步骤和示例代码如下：

核心修改要点 #

1. 绑定颜色与年份字段：确保encoding.color指向你的年份字段（比如year），让图例颜色与面积图自动关联。
2. 设置圆形图例符号：在color的legend配置中指定symbolType: "circle"，将默认图例符号改为圆形。
3. 调整图例位置到右侧：通过legend.orient: "right"把图例固定在可视化区域右侧。

修改后的完整示例代码 #

{
  "data": {
    "values": [
      {"month": "1月", "year": 2022, "leaves_count": 120},
      {"month": "2月", "year": 2022, "leaves_count": 150},
      {"month": "3月", "year": 2022, "leaves_count": 180},
      {"month": "4月", "year": 2022, "leaves_count": 220},
      {"month": "1月", "year": 2023, "leaves_count": 160},
      {"month": "2月", "year": 2023, "leaves_count": 190},
      {"month": "3月", "year": 2023, "leaves_count": 230},
      {"month": "4月", "year": 2023, "leaves_count": 270}
    ]
  },
  "mark": {"type": "area", "opacity": 0.7},
  "encoding": {
    "x": {"field": "month", "type": "ordinal", "title": "月份"},
    "y": {"field": "leaves_count", "type": "quantitative", "title": "Leaves Count"},
    "color": {
      "field": "year",
      "type": "nominal",
      "title": "年份",
      "scale": {"range": ["#4CAF50", "#2196F3"]}, // 自定义2022/2023年的面积图颜色
      "legend": {
        "orient": "right",
        "symbolType": "circle",
        "symbolSize": 180, // 可调整圆形图例的大小
        "labelFontSize": 12
      }
    }
  }
}

关键配置说明 #

• 如果不需要自定义颜色，可删除scale.range配置，Vega-Lite会自动分配匹配的颜色，图例仍会与面积图保持一致。
• 若要调整图例的字体大小、间距等样式，可在legend配置中添加titleFontSize、labelPadding等参数。

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