我一步一步地遵循了Vega-Lite的教程,但是在我的vegaEmbed方法调用中仍然遇到TypeError
我尝试从vl.Embed切换到vegaEmbed,但vl.Embed未定义,而vegaEmbed返回TypeError。
我的html具有ID为“ vis”的div标签。以下代码位于链接到html的script.js文件中。
// 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。
[email protected]:1 Uncaught (in promise) TypeError: Cannot read property 'appendChild' of null
at new ve ([email protected]:1)
at [email protected]:1
at Generator.next (<anonymous>)
at [email protected]:1
at new Promise (<anonymous>)
at D ([email protected]:1)
at je ([email protected]:1)
at Ne ([email protected]:1)
at script.js:26
最佳答案
您引用ID为"#vis"
的DOM elemend,并且错误指示此DOM元素未定义。您应该在具有以下元素的HTML页面的上下文中执行此javascript:
<div id="vis"></div>
然后嵌入调用应该起作用。
您可以在https://vega.github.io/vega-lite/site/demo.html的页面源代码中看到此操作。
关于javascript - 尽管在vega-lite教程中循序渐进,但仍然遇到TypeError,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56529217/