使用 angular2-highchart 绘制 JSON 数据答案

【问题标题】：Plotting JSON data with angular2-highchart使用 angular2-highchart 绘制 JSON 数据
【发布时间】：2016-07-28 01:09:43
【问题描述】：

我想使用 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 和打字稿同样陌生，因此我可能还没有充分利用这里的一些答案。

【问题讨论】：

标签： json highcharts typescript angular

【解决方案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
                    }
                }]
            };

        });

看看这是否有帮助。

【讨论】：

作为此答案的补充，Highcharts 的数据格式可能为：[[1,15],[2,16],[3,18]]，但 [[[1,15] ,[2,16],[3,18]]] 的图表格式不正确，因此该系列将不可见。
感谢 Sanket 和 Grzegorz 的投入。
关于 data.json 文件中的格式，我最初是按照您提到的方式进行的 - [[1,15],[2,16],[3,18]]。它没有任何区别，我得到了相同的输出。我看到另一个例子，他们的数据是我在这里使用的格式，因此我切换了。 @Sanket，highcharts 网站中给出的这个例子工作正常。但是，当我尝试用本地 json 文件替换链接时，我不断收到 200 个 for URL:data.json 异常 (stackoverflow.com/questions/38579646/…)。
经过大量的尝试和错误，我得到了这个版本的代码，它至少可以通过模板显示文件的内容。

【解决方案2】：

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

【讨论】：