[英]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.