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

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