angular - Ionic 3 Angular Chart.js 更新数据

Question

我正在将 Chart.js 与我的 Ionic 3 Angular 应用程序一起使用。一切正常，除了我无法刷新实际更改的栏的数据。

这是代码:

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;

但这不会刷新特定的栏。我现在的丑陋解决方案是重新绘制整个图表，这看起来是一个糟糕的解决方案。

Answer 1

正如 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();