我把2个图表在同一页（条形图和折线图），我动态地改变数据。两个图表都会显示，但只有顶部的图表会更新。我不明白为什么会这样。数据或图表真的没有错，如果我改变图表的顺序，它仍然是一样的。放在页面顶部的一个得到更新，第二个保持空白。
他们使用不同的数据集。
我正在使用Angular和Chart.Js与ng 2-charts的BaseChartDirective。
这是密码

进口量

import { Chart, ChartConfiguration, ChartData, ChartEvent, ChartType } from 'chart.js';
import { BaseChartDirective } from 'ng2-charts';

编辑

当一个特定的变化发生时，数组被清理，然后新的数据被推送到一个数组。

数据

line_array1 = new Array();
line_array2 = new Array();
bar_array1 = new Array();
bar_array2 = new Array();

ngOnChanges(charters: SimpleChanges){

// Arrays get Cleaned first !

this.line_array1.push(xyz);
this.line_array2.push(xyz);
this.bar_array1.push(zyx);
this.bar_array2.push(zyx);

}

折线图

public lineChartData: ChartConfiguration['data'] = {
    datasets: [
      {
        data: this.line_array1,
        label: 'Series A',
        backgroundColor: '#FFB1C1',
        borderColor: '#FFB1C1',
        pointBackgroundColor: 'rgba(148,159,177,1)',
        pointBorderColor: '#fff',
        pointHoverBackgroundColor: '#fff',
        pointHoverBorderColor: 'rgba(148,159,177,0.8)',
      },
      {
        data: this.line_array2,
        label: 'Series B',
        backgroundColor: '#9BD0F5',
        borderColor: '#9BD0F5',
        pointBackgroundColor: 'rgba(77,83,96,1)',
        pointBorderColor: '#fff',
        pointHoverBackgroundColor: '#fff',
        pointHoverBorderColor: 'rgba(77,83,96,1)',
      },

    ],
    labels: this.line_labels
  };

  public lineChartOptions: ChartConfiguration['options'] = {
    elements: {
      line: {
        tension: 0,
      },
    },
    scales: {
      // We use this empty structure as a placeholder for dynamic theming.
      y: {
        position: 'left',
      },
      x:{
        grid:{
            display: false,
        }
      },
      y1: {
        position: 'right',
        grid: {
          color: 'rgba(255,0,0,0.3)',
          display: false
        },
        ticks: {
          color: 'red',
        },
      },
    },

    plugins: {
      legend: { display: false},
      datalabels: {
          display: false
        },
    },
  };

  public lineChartType: ChartType = 'line';

  @ViewChild(BaseChartDirective) line: BaseChartDirective | undefined;

public chartHovered({
    event,
    active,
  }: {
    event?: ChartEvent;
    active?: object[];
  }): void {
    console.log(event, active);
  }

条形图

@ViewChild(BaseChartDirective) bar: BaseChartDirective | undefined;

public barChartOptions: ChartConfiguration['options'] = {
  responsive: true,
  scales: {
    x: {
        grid: {
display: false
        }
    },
    y: {
      min: 0,
      grid: {
        display: false
                }
    },
  },
  plugins: {
    legend: {
      display: false,
    },
    datalabels: {
        display: false
      },
  },
};
public barChartType: ChartType = 'bar';
public barChartPlugins = [DataLabelsPlugin];

public barChartData: ChartData<'bar'> = {
    labels: this.bar_labels,
     datasets: [
    { data: this.bar_array1},
    { data: this.bar_array2 },
  ],
};

HTML是这样的

<mat-tab-group>
<mat-tab label="Charts">
 <br>
 <br>
 <canvas
   baseChart
   class="chart"
   [data]="barChartData"
   [options]="barChartOptions"
   [plugins]="barChartPlugins"
   [type]="barChartType"></canvas>
 <br>
</mat-tab>

<mat-tab label="Line">
   <br>
   <br>
<canvas
   baseChart
   class="chart"
   [data]="lineChartData"
   [options]="lineChartOptions"
   [type]="lineChartType"></canvas>
</mat-tab>
</mat-tab-group>

由于在页面上条形图是第一个，这是一个得到动态更新。如果我要改变，把折线图放在顶部，那将是一个得到更新。
问题是，如果我选择了折线图的Mat-Tab，“正如我所说的，图表不会动态更新”，然后导航到另一个选项卡，然后返回折线图选项卡，图表就会更新。