javascript - 新しいチャートを表示した後に以前のチャート（キャンバス）をどのように「破棄」するか | Angular 4

ドロップダウンが選択された後にグラフィックのデータを更新するコードがあります。しかし、オプションを選択すると、新しいグラフィックと古いグラフィックが同時に同じキャンバス上に存在しているように見えます。

これが私のコードです：

funcao(){

  this.graphicService.getDatas().subscribe(datas => {
        this.datas = datas; //Gets the data from the API and put on local datas variable

        if(this.data[0].dimension == "Tech")
        {
          this.counter=0;
        }
        else if(this.data[0].dimension == "Bus"){
          this.counter=1;
        }
              this.barChartData = { //Bar graphic data
                  labels: ["Entry", "Foundation"],
                  datasets: [{
                      label: this.datas[this.counter].subdimensions[0].name,
                      backgroundColor: 'rgba(37, 230, 131,0.7)'
                      data: [
                          this.datas[this.counter].subdimensions[0].entry,
                          this.datas[this.counter].subdimensions[0].foundation
                      ]
                  }]

              };

              this.canvas = document.getElementById('myChart');
              this.ctx = this.canvas.getContext('2d');

              let myChart = new Chart(this.ctx, { // Bar graphic configs
                     type: 'bar',
                     data: this.barChartData,
                     options: {
                         scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                          }
                     }
                 });
      });
}

HTML

<select [(ngModel)]="data[0].dimension" (change)="funcao()" class="form-control">
  <option *ngFor="let data of datas" [value]="data.dimension">{{ data.dimension }}</option>
</select>

  <canvas id="myChart"></canvas>

私がしたいのは、古いグラフィックが消えて、新しいものだけが画面に残ることです。

回答 #1

どうやらあなたはChartJSライブラリを使用しているようです。その場合、destroy() メソッドを使用して、以前のチャートのインスタンスを破棄することができます。

最初

チャートコンポーネントクラスにプロパティを追加します (チャートのインスタンスが格納される場所) :

public myChart: Chart

セカンド

新しいチャートを作成する前に、チャートのインスタンスを確認して破棄してください (もしあれば) :

...
if (this.myChart) this.myChart.destroy(); //destroy prev chart instance
this.myChart = new Chart(this.ctx, {
         type: 'bar',
         data: this.barChartData,
         ...