javascript - plotly.js 滞后问题。我的项目运行缓慢

Question

我有一个项目，我用烧瓶创建了后端。它从 csv 文件中读取数据并将其传输到 html。它使用 Ajax 每秒读取一次数据。然后我用 plotly.js 可视化数据。使用 Ajax，每次获取操作都会有延迟。我正在处理大约 2000 个数据。

但是，我的代码有延迟。如何重构此代码？我能做些什么来避免延误？

$(function requestData() {
  $.ajax({
    type: "GET",
    url: "/deneme3",
    success: function (data) {
      //console.log('success',data);
      //console.log('success',data[0]);
      //console.log('success',data[1]);
      var enlem = [];
      var boylam = [];
      var ch1 = [];
      var ch2 = [];
      var ch3 = [];
      var ch4 = [];
      enlem = data[0];
      boylam = data[1];
      ch1 = data[2];
      ch2 = data[3];
      ch3 = data[4];
      ch4 = data[5];
      //console.log('enlem',enlem);
      //console.log('boylam',boylam);

      var trace1 = {
        x: enlem,
        y: boylam,
        mode: "markers",
        marker: {
          size: 10,
          color: ch1,
          colorbar: { x: -0.2, len: 1 },
          colorscale: "Jet",
        },
      };

      var data = [trace1];

      var layout = {
        title: "Scatter Plot with a Color Dimension",
      };

      Plotly.newPlot("tester", data, layout);

      setInterval(function () {
        var update = {
          x: [[enlem]],
          y: [[boylam]],
        };

        Plotly.extendTraces("tester", update, [0]);
      }, 100);

      //ch1 grafik
      var trace2 = {
        y: ch1,
        type: "scatter",
      };

      var data2 = [trace2];

      var layout2 = {
        title: "CH1",
      };

      Plotly.newPlot("ch1", data2, layout2);

      setInterval(function () {
        var update = {
          y: [[ch1]],
        };

        Plotly.extendTraces("ch1", update, [0]);
      }, 100);

      //ch2 grafik
      var trace3 = {
        y: ch2,
        type: "scatter",
      };

      var data3 = [trace3];

      var layout3 = {
        title: "CH2",
      };

      Plotly.newPlot("ch2", data3, layout3);

      setInterval(function () {
        var update = {
          y: [[ch2]],
        };

        Plotly.extendTraces("ch2", update, [0]);
      }, 100);

      //ch3 grafik
      var trace4 = {
        y: ch3,
        type: "scatter",
      };

      var data4 = [trace4];

      var layout4 = {
        title: "CH3",
      };

      Plotly.newPlot("ch3", data4, layout4);

      setInterval(function () {
        var update = {
          y: [[ch3]],
        };

        Plotly.extendTraces("ch3", update, [0]);
      }, 100);

      //ch4 grafik
      var trace5 = {
        y: ch4,
        type: "scatter",
      };

      var data5 = [trace5];

      var layout5 = {
        title: "CH4",
      };

      Plotly.newPlot("ch4", data5, layout5);

      setInterval(function () {
        var update = {
          y: [[ch4]],
        };

        Plotly.extendTraces("ch4", update, [0]);
      }, 100);
    },
  });

  setTimeout(requestData, 100);
});

另外，使用 Ajax 和 socketio 中的哪一个更有意义？

标签： javascriptplotly.js

Answer 1

正如评论中所讨论的，这样的事情可能会起作用：初始化空图，然后在更新函数中填写数据：

function plotData(data) {
  const [enlem, boylam, ...chs] = data;
  Plotly.extendTraces("tester", {
    x: [[enlem]],
    y: [[boylam]],
  }, [0]);

  for (let i = 0; i < 4; i++) {
    const j = i + 1;
    Plotly.extendTraces(`ch${j}`, {
      y: [[chs[i]]],
    }, [0]);
  }

  // After success, wait before loading more data
  setTimeout(requestData, 1000);
}

function requestData() {
  // Simulate a successful response that returns 6 numbers.
  plotData([Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random()]);
  // If a real endpoint was available, you could do something like
  /*$.ajax({
    type: "GET",
    url: "/deneme3",
    success: plotData,
  });*/
}

function initialize() {
  Plotly.newPlot("tester", [{
    x: [],
    y: [],
    mode: "markers",
    marker: {
      size: 10,
      colorbar: { x: -0.2, len: 1 },
      colorscale: "Jet",
    },
  }], {
    title: "Scatter Plot with a Color Dimension",
  });
  for (let i = 1; i <= 4; i++) {
    Plotly.newPlot(`ch${i}`, [{
      y: [],
      type: "scatter",
    }], {
      title: `CH${i}`,
    });
  }
  requestData();  // Fire off first update
}

$(initialize);

div {
  width: 33%;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js" charset="utf-8"></script>
<div id="tester"></div>
<div id="ch1"></div>
<div id="ch2"></div>
<div id="ch3"></div>
<div id="ch4"></div>