Angular中Highcharts无法正常展示数据问题排查求助

已知存在大量同类问题，但仍未定位到问题所在——相同实现方式在另一组件的其他图表类型中可正常工作。我有一个子组件，从父组件接收数据用于展示堆叠柱状图，该图表偶尔能显示，但大多时候加载失败，怀疑存在竞态条件。常遇到错误：Cannot read properties of undefined (reading 'setData')，尽管此时chart对象已存在，控制台显示调用setData或addSeries时liquidityChart已有数据。

column.component.html代码 #

<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions" [callbackFunction]="chartCallback" [(update)]="updateFlag" style="width: 100%; height: 400px; display: block;"></highcharts-chart>

column.component.ts代码 #

export class ColumnComponent implements OnInit {

chartRef: any;

Highcharts = Highcharts;
chartOptions: any;

@Input() liquidityChart: Map<string, Pair[]>[] = [];
@Input() chartLabels: string[] = [];
@Input() title: string = ''

updateFlag: boolean = false;

constructor() { }

  ngOnInit() {
    this.chartOptions = {
      chart: {
        type: 'column',
        backgroundColor: '#424242',
        plotBackgroundColor: '#424242',
        plotBorderWidth: null,
        plotShadow: false,
        zoomType: 'x'
      },
      title: {
        text: 'Liquidity',
        style: {
          color: '#FFFFFF'
        }
      },
      xAxis: {
        categories: this.chartLabels, //["Sep 23", "Oct 23", "Nov 23", "Dec 23", "Mar 24", "Jun 24", "Sep 24"],

        labels: {
          style: {
            color: '#FFFFFF'
          }
        }
      },
      yAxis: {
        min: 0,
        title: {
          text: '% AUM'
        },
        stackLabels: {
          enabled: true
        },
        labels: {
          style: {
            color: '#FFFFFF'
          }
        }
      },
      tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y }<br/>'
      },
      plotOptions: {
        column: {
          stacking: 'normal',
          dataLabels: {
            enabled: true
          }
        }
      },
      series: []
  // {
  //     "name": "Fund 1",
  //     "data": [
  //         0.0381,
  //         0.0,
  //         0.0,
  //         0.0,
  //         0.0,
  //         0.0,
  //         0.0
  //     ]
  // },

    }

    HC_exporting(Highcharts);

    setTimeout(() => {
      window.dispatchEvent(
        new Event('resize')
      );
    }, 300);
  }
  ngOnChanges(changes: SimpleChanges) {
    this.updateChart()
  }
  chartCallback: Highcharts.ChartCallbackFunction = (chart) => {
    this.chartRef = chart;
    console.log('chartCallback has been called')
    this.updateChart();
  };


  updateChart(): void {
    console.log('updateChart has been called')
    if (this.chartRef != null) {
      console.log('updatingChart', this.chartRef)
      if (this.chartRef.series > 0) {
        console.log('setting data', this.chartRef.series)
        this.chartRef.series[0].setData(this.liquidityChart)
      }
      else {
        console.log('adding data', this.chartRef.series, this.liquidityChart)
        this.chartRef.addSeries(this.liquidityChart)
      }
    }


    this.updateFlag = false;
  }

  
}

排查线索 #

• 竞态条件验证：ngOnChanges可能在chartCallback之后但Highcharts实例未完全就绪时触发，此时series数组存在但series[0]未初始化。在updateChart中增加双重检查：

  if (this.chartRef.series.length > 0 && this.chartRef.series[0]) {
    this.chartRef.series[0].setData(this.liquidityChart)
  }
  

• 数据格式匹配：堆叠柱状图对series数据格式要求严格，确认liquidityChart是否符合Highcharts规范（每个series需包含name和data数组，当前传入的Map<string, Pair[]>结构可能无法被正确解析，导致series[0]创建失败）。
• 初始化时机调整：ngOnInit中xAxis.categories直接使用this.chartLabels可能因父组件数据未同步导致初始化异常，改为在updateChart中动态更新：

  if (this.chartRef) {
    this.chartRef.xAxis[0].setCategories(this.chartLabels);
  }
  

• 防抖处理输入变更：若父组件频繁更新数据，多次触发updateChart会导致Highcharts状态混乱，添加防抖函数限制调用频率：

  private updateChartDebounced = debounce(() => this.updateChart(), 100);
  
  ngOnChanges(changes: SimpleChanges) {
    this.updateChartDebounced();
  }
  

• 打印实例状态：在updateChart中打印this.chartRef.series的具体内容，确认数组长度、元素类型，判断是否因异步初始化导致series元素未正确实例化。

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