Angular HighCharts角度-从API设置图表数据

我正在尝试将图表的data属性设置为来自此API的值：

我已经创建了一个反映它的界面：

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: [],

    ...

  };

我试图将data属性（位于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 | PointOptions Object |[string | number，number | null]| null”。类型“ChartData”不能分配给类型“[string | number，number | null]”

我无法将ChartData[]分配给数据属性

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

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

这些值的设置方式似乎是正确的，这是一个成对的数组。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',
          }
        ];
}

chartDataX:number[]=[]；
chartDataY:编号[]=[]；
chartData:任意[]=[]；
ngOnInit（）：void{
此.chartService.getMostFrequentUpdateData（）已订阅(
（数据：ChartData[]）=>{
for（设i=0；i

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

• 数组

  ，
  

• 数组
  
  为了解决这个问题，我建议您创建两个数组
  item1
  和
  item2
  。在获取数据时，将点相应地推送到每个数组。然后将其传递到图表。
  谢谢您的回答，我已经按照您的建议进行了操作，但是数据仍然没有显示出来，尽管我没有发现任何错误。我已经更新了我的问题，以显示我所做的更改。如果您在
  图表选项
  中启动该系列，那么在
  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',
            }
          ];
  }