Angular Highcharts 不显示来自 API 的数据

Question

感谢有很多类似的问题，但我不太明白我哪里出了问题，因为我在另一个控件中使用相同的方法处理不同的图表类型。

我有一个子组件，它从其父组件接收数据，旨在显示堆积柱形图。它偶尔会显示图表，但通常会失败，这让我认为存在某种竞争条件。

column.component.html

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

列.组件.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;
  }

  
}

在我的其他组件中，它的工作方式与此相同，它接收数据，我调用 series[0].setData(data) 函数，它可以工作，但在这里我通常会得到“无法读取未定义的属性”（读取“setData”） )' 错误，即使我有一个图表对象。

登录到控制台告诉我，当我尝试 setData 或 addSeries 时，liquidityChart 对象有数据。

任何线索将不胜感激！

Answer 1

这不是“答案”，而是为了完整性，以防任何人遇到类似的问题，但它似乎已经解决了自己，而无需对代码本身进行任何更改（尽管我不确定我是否升级了库的次要版本）