vega-lite 中水平图例的换行

Question

有没有办法让图例中的标签水平方向换行？ 我用汽车数据集做了一个简单的例子，我在其中转换类别以在 Vega Editor 中生成更长的字符串：

假设我有更多类别，但还想将图例放在 top/bottom 处，以便为图表区域提供更多水平 space。

Answer 1

我在单独的 div 中创建了自定义图例。

可以通过 View API:

访问 Vega 可视化中的类别及其映射颜色

const colors = vegaView.scale('color').range();
const categories = vegaView.scale('color').domain()

Answer 2

使用legend的columns属性:

  {
    "legend": {
    "orient": "top",
    "direction": "horizontal",
    "columns": 2
  }