Plotly js 从在线数据实时更新答案

【问题标题】：Plotly js live update from online dataPlotly js 从在线数据实时更新
【发布时间】：2022-02-04 00:17:37
【问题描述】：

我希望我的 Plotly 图表通过从在线 CSV 文件中读取数据每 1 秒自动更新一次。

这是我目前所拥有的：

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </head>

  <body>
    <div id="graph"></div>
    <script>
      function read_data() {
        d3.csv(
          "https://docs.google.com/spreadsheets/d/e/2PACX-1vTkbRgvvBwM0tMheEziQC4ldtYoMVCgIek67Y5Lcjnu1WH0tTLLCzJPse-pL5OTR9U58Gk8VBD65L3u/pub?gid=0&single=true&output=csv",
          function (data) {
            processData(data);
          }
        );
      }

      function processData(allRows) {
        console.log(allRows);
        var x = [];
        var y = [];

        for (var i = 0; i < allRows.length; i++) {
          row = allRows[i];
          x.push(row["x"]);
          y.push(row["y"]);
        }
        console.log("Y", y);
        return y;
      }

      Plotly.newPlot(graph, [
        {
          y: [1, 2, 3],
          mode: "lines",
          line: { color: "#80CAF6" },
        },
      ]);

      var interval = setInterval(function () {
        Plotly.restyle(
          graph,
          {
            y: [[read_data()]],
          },
          [0]
        );
      }, 1000);
    </script>
  </body>
</html>

虽然y的数据在控制台打印出来了，但是情节并没有更新。

我的脚本是基于这两个教程：

附加问题：有没有办法在每次更新 CSV 文档中的数据时自动更新图表？也就是说，不必每秒钟循环一次。

【问题讨论】：

标签： javascript d3.js plotly plotly.js

【解决方案1】：

在您的代码中，read_data() 返回undefined。它还安排 processData() 稍后运行，该函数返回一些数据，但它被忽略此返回值的 JavaScript 运行时调用。

您可以将Plotly.restyle(... 代码粘贴到processData 调用的函数中，或者您可以将该代码粘贴到processData 中。请参阅下面的代码示例。

但是，这里还有另一个问题（请看下面的代码示例失败）。浏览器页面目前无法加载此文件。谷歌表格链接如 https://docs.google.com/spreadsheets/d/e/2PACX-1vTkbRgvvBwM0tMheEziQC4ldtYoMVCgIek67Y5Lcjnu1WH0tTLLCzJPse-pL5OTR9U58Gk8VBD65L3u/pub?gid=0&single=true&output=csv no longer work 在大约 18 个月前的浏览器中。

您需要使用另一种方法将数据导入网页（请参阅上面的链接问题以获取一些建议）。

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </head>

  <body>
    <div id="graph"></div>
    <script>
      function read_data() {
        d3.csv(
          "https://docs.google.com/spreadsheets/d/e/2PACX-1vTkbRgvvBwM0tMheEziQC4ldtYoMVCgIek67Y5Lcjnu1WH0tTLLCzJPse-pL5OTR9U58Gk8VBD65L3u/pub?gid=0&single=true&output=csv",
          function (data) {
            processData(data);
          }
        );
      }

      function processData(allRows) {
        console.log(allRows);
        var x = [];
        var y = [];

        for (var i = 0; i < allRows.length; i++) {
          row = allRows[i];
          x.push(row["x"]);
          y.push(row["y"]);
        }
        console.log("Y", y);
        
        Plotly.restyle(
          graph,
          {
            y: y,
          },
          [0]
        );
      }

      Plotly.newPlot(graph, [
        {
          y: [1, 2, 3],
          mode: "lines",
          line: { color: "#80CAF6" },
        },
      ]);

      var interval = setInterval(read_data, 1000);
    </script>
  </body>
</html>

【讨论】：

谢谢！我使用本地 ("data.csv") 或 github 托管文件 (raw.githubusercontent.com/cnftstats/test/main/data.csv) 尝试了您的代码，但它仍然忽略数据。不知道是什么问题
您需要提供 CORS 标头，请参阅 developer.mozilla.org/en-US/docs/Web/HTTP/CORS GitHub 和 file:// url 都不会包含这些标头。