如何向此 Vega 可视化添加图例

Question

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

谢谢

Answer 1

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

这是相同的示例 Vega 沙箱，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可以在这里找到。