angular - Angular 2でハイチャートを使用してサーバーからデータをロードする方法は?

Question

これは私のチャートコンポーネントであり、サーバーからの値を含むチャートを表示したいのですが、ngOnInit の静的な値で動作しますが動作しません.

 @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(data)= は [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()
        }, 
         ] });
 })
}}