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

Ionic 3 Angular Chart.js更新数据

1 个答案: