Как заполнить график Highchart Angular

Question

Я хочу заполнить график Highchart ответом контроллера REST, вот машинописная часть компонента 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]                                     ~~~~

Что я не так?

РЕДАКТИРОВАТЬ: Это мой JSON, но проблема в том, что приведенный выше код даже не компилируется https://pastebin.com/D6MBG2dW

Answer 1

Я не уверен, что именно вы хотите обновить, но похоже, что this.chartOptions.series - это массив. Поэтому вам, возможно, придется сделать this.chartOptions.series[0].data[0]=res.

ИЛИ

Возможно, вы получите полный массив данных из API. В этом случае, чтобы обновить первые данные, вам нужно сделать this.chartOptions.series[0].data=res. Все зависит от того, какие данные вы получите от бэкэнда и что вы будете sh обновлять на графике.