HighCharts Angular - 来自 API 的设置图表数据

Question

我正在尝试将图表的数据属性设置为来自此 API: https://bgpie.net/api/rrc/00/mostfrequentstatefrequencycdf的值。

我创建了一个反映它的接口：

export interface ChartData{
    item1: number;
    item2: number;
}

这是我的图表

chartOptions: Options = {
    title: {
      text: 'CDF of the most frequent update frequency',
      style: {
        color: 'whitesmoke'
      }
    },
    chart: {
      type: 'line',
      zoomType: 'x',
      backgroundColor: '#323232',
    },

    ...

    series: [],

    ...

  };

我正在尝试将数据属性（位于系列属性内）设置为从 API 获得的值。 请注意，数据属性可以像这样硬编码：

series: [
  {
   data: [[1,2], [2,4] [3,7] ...] 

对的第一个值是 x 轴值，第二个值是 y 轴值，ChartData 也是如此：item1 是 x 轴值，item2 是 y 轴值。 这是我的尝试：

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

我收到以下错误：类型 'ChartData[]' 不可分配给类型 '(number | PointOptionsObject | [string | number, number | null] | null)[]'。 类型 'ChartData' 不可分配给类型 'number | 点选项对象 | [字符串 | 数字，数字 | 空] | 无效的'。 类型 'ChartData' 不可分配给类型 '[string | 数字，数字 | 无效的]'。

我无法将 ChartData[] 分配给 data 属性。

我在写这篇文章时确实意识到 ChartData 包含两个数字，但它应该是一个包含两个数字以匹配数据类型的 ARRAY，我认为这是问题所在，但我不知道如何解决它。 为清楚起见，这是我服务中的 http 调用

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

这是一个 github 存储库，包含项目https://github.com/mauri5566/sitocopy/blob/master/src/app/components/home/modal-most-frequent-update/modal-most-frequent-update.component .ts （不幸的是它包含一些合并冲突）

编辑：我根据 Karol Kołodziej 的建议进行了新的尝试，但它仍然不会显示数据。 我检查了 console.log 并且chartData收到以下值：

0: (2) [0, 0]
1: (2) [1, 98.60093378412567]
2: (2) [2, 99.69295521976126]
3: (2) [3, 99.79668345638125]
4: (2) [5, 99.87971204489524]
5: (2) [7, 99.92847121598932]
6: (2) [10, 99.97148048483176]
7: (2) [14, 99.98068032843442]
8: (2) [20, 99.9903401642172]
9: (2) [29, 99.99172014075761]
10: (2) [40, 99.99356010947814]
11: (2) [57, 99.99402010165828]
12: (2) [80, 99.99977000390994]

这些值的设置方式似乎是正确的，它是一对数组。 chartData 接口的设置方式仍然相同，这就是我设置ngOnInit的方式：

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

Answer 1

您的怀疑是正确的，传递给系列的数据应该是：

• Array<number> ,
  
• Array<Array<number>>或
  
• Array<Object>在 object 中你至少有x和y 。

数据应该是什么样子： https://api.highcharts.com/highcharts/series.line.data

为了解决我的建议，您应该创建两个 arrays item1和item2 。 当您获取该数据时，将点相应地推送到每个数组。 然后将其传递给图表。