我开始使用Vega,现在尝试流式传输数据以很好地刷新图形。到目前为止,我没有遵循该文档(https://vega.github.io/vega-lite/tutorials/streaming.html)。我发现的示例在数组中具有值,而我的示例在JSON文件中,该文件会定期刷新。我最终得到了这段代码,该代码可以根据需要正确显示我的图形,但不会刷新我的数据。
<html>
<head>
<title>A title</title>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<style media="screen">
/* Add space between Vega-Embed links */
.vega-actions a {
margin-right: 5px;
}
</style>
</head>
<body>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@5"></script>
</head>
<body>
<div id="vis"></div>
<script>
var vlSpec = {
data: {"url": "http://localhost:8123/d.json", "name":"table"},
mark: "bar",
"width": 1240,
"encoding": {
"y": {"field": "task", "type": "ordinal", "sort":"x2"},
"x": {"field": "start", "type": "temporal", "aggregate":"sum"},
"x2": {"field": "end", "type": "temporal"},
"color": {"field": "status", "type": "nominal"}
}
};
// Embed visualization and save view as window.view:
vegaEmbed('#vis', vlSpec).then(function(res) {
window.setInterval(function() {
var changeSet = vega
.changeset()
.insert()
res.view.change('table', changeSet).run();
}, 1000);
});
</script>
</body>
</html>
我的问题似乎是insert(),在文档的示例中,他们在其中插入函数的结果以生成数据,我应该在此处插入我的JSON文件-我尝试使用fetch进行其他变体,但没有成功。] >
任何帮助将不胜感激。
谢谢
我开始使用Vega,现在尝试流式传输数据以很好地刷新图形。到目前为止,我没有遵循该文档(https://vega.github.io/vega-lite/tutorials/streaming.html)。 ...
让我回答我自己想出的问题。