如何从服务器实时获取数据以更新我的 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 毫秒调用一次，然后使用新数据修改图表。