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文件中获取数据的值并将其显示为模板的一部分，并且似乎正在打印正确的值。但是，我的高图图表是空的。由于我对Javascript和打字稿同样陌生，我可能还没有在这里充分利用一些答案。

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
                    }
                }]
            };

        });

看看这是否有帮助。

Answer 2

好的，图表组件的选项需要在订阅方法中设置，如上面Sanket发布的示例所示。我没有在订阅中给它。存储在this.sample中的值返回到它在subscribe方法之外初始化的值。我仍然不明白为什么值在模板部分中正确打印。

使用angular2-highchart绘制JSON数据

2 个答案: