如何用角度填充Highchart图

Question

我想用REST控制器的答案填充Highchart图，这是Angular9组件的打字稿部分：

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import { ApiService } from '../api.service';

@Component({
  selector: 'jhi-device-graph',
  templateUrl: './device-graph.component.html',
  styleUrls: ['./device-graph.component.scss']
})
export class DeviceGraphComponent implements OnInit {
  Highcharts: typeof Highcharts = Highcharts;
  chartOptions: Highcharts.Options = {
    xAxis: {
      type: 'datetime'
    },
    yAxis: {
      title: {
        text: 'Voltage'
      }
    },
    title: {
      text: 'Input voltage'
    },
    series: [
      {
        data: [
          [Date.UTC(2010, 0, 1), 29.9],
          [Date.UTC(2010, 2, 1), 71.5],
          [Date.UTC(2010, 3, 1), 106.4]
        ],
        type: 'line',
        name: 'Vin1'
      },
      {
        data: [
          [Date.UTC(2010, 0, 1), 39.9],
          [Date.UTC(2010, 2, 1), 91.5],
          [Date.UTC(2010, 3, 1), 96.4]
        ],
        type: 'line',
        name: 'Vin2'
      }
    ]
  };

  data: String[] = [];
  isLoadingResults = true;

  constructor(private api: ApiService) {}

  ngOnInit(): void {
    this.api.getInputVoltage('10.1.30.1').subscribe(
      (res: any) => {
        this.chartOptions.series.data[0]=res;
        this.data = res;
        //console.log(this.data);
        this.isLoadingResults = false;
        Highcharts.chart('container', this.chartOptions);
      },
      err => {
        //console.log(err);
        this.isLoadingResults = false;
      }
    );
  }
}

该代码包含用于测试目的的硬编码数据，但是应该替换为对GET API的响应（已实现）。 JSON格式类似于硬编码的数据：时间戳和值数组。

[当我尝试编译它时，出现以下错误：

[INFO] ERROR in src/main/webapp/app/device-graph/device-graph.component.ts:54:9 - error TS2532: Object is possibly 'undefined'.
[INFO] 
[INFO] 54         this.chartOptions.series.data[0]=res;
[INFO]            ~~~~~~~~~~~~~~~~~~~~~~~~
[INFO] src/main/webapp/app/device-graph/device-graph.component.ts:54:34 - error TS2339: Property 'data' does not exist on type 'SeriesOptionsType[]'.
[INFO] 
[INFO] 54         this.chartOptions.series.data[0]=res;
[INFO]                                     ~~~~

我在做什么错？

Answer 1

我不确定您确切要更新什么，但是看起来this.chartOptions.series是一个数组。因此，您可能需要执行this.chartOptions.series[0].data[0]=res。

OR

也许您会从API收到完整的数据数组。在这种情况下，要更新第一个数据，您需要执行this.chartOptions.series[0].data=res。这完全取决于您从后端接收什么数据以及您希望在图表中更新什么。