Angular中ng2-charts双图表仅顶部可动态更新问题求助

在Angular项目中使用Chart.js和ng2-charts的BaseChartDirective，在同一个页面的Mat-Tab中分别放置了柱状图和折线图，二者使用不同数据集并需要实现数据动态更新。目前两个图表均可正常显示，但仅页面顶部的图表能实时更新数据；调整图表顺序后，仍是顶部的图表可更新，另一图表始终无变化。只有选中非顶部图表所在Tab，切换到其他Tab再返回，该图表才会更新数据。

相关代码 #

【Imports】 #

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: {
      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>

问题原因 #

Angular的Mat-Tab默认会对非激活Tab的内容进行惰性加载/视图销毁，同时ng2-charts的BaseChartDirective在数组数据更新时，由于数组是引用类型，Angular变更检测可能无法感知到内部元素的变化，加上非激活Tab的图表实例可能未正确初始化或未触发更新，导致无法实时刷新。

解决步骤 #

1. 修正@ViewChild实例获取 #

当前@ViewChild未指定选择器，可能导致实例获取错误。给每个图表添加模板引用变量：

• 修改HTML中的canvas标签：

<!-- 柱状图添加#barChart -->
<canvas
   #barChart
   baseChart
   class="chart"
   [data]="barChartData"
   [options]="barChartOptions"
   [plugins]="barChartPlugins"
   [type]="barChartType"></canvas>

<!-- 折线图添加#lineChart -->
<canvas
   #lineChart
   baseChart
   class="chart"
   [data]="lineChartData"
   [options]="lineChartOptions"
   [type]="lineChartType"></canvas>

• 组件中更新@ViewChild：

@ViewChild('barChart') bar: BaseChartDirective | undefined;
@ViewChild('lineChart') line: BaseChartDirective | undefined;

2. 手动触发图表更新 #

在数据更新完成后，调用图表实例的update()方法强制刷新：

ngOnChanges(charters: SimpleChanges){
  // 清空数组（推荐用length=0替代重新new Array）
  this.line_array1.length = 0;
  this.line_array2.length = 0;
  this.bar_array1.length = 0;
  this.bar_array2.length = 0;

  // 推送新数据
  this.line_array1.push(xyz);
  this.line_array2.push(xyz);
  this.bar_array1.push(zyx);
  this.bar_array2.push(zyx);

  // 延迟触发更新，确保Angular变更检测完成
  setTimeout(() => {
    this.line?.update();
    this.bar?.update();
  }, 0);
}

3. 保留Mat-Tab内容（可选） #

如果希望非激活Tab的图表实例始终存活，给mat-tab-group添加preserveContent属性：

<mat-tab-group [preserveContent]="true">
  <!-- Tab内容 -->
</mat-tab-group>

该属性会保留非激活Tab的DOM和组件实例，避免视图销毁导致的图表实例丢失。

4. 触发Angular变更检测 #

将数组修改为创建新数组的方式，让Angular自动感知变化：

// 替代push，创建新数组
this.line_array1 = [...this.line_array1, xyz];
this.line_array2 = [...this.line_array2, xyz];
this.bar_array1 = [...this.bar_array1, zyx];
this.bar_array2 = [...this.bar_array2, zyx];

这种方式无需手动调用update()，但结合手动更新能确保兼容性。

内容的提问来源于stack exchange，提问作者allforthenoob