Angular中Apex Chart接收异步父组件数据时渲染不全求助

问题核心在于：子组件仅在ngOnInit阶段初始化图表配置，但父组件的异步数据是在ngOnInit执行之后才返回并传入子组件的。此时虽然@Input变量已更新，但ApexCharts实例未感知到数据变化，导致图表渲染异常。

以下是两种可行的解决方案：

方案1：通过OnChanges生命周期钩子监听输入变化 #

在子组件中实现OnChanges接口，监听series和labels的变化，触发图表更新：

import { Component, Input, OnInit, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
import { ApexChart } from 'ng-apexcharts';

@Component({
  selector: 'app-piechart',
  templateUrl: './piechart.component.html'
})
export class PiechartComponent implements OnInit, OnChanges {
  @Input() labels: string[] = [];
  @Input() series: number[] = [];
  chartOptions: Partial<ApexChart>;
  @ViewChild('chart') chart: any; // 关联模板中的图表实例

  ngOnInit(): void {
    this.initChart();
  }

  ngOnChanges(changes: SimpleChanges): void {
    // 仅在数据首次初始化后发生变化时更新图表
    if ((changes['series'] && !changes['series'].firstChange) || (changes['labels'] && !changes['labels'].firstChange)) {
      this.updateChart();
    }
  }

  private initChart(): void {
    this.chartOptions = {
      series: this.series,
      chart: { type: 'donut', width: 200 },
      dataLabels: { enabled: false },
      colors: ['#197254', '#62DAB3', '#E2F96F'],
      legend: { show: false },
      labels: this.labels,
      tooltip: { enabled: false },
      plotOptions: {
        pie: { donut: { size: '80%', labels: { show: false } } }
      }
    };
  }

  private updateChart(): void {
    if (this.chart) {
      // 调用ApexCharts内置方法更新数据
      this.chart.updateOptions({
        series: this.series,
        labels: this.labels
      });
    } else {
      // 若图表未初始化则重新初始化
      this.initChart();
    }
  }
}

同时需要在子组件模板中给图表添加#chart标识，以便通过ViewChild获取实例：

<apx-chart #chart [options]="chartOptions"></apx-chart>

方案2：使用@Input setter监听数据变化 #

通过给@Input属性设置setter，在数据更新时直接触发图表更新：

import { Component, Input, OnInit, ViewChild } from '@angular/core';
import { ApexChart } from 'ng-apexcharts';

@Component({
  selector: 'app-piechart',
  templateUrl: './piechart.component.html'
})
export class PiechartComponent implements OnInit {
  private _labels: string[] = [];
  private _series: number[] = [];
  chartOptions: Partial<ApexChart>;
  @ViewChild('chart') chart: any;

  @Input() set labels(value: string[]) {
    this._labels = value;
    this.updateChart();
  }
  get labels(): string[] {
    return this._labels;
  }

  @Input() set series(value: number[]) {
    this._series = value;
    this.updateChart();
  }
  get series(): number[] {
    return this._series;
  }

  ngOnInit(): void {
    this.initChart();
  }

  private initChart(): void {
    this.chartOptions = {
      series: this._series,
      chart: { type: 'donut', width: 200 },
      dataLabels: { enabled: false },
      colors: ['#197254', '#62DAB3', '#E2F96F'],
      legend: { show: false },
      labels: this._labels,
      tooltip: { enabled: false },
      plotOptions: {
        pie: { donut: { size: '80%', labels: { show: false } } }
      }
    };
  }

  private updateChart(): void {
    if (this.chart) {
      this.chart.updateOptions({
        series: this._series,
        labels: this._labels
      });
    } else if (this._series.length && this._labels.length) {
      this.initChart();
    }
  }
}

关键原理 #

ApexCharts不会自动响应Angular的@Input变量变化，必须手动调用updateOptions方法通知图表实例更新数据。上述两种方案都是通过监听输入数据的变化，触发图表的重新配置或更新，确保异步数据加载完成后图表能正确渲染。

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