如何在Vega-Lite中将自定义图例设置在底部？

要将图例位置调整到底部并横向排列（匹配你展示的示例效果），只需在Vega-Lite的配置中修改图例的方向和位置参数：

具体修改方式 #

方法1：针对单个图例配置（精准控制） #

在你图表的encoding字段中，找到控制颜色图例的color属性，添加legend配置项：

"encoding": {
  "color": {
    "field": "你的字段名",
    "type": "nominal",
    "legend": {
      "orient": "bottom", // 设置图例在底部
      "direction": "horizontal", // 图例项横向排列
      "title": null // 可选：去掉图例标题，按需保留
    }
  }
}

方法2：全局图例配置（统一控制所有图例） #

如果你的图表包含多个图例，想要统一设置位置，可以在顶层的config字段中添加全局图例配置：

"config": {
  "legend": {
    "orient": "bottom",
    "direction": "horizontal"
  }
}

将上述配置片段整合到你现有的Vega-Lite spec中，即可实现底部横向排列的图例效果。

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