HighCharts Angular - 来自 API 的数据未显示在图表中

Question

我试图在我的图表中显示来自bgpie API 的数据。 图表的数据属性接受这种格式：

chartOptions: Options = {
   
  ...

  series: [{
            ...
            data: [[1, 5], [2, 3], [3, 8]];
            ...
          }]

格式是一对数组，其中第一个值是 x 轴值，第二个值是 y 轴值。我的 API 有不同的格式：[{item1,item2}, {item1,item2}, {item1,item2}]。

为了将其更改为[[item1,item2], [item1,item2], [item1,item2]]，我已经这样做了：

chartDataX: number[] = [];
chartDataY: number[] = [];
chartData: any[] = [];


ngOnInit(): void {
    this.chartService.getMostFrequentUpdateData().subscribe(
      (data: ChartData[]) => {
        for (let i = 0; i < data.length; i++){
          this.chartDataX.push(data[i].item1);
          this.chartDataY.push(data[i].item2);
          this.chartData.push([this.chartDataX[i], this.chartDataY[i]]);
        }
      });
    this.chartOptions.series = [
          {
            name: 'ao',
            type: 'line',
            data: this.chartData,
            color: '#009879',
          }
        ];

}

getMostFrequentUpdateData() 是一个对 API 进行 http 调用的函数：

getMostFrequentUpdateData(): Observable<ChartData[]>{
    return this.http.get<ChartData[]>('https://bgpie.net/api/rrc/00/mostfrequentstatefrequencycdf');
  }

This 是包含项目的公共存储库（可能存在一些合并冲突）。

Answer 1

susbcribe 是异步的，因此当您将其分配给图表对象时，您的 this.chartData 为空。

您也可以按照以下方式进行重构，并提出一些改进代码的建议：

this.chartService.getMostFrequentUpdateData().subscribe(
      (data: ChartData[]) => {
        this.chartOptions.series = [
          {
            name: 'ao',
            type: 'line',
            data: data.map(e => [e.item1, e.item2]),
            color: '#009879',
          }
        ]; 
      });