Блог

Главная - Вопросы по программированию - Не уверен, как использовать примеры диаграмм Vega-Lite — похоже, это частичный код

Не уверен, как использовать примеры диаграмм Vega-Lite — похоже, это частичный код

#vega-lite #vega

Вопрос:

Я получил следующий пример кода Vega-Lite от Observable, и он отлично работает:

 <!DOCTYPE html>
<html lang="en">
  <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-lite-api@4"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-tooltip"></script>
  </head>
  <body>
    <div id="view"></div>
    <script>
      // Setup API options.
      const options = {
        config: {
          // Vega-Lite default configuration.
        },
        init: (view) => {
          // Initialize tooltip handler.
          view.tooltip(new vegaTooltip.Handler().call);
        },
        view: {
          // View constructor options.
          // Remove the loader if you don't want to default to vega-datasets!
          //loader: vega.loader({
          //  baseURL: "https://cdn.jsdelivr.net/npm/vega-datasets@2/",
          //}),
          renderer: "canvas",
        },
      };

      // Register vega and vega-lite with the API.
      vl.register(vega, vegaLite, options);

      // Now you can use the API!
      vl.markBar({ tooltip: true })
        .data([
          { 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 },
        ])
        .encode(
          vl.x().fieldQ("b"),
          vl.y().fieldN("a"),
          vl.tooltip([vl.fieldN("a"), vl.fieldQ("b")])
        )
        .render()
        .then(viewElement => {
          // Render returns a promise to a DOM element containing the chart.
          // viewElement.value contains the Vega View object instance.
          document.getElementById('view').appendChild(viewElement);
        });
    </script>
  </body>
</html>

Однако, когда я смотрю на примеры Vega-Lite (например, это), между ними есть только блок кода {} . Как я могу использовать этот блок кода между {} в html для репликации их примера? Я пробовал разные способы, но я просто продолжаю получать пустые страницы. Не уверен, где найти документацию, касающуюся этого. Также пример кода иногда ссылается на vega-lite@5 то , должен ли я соответствующим образом изменить свои ссылки vega-lite@4 ?

Ответ №1:

Вам понадобятся vega-lite, vega-cli и vega-embed для создания диаграммы vega-lite. Вы можете проверить зависимости от разработчика для выбранной версии vega-lite. Например, в файле package.json версии vega-lite v5.1.0 это необходимые зависимости:

 "vega-cli": "^5.20.2",
"vega-embed": "^6.18.2",

Для получения более подробной информации об установке см. Это.

После добавления этих зависимостей вы можете просто создать div с id и в этот div вы можете встроить свою конфигурацию vega-lite, как указано в ее редакторе vega и встроено в jsfiddle. Ниже приведен фрагмент кода и документация для последних конфигураций.

 var yourVlSpec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.0.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", yourVlSpec); 
 <script src="https://cdn.jsdelivr.net/combine/npm/vega@5.20.2,npm/vega-lite@5.0.0,npm/vega-embed@6.17.0"></script>

<body>
<div id="vis"></div>
</body>
Метки: , ,