使用angular2-highcharts的JSON数据

Question

我想根据JSON数据创建图表。 我使用angular2-highcharts我ChartsMain组件的样子：

@Component({ 
moduleId: module.id, 
selector: 'charts', 
templateUrl: 'charts.html', 
directives: [CHART_DIRECTIVES,] 
providers: [DataService] 
}) 
export class ChartsMain { 

result: Data[]; 

constructor(DataService:DataService) { 
    DataService.getData().subscribe(res => this.result = res); 
     this.options = { 
      chart: { 
       type: "candlestick" 
      }, 
      title: { 
       text: "JSON data" 
      }, 
      xAxis: { 
       type: "category", 
       allowDecimals: false, 
       title: { 
        text: "" 
       } 
      }, 
      yAxis: { 
       title: { 
        text: "Number" 
       } 
      }, 
      series: [{ 
       name: "Hour", 
       data: this.result 
      }] 
     }; 
} 
options: Object; 

我的DataService的样子：

@Injectable() 
export class DataService { 

http: Http; 
constructor(http: Http) { 
    this.http = http; 
} 


getData(): Observable<Array<Data>> { 
    return this.http.get('http://JSON-DATA') 
     .map(this.extractData) 
     .catch(this.handleError) 
} 

private extractData(res: Response) { 
    let body = res.json(); 
    return body || { }; 
} 
private handleError(error: any) { 
    // In a real world app, we might use a remote logging infrastructure 
    // We'd also dig deeper into the error to get a better message 
    let errMsg = (error.message) ? error.message : 
     error.status ? `${error.status} - ${error.statusText}` : 'Server error'; 
    console.error(errMsg); // log to console instead 
    return Observable.throw(errMsg); 
} 
} 

My chart

哪里是一个问题，为什么是空的图表？如何用JSON数据填充图表。 JSON数据必须采用任何特定格式？

Answer 1

烛台图通常用于在一段时间呈现开放，高，低和收盘价..

样品预期JSON格式看起来像这 -

[ 
[1250553600000,23.09,23.46,23.06,23.43], 
[1250640000000,23.25,23.61,23.21,23.51], 
[1250726400000,23.57,23.82,23.52,23.76], 
[1250812800000,23.95,24.20,23.83,24.17], 
[1251072000000,24.30,24.39,24.04,24.15], 
[1251158400000,24.21,24.42,24.16,24.20], 
[1251244800000,24.13,24.22,23.82,23.92], 
[1251331200000,24.11,24.22,23.55,24.21], 
[1251417600000,24.61,24.64,24.08,24.29], 
[1251676800000,24.02,24.12,23.79,24.03], 
] 

下面是示例与烛台部件highchart-

import { Component } from '@angular/core'; 
import {JSONP_PROVIDERS, Jsonp} from '@angular/http'; 
import { CHART_DIRECTIVES } from 'angular2-highcharts'; 


@Component({ 
    selector: 'high-chart', 
    directives: [CHART_DIRECTIVES], 
    providers: [JSONP_PROVIDERS], 
    template: ` 
    <h2> This is HighChart CandleStick component </h2> 

     <chart type="StockChart" [options]="options3"></chart> 
    ` 
}) 

export class HighChartsComponent { 

    options3: Object; 

    constructor(jsonp : Jsonp) { 

     jsonp.request('https://www.highcharts.com/samples/data/jsonp.php?a=e&filename=aapl-ohlc.json&callback=JSONP_CALLBACK').subscribe(res => { 
      this.options3 = { 
       title : { text : 'CandleSticks' }, 
       rangeSelector : { 
        selected : 1 
       }, 
       series : [{ 
        type : 'candlestick', 
        name : 'CandleSticks', 
        data : res.json(), 
        dataGrouping : { 
        units : [ 
         [ 
          'week', // unit name 
          [1] // allowed multiples 
         ], [ 
          'month', 
          [1, 2, 3, 4, 6] 
         ] 
        ] 
       }, 
        tooltip: { 
         valueDecimals: 2 
        } 
       }] 
      }; 

     }); 
} 

---

编辑：

在你的情况下，你不是在订阅里面设置图表选项。你应该设置像这个 -

 this._http.get('http://knowstack.com/webtech/charts_demo/data.json') 
       .map(this.extractData) 
       .subscribe((response) => { 
        this.options = { 
            title : { text : 'knowstack' }, 
            series : [{ 
             name : 'knowstack', 
             data : response.json() 
            }] 
           }; 
       }, 
       (error) => { 
        this.errorMessage = <any>error 
       }); 

请注意 - 从数据将knowstack只用简单的图表（不烛台）

---

编辑2工作：柱形图

请参阅下面组态。这是你如何使用柱形图。

this.options1 = { 
      title : { text : 'simple column chart' }, 
      series: [{ 
       type : 'column', 
       data: [["Maths",15],["Physics",16],["Biology",18],["Chemistry",19]] 
      }] 
     }; 

---

EDIT 3：键值对JSON

import { Component }  from '@angular/core'; 
import { CHART_DIRECTIVES } from 'angular2-highcharts'; 

@Component({ 
    selector: 'my-app', 
    directives: [CHART_DIRECTIVES], 
    styles: [` 
     chart { 
     display: block; 
     } 
    `] 
    template: `<chart [options]="options"></chart>` 
}) 
class AppComponent { 
    constructor() { 
     var data = [{"key":"Math","value":98},{"key":"Physics","value":78},{"key":"Biology","value":70},{"key":"Chemistry","value":90},{"key":"Literature","value":79}]; 

     this.options = { 
      title : { text : 'simple chart' }, 
      xAxis: { 
       type: 'category' 
      }, 
      series: [{ 
       data: data.map(function (point) { 
        return [point.key, point.value]; 
       }) 
      }] 
     }; 
    } 
    options: Object; 
} 

Answer 2

确定它是工作的样品。我用这在我的第一篇文章，我只是改变了部分服务：constructor(http: Http, jsonp : Jsonp, DataService:DataService) { DataService.getData().subscribe(res => this.result = res); http.request('').subscribe(res => { this.options = { chart: { type: 'column' }, plotOptions: { column: { zones: [{ value: 12, },{ color: 'red' }] } }, series: [{ data: this.result }] }; }); } options: Object;

在这种情况下JSON数据：[{"key":"Math","value":98},{"key":"Physics","value":78},{"key":"Biology","value":70},{"key":"Chemistry","value":90},{"key":"Literature","value":79}]

我怎么可以拆分这个数据好像有http://www.knowstack.com/webtech/charts_demo/highchartsdemo4.html