Ionic 3 Angular Chart.jsデータを更新する

Question

私はIonic 3 Angular appでChart.jsを使用しています。実際に変更されたバーのデータを最新表示できないことを除いて、すべて正常に動作します。

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