ハイチャートinAngular 2でサーバーからデータをロードする方法は？

Question

これは私のchartcomponentであり、サーバからの値を持つグラフを表示したいのですが、 それは静的な値で動作していますが、ngOnInitの静的な値 で動作しません。webserviceを呼び出して、データ

@Component({ 
template: ` <div style="width:60%" id="container"></div>`, 
}) 
export class chartComponent implements OnInit { 
dataa:any 
ngOnInit(): void { 
this.ser.getDate().subscribe(data =>{this.dataa = data, console.log(data)}) 
    this.renderChart(); 
} 
constructor(private ser: MesuresService) { } 
data: any = [ 
    { 
     name: 'USA', 
     //data :[1,2,3,4] // it works 
     data: this.dataa // it doesn't work 
    }, 
]; 

renderChart() { 
    jQuery('#container').highcharts({ 
     chart: { 
      type: 'area' 
     }, 
     title: { 
      text: 'US and USSR nuclear stockpiles' 
     }, 
     subtitle: { 
      text: 'Source: thebulletin.metapress.com' 
     }, 
     xAxis: { 
      allowDecimals: false, 
      labels: { 
       formatter: function() { 
        return this.value; 
       } 
      } 
     }, 
     yAxis: { 
      title: { 
       text: 'Nuclear weapon states' 
      }, 
      labels: { 
       formatter: function() { 
        return this.value/1000 + 'k'; 
       } 
      } 
     }, 
     tooltip: { 
      pointFormat: '{series.name} produced <b>{point.y:,.0f}</b>' + 
      '<br/>warheads in {point.x}' 
     }, 
     plotOptions: { 
      area: { 
       pointStart: 1940, 
       marker: { 
        enabled: false, 
        symbol: 'circle', 
        radius: 2, 
        states: { 
         hover: { 
          enabled: true 
         } 
        } 
       } 
      } 
     }, 
     series: this.data 
    }); 
} 
} 

にconsole.log（データ）にそれを呼び出すは=リターン[0.1,0.4,0.2]

Answer 1

私は解決策

declare var jQuery:any; 

export class StatComponent implements OnInit { 
    ngOnInit(): void { 

    } 
constructor(private ser:MesuresService,private http : Http){ 
http.request('http://localhost:1616/.................').subscribe(res=> 
{ 
jQuery('#container').highcharts({ 
     chart: { 
      type: 'area', 
      zoomType: 'x' 

     }, 
     title: { 
      text: 'US and USSR nuclear stockpiles' 
     }, 
     subtitle: { 
      text: 'Source: thebulletin.metapress.com' 
     }, 
     xAxis: { 
      allowDecimals: false, 
      labels: { 
       formatter: function() { 
        return this.value; 
       } 
      } 
     }, 
     yAxis: { 
      title: { 
       text: 'Nuclear weapon states' 
      }, 
      labels: { 
       formatter: function() { 
        return this.value/1000 + 'k'; 
       } 
      } 
     }, 
     tooltip: { 
      pointFormat: '{series.name} produced <b>{point.y:,.0f}</b>' + 
         '<br/>warheads in {point.x}' 
     }, 
     plotOptions: { 
      area: { 
       pointStart: 1940, 
       marker: { 
        enabled: false, 
        symbol: 'circle', 
        radius: 2, 
        states: { 
         hover: { 
          enabled: true 
         } 
        } 
       } 
      } 
     }, 
     series: [ 
     { 
      name: 'USA', 
      data: res.json() 
     }, 
     ] }); 
}) 
}} 

Answer 2

ngOnInit（）：ボイド{this.ser.getDate（ ）。サブスクリプション（データ=> {this.dataa = データ、にconsole.log（データ）}） this.renderChart（）です。 }

は、サーバーからデータを受信したときにのみグラフを表示するように変更する必要があります。

export class chartComponent implements OnInit { 
    data; 

    ngOnInit(): void { 
    this.ser.getDate().subscribe(data =>{ 
    this.data = [{name: 'USA', data}]; 
    this.renderChart(); 
    }); 
    } 
... 
}