javascript - 如何从服务器实时获取数据来更新我的图表？

Question

我使用chartjs来显示来自服务器的实时流数据，我使用ajax和php来每秒获取数据，但我认为这不是最好的主意。这是我的 JavaScript 代码。

 $(document).ready(function(){
  $.getJSON({
    url: "http://localhost/chartJS/data.php",
    method: "GET",
    success: function(data) {
      console.log(data);
      var player = [];
      var score = [];

      $.each(data, function(key, value){
        player.push("Player "+value[0]);
        score.push(parseInt(value[1]));
       });

      var chartdata = {
        labels: player,
        datasets : [
          {
            label: 'Player Score',
            backgroundColor: 'rgba(200, 200, 200, 0.75)',
            borderColor: 'rgba(200, 200, 200, 0.75)',
            hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
            hoverBorderColor: 'rgba(200, 200, 200, 1)',
            data: score
          }
        ]
      };

      var ctx = $("#mycanvas");

      var barGraph = new Chart(ctx, {
        type: 'line',
        data: chartdata
      });
    },
    error: function(data) {
      console.log(data);
    }});
 updateChart();
});

function updateChart()
{
  var x=2;
  $(document).ready(function(){
  $.getJSON({
    url: "http://localhost/chartJS/data.php?x="+x,
    method: "GET",
    success: function(data) {
      console.log(data);
      var player = [];
      var score = [];

      $.each(data, function(key, value){
        player.push("Player "+value[0]);
        score.push(value[1]);
       });
      var chartdata = {
        labels: player,
        datasets : [
          {
            label: 'Player Score',
            backgroundColor: 'rgba(200, 200, 200, 0.75)',
            borderColor: 'rgba(200, 200, 200, 0.75)',
            hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
            hoverBorderColor: 'rgba(200, 200, 200, 1)',
            data: score
          }
        ]
      };

      var ctx = $("#mycanvas");

      var barGraph = new Chart(ctx, {
        type: 'line',
        data: chartdata,
      });
    },
    error: function(data) {
      console.log(data);
    }
  });
});
setTimeout(function(){updateChart()}, 1000);
}

我听说过 websocket，但我真的不知道是否应该使用它如果是，我如何在每次打开图表时连续获取数据。

Answer 1

我认为您正在寻找的是间隔:

The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds).

示例:

setInterval(function(){ alert("Hello"); }, 3000);

每 3 秒触发一次警报。

因此，在您的情况下，只需在间隔内设置一个 ajax 调用并每 1000 毫秒调用一次，然后使用新数据修改图表。