내가 차트를 만들기 위해이 NPM 패키지를 사용하고 각도 5

Question

와 highcharts 차트에 인터페이스에서 데이터를 가져 오기 : https://www.npmjs.com/package/angular-highcharts

내가 인터페이스를 가지고 있고 차트를 채우는 인터페이스에서 값을 먹고 싶어. 이 단계에서 내가 원하는 것은 모두 선 그래프입니다.

배열을 사용하여이 작업을 수행하는 다양한 방법을 시도했기 때문에 모든 값을 하드 코딩하여 초기화하면 하드웨어에서 동적으로 값을 인터페이스로로드하고 싶습니다. 인터페이스로부터 그래프에의 값 내가 도대체 ​​뭘 잘못하고있는 겁니까?

가 여기 내 component.ts

import { Component, OnInit } from '@angular/core'; 
import { Chart } from 'angular-highcharts'; 
import { WeatherstatsService } from '../weatherstats.service'; 
import 'rxjs/add/operator/map'; 

interface WeatherData { 
    id: any; 
    year: any; 
    measurement_type: string; 
    location: string; 
    month_or_season: string; 
    value?: any; 
} 

let datavalues: WeatherData [] = []; 

@Component({ 
    selector: 'weatherchart', 
    templateUrl: './weatherchart.component.html', 
    styleUrls: ['./weatherchart.component.css'] 
}) 
export class WeatherchartComponent implements OnInit { 

    constructor(private weatherstatsservice: WeatherstatsService) { } 



    title = "Title"; 
    data: any; 
    datavalues = datavalues; 
    values: Array<number> = []; 


    chart = new Chart({ 
     chart: { 
      type: 'line' 
     }, 
     title: { 
      text: this.title, 
     }, 
     credits: { 
      enabled: false 
     }, 
     series: [{ 
      name: 'Line 1', 
      data: this.datavalues.year, 
     }] 
     }); 

    // add point to chart serie 
    add() { 
     this.chart.addPoint(Math.floor(Math.random() * 10)); 
    } 

    ngOnInit() { 
      this.weatherstatsservice.getWeatherData() 
      .subscribe(data => { 
       this.data = data.slice(0, 100); 
      if(this.data){ 
       this.data.forEach(res => { 
       this.datavalues.push({ 
        id: res.id, 
        year: res.year, 
        measurement_type: res.measurement_type, 
        location: res.location, 
        month_or_season: res.month_or_season, 
        value: res.value, 
       }) 
       }); 
       console.log(this.datavalues); 

      } 
     }) 
     } 


    } 

Answer 1

그것은 도서관과 일반적인 문제입니다, 난 NG2 - 차트와 같은 문제에 직면하고 API를 사용하여 그리기에 의해 해결 될 수 있습니다.

당신은 같은 차트의 인스턴스를 전달하여 그것을 할 수 있습니다, 당신은 API에서 데이터를 얻을 때

<chart [options]="options" (load)="saveInstance($event.context)"></chart> 

및 TS

chart: Object; 
saveInstance(chartInstance): void { 
    this.chart = chartInstance; 
} 

와의

, 당신은

으로 다시 그릴 수 있습니다

updateSeries(data: Array<any>): void { 
    this.chart.series[0].setData(data); 
}