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

Posted 2023-02-16

【中文标题】如何向此 Vega 可视化添加图例

【英文标题】：How can I add a legend to this Vega visualization

【发布时间】：2019-04-18 00:52:13

【问题描述】：

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

谢谢

【参考方案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.

【讨论】：

你知道在 js 版本的规范中把它放在哪里了吗？即 vl.encode、vl.data 等