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()是 function，它使 http 调用 API：

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

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

Answer 1

订阅是异步的，因此当您将this.chartData分配给图表susbcribe时，它是空的。

您也可以通过一些改进代码的建议进行如下重构：

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