Javascript Chartjs：如何在Ionic 4中切换图表的可见性

我目前有两个图表-一个饼图和一个条形图，都是使用ChartJS和Ionic 4/Angular完成的。我想这样，当我点击一个按钮时，它将在两个图表之间切换。最初，当我单击按钮进行更改时，图形会切换。但是，当我将鼠标悬停在图表上时，图表会同时出现，就好像它们在同一画布上相互重叠一样

这是我的密码：

.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>

---

添加从画布中删除任何现有图表的函数：

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

在调用任何新图表之前调用此函数

另外，可以将this.bar重命名为this.currentChart

---

请参见

您不是在切换图表，而是在每次调用new Chartthis.barChart.nativeElement时向画布添加一个新图表。在当前设置中，如果切换10次，画布上将显示10个图表

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