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