如何将渲染器指定为 SVG？答案

【问题标题】：How to specify renderer as SVG?如何将渲染器指定为 SVG？
【发布时间】：2020-04-19 12:14:42
【问题描述】：

我使用this VEGA-lite example 的克隆及其图表规范作为参考，并添加了renderer 选项

{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "description": "A simple ...",
  "..ETC..": "...",
  "renderer": "svg"
}

但图表保持为PNG...如何使用renderer选项？

PS：online spec 没有 renderer 的定义...关于 VEGA-lite 和 VEGA-view 有一些混淆？

【问题讨论】：

标签： vega-lite

【解决方案1】：

渲染器不是 Vega-Lite 规范的属性，而是Vega-Embed option。

如何指定它取决于您如何呈现图表。例如，如果您open the chart in the vega editor，则可以从右上角的设置菜单中选择 SVG 渲染器。

如果您是直接生成 HTML，您可以将嵌入选项传递给 vegaEmbed 调用；例如：

<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>

<body>  
  <div id="vis"></div>

  <script>
    const spec = "bar.vl.json";
    vegaEmbed("#vis", spec, {renderer: "svg"})
      .then(result => console.log(result))
      .catch(console.warn);
  </script>
</body>

也可以在图表规范本身的usermeta 字段中表达Vega-Embed 选项；例如：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "usermeta": {"embedOptions": {"renderer": "svg"}},
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
      {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
      {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"}
  }
}

这应该可以在任何 vega-embed 调用中正常工作（但不会工作，例如，在使用不同渲染方法的 vega 编辑器中）。

【讨论】：