时间戳

首页 > 解决方案 > 尽管在 vega-lite 教程中逐步执行，但遇到 TypeError

javascript - 尽管在 vega-lite 教程中逐步执行，但遇到 TypeError

问题描述

我逐步按照 Vega-Lite 的教程进行操作，但在我的 vegaEmbed 方法调用中仍然遇到 TypeError

我尝试从 vl.Embed 切换到 vegaEmbed，但 vl.Embed 未定义并且 vegaEmbed 返回了 TypeError。

我的 html 有一个 id 为“vis”的 div 标签。以下代码在我的 script.js 文件中链接到 html。

// Vega lite bar chart

const VLSPEC = {
    "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
    "data":{
      "values":[
        {"a": "C", "b": 2},
        {"a": "C", "b": 7},
        {"a": "C", "b": 4},
        {"a": "D", "b": 1},
        {"a": "D", "b": 2},
        {"a": "D", "b": 6},
        {"a": "E", "b": 8},
        {"a": "E", "b": 4},
        {"a": "E", "b": 7}
      ]
    },
    "mark":"bar",
    "encoding": {
      "y":{"field":"a","type":"nominal"},
      "x":{"field":"b","type": "quantitative",       "aggregate":"average", "axis":{"title": "B mean"}} 
      }

  };

vegaEmbed('#vis',VLSPEC);

我希望绘制条形图（如https://vega.github.io/vega-lite/site/demo.html中），但在 js 控制台中没有收到视觉输出，而是收到 TypeError。

vega-embed@4.2.0:1 Uncaught (in promise) TypeError: Cannot read property 'appendChild' of null

    at new ve (vega-embed@4.2.0:1)

    at vega-embed@4.2.0:1

    at Generator.next (<anonymous>)

    at vega-embed@4.2.0:1

    at new Promise (<anonymous>)

    at D (vega-embed@4.2.0:1)

    at je (vega-embed@4.2.0:1)

    at Ne (vega-embed@4.2.0:1)

    at script.js:26

标签： javascriptvega-lite

解决方案

您使用 ID 引用了一个 DOM 元素"#vis"，错误表明该 DOM 元素未定义。您应该在具有以下元素的 HTML 页面的上下文中执行此 javascript：

<div id="vis"></div>

然后嵌入调用应该工作。

您可以在https://vega.github.io/vega-lite/site/demo.html的页面源代码中看到这一点。

推荐阅读