Chartjs：如何在 Ionic 4 中切換圖表的可見性

Question

我目前有 2 個圖表 - 1 個餅圖和 1 個條形圖，均使用 ChartJS 和 Ionic 4/Angular 完成。 我想讓它當我點擊一個按鈕時，它會在 2 個圖表之間切換。 最初，當我單擊按鈕進行更改時，圖形會切換。 但是，當我將鼠標懸停在圖表上時，圖表會繼續同時出現（就好像它們在同一畫布上相互重疊）。

這是我的代碼：

.html

<ion-content>
  <ion-list-header color="light">Vertical Bar Chart</ion-list-header>
  <ion-card class="welcome-card">
    <ion-card-header>
      <ion-card-subtitle>Number of Viewers per season for</ion-card-subtitle>
      <ion-card-title>Game of Thrones</ion-card-title>
    </ion-card-header>
    <ion-card-content>
        <canvas #barChart></canvas>
    </ion-card-content>
  </ion-card>

  <ion-grid>
    <ion-row>
      <ion-col style="text-align:center;">
        <ion-button (click)="viewBarChart()">Bar Chart</ion-button>
      </ion-col>
      <ion-col style="text-align:center;">
        <ion-button (click)="viewPieChart()">Pie Chart</ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

.ts 文件

createBarChart() {
    this.bars = new Chart(this.barChart.nativeElement, {
      type: 'bar',
      data: {
        labels: ['S1', 'S2', 'S3', 'S4', 'S5', 'S6', 'S7', 'S8'],
        datasets: [{
          label: 'Finished Tasks',
          data: [2.5, 3.8, 5, 6.9, 6.9, 7.5, 10, 17],
          backgroundColor: 'rgb(38, 194, 129)', // array should have same number of elements as number of dataset
          borderColor: 'rgb(38, 194, 129)',// array should have same number of elements as number of dataset
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });
  }


viewPieChart(){
    this.bars = new Chart(this.barChart.nativeElement, {
      type: 'pie',
      data: {
        labels: ['Incomplete', 'In Progress', 'Finish', 'Overdue'],
        datasets: [{
          label: 'Number of Tasks',
          data: this.pieChartData,
        }]
      }
    });

    this.bars.update();
  }

viewBarChart(){
    this.bars = new Chart(this.barChart.nativeElement, {
      type: 'pie',
      data: {
        labels: ['Incomplete', 'In Progress', 'Finish', 'Overdue'],
        datasets: [{
          label: 'Number of Tasks',
          data: [14, 1, 9, 2],
          backgroundColor: 'rgb(38, 194, 129)',          
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });

    this.bars.update();
  }

ionViewDidEnter(){
    this.createBarChart();
}

Answer 1

添加一個函數以從畫布中刪除任何現有圖表：

destroyChart() {
 if(this.bars) {
    this.bars.destroy()
 }
}

在對new Chart進行任何調用之前立即調用此函數

另外，也許將this.bars重命名為this.currentChart

請參閱https://www.chartjs.org/docs/latest/developers/api.html#destroy