[英]How to Update 2 dataset for 2 lines in a CharJS line graph?
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,
lineTension: 0.5,
fill: false,
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',
type: 'linear',
position: 'right',
ticks: {
max: 10000,
min: 0
}
}]
}
};
chart = new Chart(ctx, { type: 'line', data: MainDataSet,options: chartOptions});
// chart = new Chart(ctx, config); // call for canvas
}
當我嘗試使用此 function 更新這兩條數據線時,它不會更新線。
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() function 更新數據。 有人可以通過在 CharJS 圖中更新 function 來展示如何更新 2 行嗎?
根據文檔( https://www.chartjs.org/docs/latest/developers/updates.html#adding-or-removing-data )將數據添加到數組后,您必須調用更新方法你的圖表像這樣更新它:
updateChart = (dataset) =>{
chart.data.datasets.forEach((dataset) => {
dataset.data.push(chartParam1Value);
});
chart.data.datasets.forEach((dataset) => {
dataset.data.push(chartParam2Value);
});
chart.update()
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.