Блог

Цель:

Моя цель состоит в том, чтобы создать график из данных, которые извлекаются через API и вызываются, а затем преобразуются. Вызов происходит внутри ngOnInit(), а построение графиков происходит вне его. Я не могу получить данные, которые извлекаются, помещаются в график:

 import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {StockServicesComponent} from '../services/stock-services.component';
import * as Highcharts from 'highcharts/highstock';
import { Options } from 'highcharts/highstock';

@Component({
  selector: 'app-high-charts',
  templateUrl: './high-charts.component.html',
  styleUrls: ['./high-charts.component.css']
})
export class HighChartsComponent implements OnInit {

  constructor( private route: ActivatedRoute,
               private service: StockServicesComponent) { }

  stockPrices = [];
  dates = [];
  prices = [];
  newDataset = [];

  Highcharts: typeof Highcharts = Highcharts;
  chartOptions: Options = {
    series: [
      {
        type: 'line',
        pointInterval: 24 * 3600 * 1000,
        data : this.newDataset
      }
    ]
  };

  ngOnInit(): void {
    this.route.params.subscribe(params => {
      const tickerId = params.tickerId;
      this.service.findCompanyPriceHistory(tickerId)
        .then(stockPrices => this.stockPrices = stockPrices);
      console.log('Reached Highcharts 1: ', this.newDataset);

      this.stockPrices.forEach(obj => {
        const tmp = [];
        tmp.push(obj.updated);
        tmp.push(obj.close);
        this.newDataset.push(tmp);
        console.log('----------------');
      });
      console.log('Reached Highcharts 2: ', this.newDataset);
    });
  }
}
 

Вопрос:

Как мне передать «NewDataSet» в график, как указано в «data : this.NewDataSet»?

Рассмотрим следующую реализацию, в которой обновление данных выполняется в рамках выделенной функции, которая, в свою очередь, запускается после разрешения данных (внутри .then ).:

 public updateDataSet(stockPrices: any[]):void {
  stockPrices.forEach(obj => {
    const tmp = [];
    tmp.push(obj.updated);
    tmp.push(obj.close);
    this.newDataset.push(tmp);
  });
}

ngOnInit(): void {
  this.route.params.subscribe(params => {
    this.service
      .findCompanyPriceHistory(params.tickerId)
      .then(stockPrices => this.updateDataSet(stockPrices));
  });
}
 

Или даже более кратко:

 ngOnInit(): void {
  this.route.params
    .pipe(
      switchMap(x => this.service.findCompanyPriceHistory(x.tickerId))
    )
    .subscribe(stockPrices => this.updateDataSet(stockPrices));
}
 

В приведенной ниже демонстрации вы можете найти пример того, как обрабатывать данные из внешней службы.
Это простое локальное решение, но оно может указать вам путь.

 export class AppComponent {
  Highcharts: typeof Highcharts = Highcharts;
  chartOptions: Options;

  constructor(dataService: DataService) {
    this.chartOptions = {
      series: [
        {
          type: "line",
          data: dataService.getData()
        }
      ]
    };
  }
}
 

Демонстрация: https://stackblitz.com/edit/highcharts-angular-data-from-service-2