1

我创建了一个网页，其中实时显示了一些数字。数据使用 SocketIO 从 Python Flask 脚本发送到我的 JavaScript 前端。

我现在正试图在实时图表上显示这些数字，为此我正在使用 Apexcharts。问题是我不能把我需要的东西放在图表上。我根本没有收到任何错误，图表将无法正常工作或显示所有内容。

如您所见，从我的套接字接收到的数据存储在 numbers_received 中。

$(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>';
    }
    s
    $('#log').html(numbers_string);
  });

  /*
      // this function will generate output in this format
      // data = [
          [timestamp, 23],
          [timestamp, 33],
          [timestamp, 12]
          ...
      ]
      */
  var lastDate = 0;
  var data = [];

  function getDayWiseTimeSeries(baseval, count, yrange) {
    var i = 0;
    while (i < count) {
      var x = baseval;
      var y = numbers_received;
      data.push({
        x,
        y
      });
      lastDate = baseval
      baseval += 86400000;
      i++;
    }
  }
  getDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, {
    min: 10,
    max: 90
  })

  function getNewSeries(baseval, yrange) {
    var newDate = baseval + 86400000;
    lastDate = newDate
    data.push({
      x: newDate,
      y: numbers_received
    })
  }

  function resetData() {
    data = data.slice(data.length - 10, data.length);
  }
  var options = {
    chart: {
      height: 350,
      type: 'line',
      animations: {
        enabled: true,
        easing: 'linear',
        dynamicAnimation: {
          speed: 2000
        }
      },
      toolbar: {
        show: false
      },
      zoom: {
        enabled: false
      }
    },
    dataLabels: {
      enabled: false
    },
    stroke: {
      curve: 'smooth'
    },
    series: [{
      data: data
    }],
    title: {
      text: 'Dynamic Updating Chart',
      align: 'left'
    },
    markers: {
      size: 0
    },
    xaxis: {
      type: 'datetime',
      range: 777600000,
    },
    yaxis: {
      max: 100
    },
    legend: {
      show: false
    },
  }
  var chart = new ApexCharts(
    document.querySelector("#chart"),
    options
  );
  chart.render();
  var dataPointsLength = 10;
  window.setInterval(function() {
    getNewSeries(lastDate, {
      min: 10,
      max: 90
    })
    chart.updateSeries([{
      data: data
    }])
  }, 2000)

  // every 60 seconds, we reset the data 
  window.setInterval(function() {
    resetData()
    chart.updateSeries([{
      data
    }], false, true)
  }, 60000)

});
4

1 回答 1

0

需要等待socket.on完成，然后才能绘制图表。

socket.on是异步的，这意味着该部分之后的所有代码
将在socket.on完成之前运行，除非偶然 socket.on运行得非常快。

尝试类似于以下设置的操作（请参阅drawChart）...

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

  //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);
    drawChart();
  });

  function drawChart() {
    getDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, {
      min: 10,
      max: 90
    })

    var options = {
      chart: {
        height: 350,
        type: 'line',
        animations: {
          enabled: true,
          easing: 'linear',
          dynamicAnimation: {
            speed: 2000
          }
        },
        toolbar: {
          show: false
        },
        zoom: {
          enabled: false
        }
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        curve: 'smooth'
      },
      series: [{
        data: data
      }],
      title: {
        text: 'Dynamic Updating Chart',
        align: 'left'
      },
      markers: {
        size: 0
      },
      xaxis: {
        type: 'datetime',
        range: 777600000,
      },
      yaxis: {
        max: 100
      },
      legend: {
        show: false
      },
    }
    var chart = new ApexCharts(
      document.querySelector("#chart"),
      options
    );
    chart.render();
    var dataPointsLength = 10;
    window.setInterval(function() {
      getNewSeries(lastDate, {
        min: 10,
        max: 90
      })
      chart.updateSeries([{
        data: data
      }])
    }, 2000)

    // every 60 seconds, we reset the data
    window.setInterval(function() {
      resetData()
      chart.updateSeries([{
        data
      }], false, true)
    }, 60000)
  }

  function getDayWiseTimeSeries(baseval, count, yrange) {
    var i = 0;
    while (i < count) {
      var x = baseval;
      var y = numbers_received;
      data.push({
        x,
        y
      });
      lastDate = baseval
      baseval += 86400000;
      i++;
    }
  }

  function getNewSeries(baseval, yrange) {
    var newDate = baseval + 86400000;
    lastDate = newDate
    data.push({
      x: newDate,
      y: numbers_received
    })
  }

  function resetData() {
    data = data.slice(data.length - 10, data.length);
  }
});
于 2018-10-30T15:49:05.857 回答