Ionic 3 Angular Chart.js更新数据
Ionic 3 Angular Chart.js更新数据
提问于 2017-07-19 16:00:43
我正在使用Chart.js和我的Ionic3Angular应用程序。一切正常，除了我无法刷新实际更改的条形图的数据。
代码如下：
ionViewDidLoad(){
this.barChart = new Chart(this.barCanvas.nativeElement,
{
type: 'bar',
data: {
labels: ["Safeway", "CVS", "Walgreens", "Bon Appetit"],
datasets: [{
label: "Pepsi",
backgroundColor: "#002F6F",
data: this.pepsiData
}, {
label: "Coke",
backgroundColor: "#F50000",
data: this.cockData
}, {
label: "V8",
backgroundColor: "orange",
data: [83,19,32,34]
}]
},
options: {
title: {
display: true,
text: 'Brands'
}
}
});
}另一个按钮将pepsiData数组的数据更新为：
this.pepsiData[3] = 80;但这不会刷新特定的条形图。我现在有一个丑陋的解决方案是重新绘制整个图表，这看起来是一个糟糕的解决方案。
回答 1
Stack Overflow用户
发布于 2017-07-19 22:26:58
正如Chart.js文档中所提到的，如果您希望在图表创建后更新图表中的数据，则需要调用chart.update()：
http://www.chartjs.org/docs/latest/developers/updates.html
添加数据然后更新图表的示例：
function addData(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
dataset.data.push(data);
});
chart.update();
}在完成更新函数中的数据更改后，只需添加更新代码行，如下所示：
this.pepsiData[3] = 80;
myChart.update();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45184393
复制相关文章
相似问题
腾讯云开发者
