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

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

setInterval（）方法调用一个函数或计算一个表达式以指定的时间间隔（以毫秒为单位）。

示例：

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

每3秒触发一次警报。

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

如何从服务器实时获取数据以更新我的chartjs图？

1 个答案: