实时显示新数据

Question

使用此脚本我无法自动更新新数据。

现在我已经显示了所有数据。

var ' . $var1 . ' = [];
        var ' . $var2 . ' = [];             

        const ctx = $("#myChart");
        
        const data = {
            labels: '.$var1.',
            datasets: [{
                label: "Student Marks",
                data: '.$var2.',
                backgroundColor: "#0156AC",
                pointStyle: "circle",
                pointRadius: 5,
                pointHoverRadius: 10
            }]
        };
        const config = {
            type: "line",
            data: data
        };
        const myChart = new Chart (
            ctx,
            config
        );
                
        var getData = function() {

                $.ajax({
                    type: "GET",
                    dataType: "json",
                    url: "' . $url . '",
                    success: function(data) {
                        
                        
                     for(var i in data) {
                   '.$var1.'.push(data[i].'.$var1.');
                    '.$var2.'.push(data[i].'.$var2.');


                }

                         
                        
                    }
                });
        
        };
        
        setInterval(getData, 1000);

无法显示新数据 我关注了不同的视频，但找不到任何结果。

Answer 1

在处理新可用数据时缺少两件事。

1. 您还需要向

   data.labels

   添加新值。
2. 最后你需要调用

   myChart.update()

   。

有关更多信息，请查看 Chart.js 文档中的

更新图表

。

Answer 2

我努力并取得了这个成果。

现在问题来自于我使用 update() 函数，最后一段显示并消失，但它包含新值。

你能帮我解决吗？

var date_insert = [];
    var count = [];             

    const ctx = $("#myChart");
    
    const data = {
        labels: [],
        datasets: [{
            label: "Student Marks",
            data: [],
            backgroundColor: "#0156AC",
            pointStyle: "circle",
            pointRadius: 5,
            pointHoverRadius: 10
        }]
    };
    const config = {
        type: "line",
        data: data
    };
    const myChart = new Chart (
        ctx,
        config
    );

function addData( chart, label, data ) {
    // pop last label and data point if we have 1 minutes data in chart
  //  if ( chart.data.labels.length >= 9 ) { removeData(myChart) };

    chart.data.labels.push( label );
    chart.data.datasets.forEach(( dataset ) => {
        dataset.data.push( data );
    } );
    chart.update();
}

function removeData( chart, callback ) {
    chart.data.labels.pop();
    chart.data.datasets.forEach((dataset) => {
        dataset.data.pop();
    });
    chart.update();
}   

setInterval(function() {

            $.getJSON("page.php", function (result) {

   $.each(result, function(i, field) {
      
      if (data.labels.length < result.length) {
    
         addData(myChart, field.date_insert, field.count);
        
      } else {
          removeData(myChart); // THIS IS MY PROBLEM
   }
  
});

});

}, 1000);