不确定如何使用 Vega-Lite 图表示例 - 似乎是部分代码

Question

我从 Observable 获得了以下 Vega-Lite 代码示例，它运行良好：

<!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 示例（例如 this）时，它们只有 {} 之间的代码块。我如何使用 html 中 {} 之间的代码块来复制他们的示例？我尝试了各种方法，但总是出现空白页。不确定在哪里可以找到与此相关的文档。此外，示例代码有时会引用 vega-lite@5，我是否应该相应地更改对 vega-lite@4 的引用？

Answer 1

您将需要 vega-lite、vega-cli 和 vega-embed 来创建 vega-lite 图表。您可以检查所选 vega-lite 版本的 devDependencies。例如，在 vega-lite v5.1.0 的 package.json 中，这些是必需的依赖项：

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

有关安装的更多详细信息，请参阅 this。

添加这些依赖项后，您只需创建一个带有 id 的 div 并在其中 div 您可以嵌入您的 vega-lite 配置，如其 vega-editor and embedded in jsfiddle. Below is the snippet and documentation 获取最新配置。

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>

不确定如何使用 Vega-Lite 图表示例 - 似乎是部分代码

Not sure how to use Vega-Lite chart examples - seem to be partial code

vega-lite

vega