Vega Vega-lite流媒体

问题描述 投票:0回答:1

我开始使用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)。 ...

streaming vega vega-lite
1个回答
0
投票

让我回答我自己想出的问题。

© www.soinside.com 2019 - 2024. All rights reserved.