Question

我有一个Flask-SocketIO Webapp，其中一些数据由我的Python脚本生成并发送到我的JS Frontend。我现在正尝试将这些数据放在图表上。它看起来应该是这样的：用户打开网页，他应该看到数据更新，但是在打开网页之前，他还应该看到数据，所以我既需要实时数据也要更新数据和过去的数据。现在最大的问题是我设法绘制了实时图表，但我不知道。当我打开网页时，可以看到图表正在更新，但是看不到图表上的过去数据，我实际上尝试了所有操作。

这是我编写的代码的javascript部分，here您可以找到其余的代码（Python部分+ html部分）

$(document).ready(function() {
  //connect to the socket server.
  var socket = io.connect('http://' + document.domain + ':' + location.port + '/test');
  var numbers_received = [];


  //receive details from server
  socket.on('newnumber', function(msg) {
    console.log("Received" + msg.number);
    //maintain a list of ten numbers
    if (numbers_received.length >= 1) {
      numbers_received.shift()
    }


    numbers_received.push(msg.number);
    numbers_string = '';
    for (var i = 0; i < numbers_received.length; i++) {
      numbers_string = numbers_string + '<p>' + numbers_received[i].toString() + '</p>';
    }
    $('#log').html(numbers_string);
  });






  function getData() {

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

                console.log('TEST' + numbers_received[0]);

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

});

我该怎么办？退出尝试为我的图表使用Javascript库，使用Python库并直接从Python生成图表的情况（是否想在Python Dash上重新制作整个应用程序，但这不是免费的）？处理我的Javascript代码，直到找到解决方法，这暗示有可能吗？只是使用另一个库？

拜托，每一个小小的帮助都值得高度赞赏，我一直在努力进行一周，但我却找不到办法，在此先感谢

我无法在Flask网页中嵌入实时图表

0 个答案: