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 是包含项目的 public 存储库（可能存在一些合并冲突）。

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',
          }
        ]; 
      });

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

HighCharts Angular - data from API not showing in chart

html

api

highcharts

typescript

angular