javascript - 图表始终为空

Question

我正在尝试将 Plotly 图表添加到我的网页。数据正在通过 SocketIO 发送到 Javascript，但图表为空。

我不明白为什么，因为数据被推送到arr. 有什么建议吗？

var arr = [];

socket.on('two', function(msg) {

    arr.push(msg.num)

    console.log(arr)
  });

  Plotly.plot('chart',[{
      y:[0],
      type:'line'
    }]);

    var cnt = 0;
    setInterval(function(){
        Plotly.extendTraces('chart',{ y:[[arr]]}, [0]);
        cnt++;
        if(cnt > 500) {
            Plotly.relayout('chart',{
                xaxis: {
                    range: [cnt-500,cnt]
                }
            });
        }
    },15);

标签： javascriptsocketscharts

Answer 1

Socket.io on() 函数是异步的。因此，Plotly 代码不会等待它完成，因此只接收一个空数组作为其数据。在通过 Socket.io 发出远程数据请求之前尝试实例化您的 Plotly 图，然后在 on() 方法的响应函数中更新图。