0

我的 ngonInit() 中有这个函数，它从后端检索数据并将其传输到这个变量this.chartOptions.series[0]['data']中，这个变量用作将收集的数据传输到我的 highcharts 数据中的引用，该数据位于我的导出类中。为了更好地理解，这是我带有注释的代码：

import { Component, OnInit } from '@angular/core';

import { PredictService } from '../predict.service';
import * as Highcharts from 'highcharts';
import { Forecasting } from '../forecasting';
import { interval } from 'rxjs';


declare var require: any;
let Boost = require('highcharts/modules/boost');
let noData = require('highcharts/modules/no-data-to-display');
let More = require('highcharts/highcharts-more');

Boost(Highcharts);
noData(Highcharts);
More(Highcharts);
noData(Highcharts);

@Component({
  selector: 'app-try2',
  templateUrl: './try2.component.html',
  styleUrls: ['./try2.component.css']
})
export class Try2Component implements OnInit {
   highcharts = Highcharts;
   public chartOptions: any = {
       chart: {
          type: "spline"
       },
       title: {
          text: "Monthly Average Temperature"
       },
       subtitle: {
          text: "Source: WorldClimate.com"
       },
       xAxis:{
          categories:["Jan", "Feb", "Mar", "Apr", "May", "Jun",
             "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
       },
       yAxis: {          
          title:{
             text:"Temperature °C"
          } 
       },
       tooltip: {
          valueSuffix:" °C"
       },
       series: [{
          type: 'spline',
          name: 'Tokyo',
          data: []  //This is where I want to transfer the data(this.chartOptions.series[0]['data'])coming from the ngOnInit()
       
      }]
    };
  

  constructor(private ps: PredictService) { }

   forecast:Forecasting;
  
   
  ngOnInit(): void {

    this.ps.readForecast().subscribe ((response) => 
     {   this.chartOptions.series[0]['data'] = response[0];
         Highcharts.chart('container', this.chartOptions);
        
        } );
      
     
  }
  

  

  onRead(){

  
 
 }

 
 

}
4

1 回答 1

0

Try saving response into a variable and use that variable where you want to insert a data.

 import { Component, OnInit } from '@angular/core';

    import { PredictService } from '../predict.service';
    import * as Highcharts from 'highcharts';
    import { Forecasting } from '../forecasting';
    import { interval } from 'rxjs';
    
    
    declare var require: any;
    let Boost = require('highcharts/modules/boost');
    let noData = require('highcharts/modules/no-data-to-display');
    let More = require('highcharts/highcharts-more');
    
    Boost(Highcharts);
    noData(Highcharts);
    More(Highcharts);
    noData(Highcharts);
    
    @Component({
      selector: 'app-try2',
      templateUrl: './try2.component.html',
      styleUrls: ['./try2.component.css']
    })
    export class Try2Component implements OnInit {
       highcharts = Highcharts;
       public chartOptions: any = {
           chart: {
              type: "spline"
           },
           title: {
              text: "Monthly Average Temperature"
           },
           subtitle: {
              text: "Source: WorldClimate.com"
           },
           xAxis:{
              categories:["Jan", "Feb", "Mar", "Apr", "May", "Jun",
                 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
           },
           yAxis: {          
              title:{
                 text:"Temperature °C"
              } 
           },
           tooltip: {
              valueSuffix:" °C"
           },
           series: [{
              type: 'spline',
              name: 'Tokyo',
              data: this.responseData
           
          }]
        };
      
    
      constructor(private ps: PredictService) { }
    
       forecast:Forecasting;
      
       responseData:any;
      ngOnInit(): void {
    
        this.ps.readForecast().subscribe ((response) => 
{          this.responseData = response[0];
           // this.chartOptions.series[0]['data'] = response[0];
             Highcharts.chart('container', this.chartOptions);
            
            } );
      }
    
      onRead(){ }
    }
于 2022-02-25T08:24:45.947 回答