Question

这是我的chartcomponent，我想显示一个包含服务器值的图表，但它没有工作，但它与静态值一起工作在ngOnInit我调用webservice，我把数据放在变量调用dataa中，我在数据中调用它

 @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

ngOnInit（）：void {this.ser.getDate（）。subscribe（data =＆gt; {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()
        }, 
         ] });
 })
}}

如何使用highchart inAngular 2从服务器加载数据？

2 个答案: