我正在使用图表js测试实时图表,并在下面编写了简单的代码。每一秒,我都想用一些新数据重新绘制图形(在数据和标签数组中移位和推送)。尽管它有多么丑陋,但它仍然有效,并且每秒都会更新图形。但是,每次执行该功能时,刷新按钮都会灰显(几毫秒),即使没有与网络交互也是如此。为什么呢?
setInterval(function() {
var ctx = document.getElementById("line-chart-1").getContext("2d");
var chart1 = window.chart1;
var d1 = chart1.data.datasets[0].data;
var lab1 = chart1.data.labels;
var newData = dataPointGenerator(70, 80);
d1.shift();
d1.push(newData.data);
lab1.shift();
lab1.push(newData.time);
window.chart1 = new Chart(ctx, {
type: 'line',
data: {
labels : lab1,
datasets : [
{
label: 'names[0]',
fill: false,
borderColor: "rgb(75,192,192)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgb(75,192,192)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgb(75,192,192)",
pointHoverBorderColor: "rgb(75,192,192)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data : d1
}
]
},
options: {
animation : false,
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'kW'
}
}]
}
}
});
function dataPointGenerator(start, end) {
var rand = Math.floor(Math.random() * (end - start + 1) + start);
var date = new Date();
return {
data : rand,
time : date
}
};