问题描述
var ctx = document.getElementById("canvas");
var Param1Data = {
label: "Param1",yAxisID: 'A',data: chartParam1Value,lineTension: 0.5,fill: false,borderColor: 'red'
};
var Param2Data = {
label: "Param2",yAxisID: 'B',data: chartParam2Value,borderColor: 'blue'
};
var MainDataSet = {
labels: chartDataValue,datasets: [Param1Data,Param2Data]
};
var chartOptions = {
legend: {
display: true,position: 'top',labels: {
BoxWidth: 80,fontColor: 'black'
}
},scales: {
yAxes: [{
id: 'A',type: 'linear',position: 'left',ticks: {
max: 10000,min: 0
}
},{
id: 'B',position: 'right',min: 0
}
}]
}
};
chart = new Chart(ctx,{ type: 'line',data: MainDataSet,options: chartOptions});
// chart = new Chart(ctx,config); // call for canvas
}
当我尝试使用此函数更新那 2 条数据线时,它不会更新线。
addData()
{
chart.data.labels.push(chartDataValue);
chart.data.datasets.forEach((dataset) => {
dataset.data.push(chartParam1Value);
});
chart.data.datasets.forEach((dataset) => {
dataset.data.push(chartParam2Value);
});
chart.update(); //Updating the chart
}
setInterval(addData,3000); // calling update method for new datapoint
我在 CharJS 图中有 2 个数据集用于 2 行,第一次数据插入绘制在图中是完美的,但是当我尝试更新数据集时,它没有通过 addData() 函数更新数据.有人可以展示如何通过 CharJS 图中的更新函数更新 2 行吗?
解决方法
根据文档 (https://www.chartjs.org/docs/latest/developers/updates.html#adding-or-removing-data) 将数据添加到数组后,您必须调用图表上的 update 方法来更新它,如下所示:
updateChart = (dataset) =>{
chart.data.datasets.forEach((dataset) => {
dataset.data.push(chartParam1Value);
});
chart.data.datasets.forEach((dataset) => {
dataset.data.push(chartParam2Value);
});
chart.update()
}