使用ChartJS使用Ajax数据的实时折线图

Question

我正在尝试创建实时（ECG类型显示）折线图。我有正在传输数据的传感器，我需要每隔1秒显示一次实时流。我只想在图表上显示60秒的数据，所以我需要弹出最旧的标签和数据点。我可以将数据流式传输到图表，但无法弹出标签和数据点。这是我的代码：

    var ctx = document.getElementById('hashRateChart');

    var chartOptions = {
        legend: {
            display: true,
            position: 'top',
            labels: {
                boxWidth: 20,
                fontColor: 'black'
            }
        }
    };

    var hashrateData = {
        labels: [],
        datasets: [{
            label: "Real Time Hash Rate",
            backgroundColor: window.chartColors.red,
            borderColor: window.chartColors.red,
            fill: false,
            data: []
        }]
    };

    var myChart = new Chart( ctx, {
        type: 'line',
        data: hashrateData,
        options: chartOptions
    });

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

        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();
    }

    ( function worker() {

        $.ajax( {
            url: "http://localhost:5000/stats?id=1",
            contentType: "application/json",
            crossDomain: false,
            type: "GET",
            success: function( response ) {

                var r = $.parseJSON( response );
                var dte = new Date();

                addData( myChart, dte.getHours() + ":" + dte.getMinutes() + ":" + dte.getSeconds(), r['total_rate'] );

            },
            complete: function() {
                // Schedule the next request when the current one's complete
                setTimeout( worker, 1000 );
            }
        } );
    } )();

图表不断刷新，但旧的数据点仍然保留。关于我可能做错了什么的想法？

Answer 1

[通过使用pop，我认为您正在删除列表中的最后一个元素，而不是最旧的元素。因此，在60秒后，将仅更新最后一个元素，并且将保留较旧的数据。

使用拼接删除removeChart中数组的第一个元素

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