Vega Vega-lite流媒体
Vega Vega-lite流媒体
提问于 2019-11-23 07:02:04
我开始使用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/vega@5.8.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@4.0.0-beta.12"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.1.0"></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尝试了不同的变体，但都没有成功。
任何帮助都将不胜感激。
谢谢
回答 1
Stack Overflow用户
发布于 2019-11-26 08:23:16
让我回答我自己的问题，因为我弄明白了。
首先，我使用了jquery：
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>我删除了url标签，以便一开始不加载JSON文件：
"data": {"name":'table'},以及我的JSON文件中的VEGA流数据：
vegaEmbed('#vis', vlSpec).then(function(res) {
var newdata ;
window.setInterval(function() {
jQuery.getJSON("http://localhost:8123/d.json", function(data) {
newdata = data;
})
var changeSet = vega
.changeset()
.remove(vega.truthy)
.insert(newdata)
console.log (newdata)
res.view.change('table', changeSet).run();
}, 1000);
});它的效果就像一个护身符！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59002883
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号