Код специфікації vega-lite, що треба додати:


{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.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", "title": "aoesuthaosth", "type": "nominal", "axis": {"labelAngle": 0}},
    "y": {"field": "b", "type": "quantitative"}
  }
}

Замість ручного додавання скриптів та ембеддингу як в туторіалі, є можливість підійти трохи гнучкіше і завантажувати vega-lite бібліотеки лише на тих сторінках на яких вони потрібні, а також параметризувати деякі із штук за замовчуванням:

<!-- Create a unique ID for the div where the Vega-Lite visualization will be rendered -->
<div class="vegaVis" id="{{ .Get "id" | default "vega-lite-vis" }}"></div>
<script>
  const spec = {{ .Inner | safeJS }};
  spec['width'] =  spec['width']? spec['width'] : {{ .Get "width" | default 700}};
  spec['height'] = spec['height']? spec['height'] : {{ .Get "height" | default 300}};
  vegaEmbed('#{{ .Get "id" | default "vega-lite-vis" }}', spec, {"actions": false}).catch(console.error);

</script>

Використання (прибрати пробіл до/після < >, які я додав щоб воно не рендерилось):

{{ < vega-lite id="unique-vis-id-1" actions="true"> }}
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.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",
  "width": 300,
  "encoding": {
    "x": {"field": "a", "title": "aoesuthaosth", "type": "nominal", "axis": {"labelAngle": 0}},
    "y": {"field": "b", "type": "quantitative"}
  }
}
{{ < /vega-lite > }}

Результат: