如何为这个 Vega 可视化添加图例

Question

我正在尝试弄清楚如何向示例 vega 可视化添加图例 here。如何执行此操作的任何示例将不胜感激。最好是交互式的，并在可视化上突出显示或显示数据，但即使只是一个简单的图例也会有很大的改进。

谢谢

Answer 1

对于在此 Vega Donut Chart Demo 中使用 legends 的简单起点：

Here's the same example Vega sandbox 将我的 legends 代码添加到 marks 部分之后。

这是我使用的图例代码：

  "legends": [
    {
      "fill": "color",
      "title": "This is the Title",
      "orient": "top-left",
      "encode": {
        "symbols": {"enter": {"fillOpacity": {"value": 0.5}}},
        "labels": {"update": {"text": {"field": "value"}}}
      }
    }
  ]

这对您来说应该是一个有用的示例起点。 legends的其他属性可以是found here.