Как применить тему vega при использовании vl2png - PullRequest
Новая
       84

Как применить тему vega при использовании vl2png

1 голос
/ 29 января 2020

У меня есть спецификация диаграммы vega-lite , которую я хотел бы сохранить в PNG, используя одну из тем, доступных в vega-themes .

С vega-embed я могу использовать скрипт, подобный следующему, чтобы создать тематическую диаграмму в браузере, и вручную нажать «Сохранить в 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>

enter image description here

В качестве альтернативы, я могу автоматически создать без тематического png, используя инструмент командной строки vl2png из vega-cli : 

$ cat spec.json | vl2png > chart.png

enter image description here

Но я не уверен, где указывать тему в команде vl2png.

Как мне указать тему диаграммы при использовании vega-cli для рендеринга и сохранения диаграммы?

1 Ответ

2 голосов
/ 29 января 2020

vega-themes недоступны в утилитах vega-cli - вместо этого они встроены в vega-embed. Хорошей новостью является то, что поскольку темы - это просто vega config объекты, вы можете просто вручную включить один из них в spe c (в командной строке вы можете использовать утилиту, например jq, для объединения несколько JSON файлов).

Однако плохая новость заключается в том, что, хотя источник Typescript для создания объектов темы доступен, проект vega-themes, по-видимому, не экспортирует необработанные JSON Настройка объектов для самих тем. Так что вам нужно создать его самостоятельно. Если у вас есть репозиторий vega-theme, извлеченный и собранный, вы можете извлечь объект конфигурации следующим образом: 

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

Итак, собрав все это вместе, вы можете применить тему из консоли, используя этот бит gnarly код: 

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