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

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          }        ]      };我听说过 websocket，但我真的不知道我是否应该使用它，如果是，我如何在每次打开图表时连续获取数据。

Answer 1

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

所述的setInterval（）方法调用的功能或在指定的时间间隔计算表达式（以毫秒为单位）。

例子：

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

它每 3 秒触发一次警报。

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