使用 vl2png 时如何应用 vega 主题

Question

我有一个vega-lite chart specification that I'd like to save to PNG, using one of the themes available in vega-themes。

使用vega-embed，我可以使用如下脚本在浏览器中生成主题图表，然后在菜单中手动单击"Save to PNG"：

<html>
<head>
  <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 type="text/javascript">
  var spec = {
    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
    "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"}
    }
  };
  vegaEmbed("#vis", spec, {theme: 'fivethirtyeight'});
</script>
</body>
</html>

或者，我可以使用来自 vega-cli:

的 vl2png 命令行工具自动创建一个 非主题 png

$ cat spec.json | vl2png > chart.png

但我不确定在 vl2png 命令中的何处指定主题。

如何在使用vega-cli渲染和保存图表时指定图表主题？

Answer 1

vega-themes 在 vega-cli 实用程序中不可用 – 它们嵌入在 vega-embed 中。好消息是，由于主题只是 vega config 对象，您可以手动将其中之一包含在规范中（在命令行上，您可以使用 jq 之类的实用程序来合并多个 JSON 文件）。

然而，坏消息是虽然用于生成主题对象的 Typescript 源可用，但 vega-themes 项目似乎没有导出任何原始 JSON 配置对象主题本身。所以需要自己生成。如果您检出并构建了 vega-theme 存储库，则可以像这样提取配置对象：

cat vega-themes/build/theme-excel.js | sed 's/export default \(.*\);/console.log(JSON.stringify({config: }));/g' | node

因此，将它们放在一起，您可以使用这段粗糙的代码从控制台应用主题：

(cat vega-lite/examples/specs/bar.vl.json; \
 cat vega-themes/build/theme-dark.js \
  | sed 's/export default \(.*\);/console.log(JSON.stringify({config: }));/g' \
  | node)  \
  | jq -s add \
  | vl2png > spec_dark.png

使用 vl2png 时如何应用 vega 主题

How to apply a vega theme when using vl2png

vega

vega-lite