如何在 Angular 2 中使用 highchart 从服务器加载数据？

Question

这是我的图表组件，我想显示一个包含来自服务器的值的图表，但它不起作用，尽管它适用于静态值在 ngOnInit 上，我调用 web 服务并将数据放入变量 dataa 中，然后在 data

中调用它

 @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(数据)=returns[0.1,0.4,0.2]

Answer 1

ngOnInit(): void { this.ser.getDate().subscribe(data =>{this.dataa = data, console.log(data)}) this.renderChart(); }

应该这样更改，以便仅当从服务器接收到数据时才呈现图表。

export class chartComponent implements OnInit {
  data;

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

Answer 2

我找到了解决方案

 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()
        }, 
         ] });
 })
}}

如何在 Angular 2 中使用 highchart 从服务器加载数据？

how to load data from server with highchart inAngular 2?

highcharts

angular2-forms

angular2-services

ng2-charts

angular