json - 使用 angular2-highchart 绘制 JSON 数据

Question

我想使用 angular2-highcharts 在 JSON 文件中绘制数据。

假设 JSON 文件中有以下格式的 X 和 Y 值:[[[1,15],[2,16],[3,18]]]。代码如下。

@Component({
selector: 'my-app',
directives: [CHART_DIRECTIVES],
template:`{{sample}}
<center> <chart [options]="options"></chart></center>`

})
export class AppComponent {
public sample;


options:Object; 
constructor(public http : Http) {
      http.get('data.json')
        .map(res => res.json())
         .subscribe(data =>this.sample=JSON.parse(JSON.stringify(data ||     null)),
                    err=>console.log(err),
                    () => console.log('Completed')); {}
console.log(this.sample);

this.options = {
        title : { text : 'Sample Curve' },


        series: [
           { data: this.sample,
           color:'red'},]


}
    }
}

我在 .json 文件中获取数据值并将其显示为模板的一部分，并且似乎打印了正确的值。 但是，我的 Highcharts 是空的。由于我对 Javascript 和 typescript 同样陌生，我可能还没有充分利用这里的一些答案。

Answer 1

您正在尝试实现简单的折线图。

折线图希望数据采用这种格式-

[29.9, 71.5, 106.4, 129.2] or [[1,15],[2,16],[3,18]]

而你的json结构是这种格式

[[[1,15],[2,16],[3,18]]]

你可以这样试试——

导入 JSONP_PROVIDERS-

import {JSONP_PROVIDERS, Jsonp} from '@angular/http';


providers: [JSONP_PROVIDERS],

在 html 模板中-

<chart [options]="options1"></chart>

在你的组件中-

options1: Object;


constructor(jsonp : Jsonp) {
        jsonp.request('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=JSONP_CALLBACK').subscribe(res => {
            this.options1 = {
                title : { text : 'AAPL Stock Price' },
                series : [{
                    name : 'AAPL',
                    data : res.json(),
                    tooltip: {
                        valueDecimals: 2
                    }
                }]
            };

        });

看看这是否有帮助。