我在Angular中使用chart.js来显示数据。

是否有办法重置更改选项卡上的yAxes数据？
这里是Stackblitz演示的链接。
在加载时，我会得到如下所示的数据。

如果我改变选项卡比数据来完美如下图。

但是当我再次将标签页更改为第一个标签页时，数据是完美的，但yAxes数据没有改变，因此我的图表看起来与初始加载不同。如下图。

HTML代码

<mat-tab-group #tabgroup2 class="chart-filter-list" (selectedTabChange)="onTabChanged($event);">
    <mat-tab label="{{'This Week' | translate}}"></mat-tab>
    <mat-tab label="{{'This Month' | translate}}"></mat-tab>
    <mat-tab label="{{'This Year' | translate}}"></mat-tab>
</mat-tab-group>

<div class="chart-body">
    <canvas baseChart
            [datasets]="recruitingChartData"
            [labels]="recruitingChartLabels"
            [options]="recruitingChartOptions"
            [legend]="recruitingChartLegend"
            [plugins]="recruitingChartPlugins"
            [colors]="recruitingChartColors"
            [chartType]="recruitingChartType">
    </canvas>
</div>

ts文件代码

onTabChanged($event) {
    const eventLabel = $event.tab.textLabel
    if (eventLabel == 'This Year'){
      this.tabSelectValue = 'yearly'
    }else if (eventLabel == 'This Month'){
      this.tabSelectValue = 'monthly'
    }else {
      this.tabSelectValue = 'weekly'
    }
    this.getDashboardMainData({});
}

// Recruiting Chart
public recruitingChartGetData : any = [];
public recruitingOpeningData : any = [];
public recruitingCandidateData : any = [];
public recruitingApplicationData : any = [];
public recruitingChartData: any = [
    { data: [ ], label: this.translate.instant('Job Openings') },
    { data: [ ], label: this.translate.instant('Candidates') },
    { data: [ ], label: this.translate.instant('Job Applications') },
];

public recruitingChartColors: any = [
    { // grey
      backgroundColor: 'rgba(255, 99, 71, 0)',
      borderColor: '#262f79',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    },
    { // Blue
      backgroundColor: 'rgba(255, 99, 71, 0)',
      borderColor: '#fdb167',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    },
    { // red
      backgroundColor: 'rgba(255, 99, 71, 0)',
      borderColor: '#30c76f',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    }

];
public recruitingChartLabels: any = [];
public recruitingChartOptions = {
    responsive: true,
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true
        }
      }]
    },
};
public recruitingChartLegend = false;
public recruitingChartType: any = 'line';
public recruitingChartPlugins = [];