【发布时间】：2016-08-16 09:52:26
【问题描述】：
我想根据 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);
}
}
哪里有问题，为什么图表是空的？如何用 JSON 数据填充图表。 JSON 数据必须是任何特定格式？
【问题讨论】：
-
你能分享你的 JSON 数据吗？
-
是的，我的 JSON 数据是：
[ { Id: 1, Name: "Name1", ProductId: 2, ProductName: "ProductName1", StartMonth: "2016-01-01T00:00 :00", EndMonth: "2016-01-01T00:00:00", Number1: 1, Number2: 2, ProductDetail: [ { Id: 101, OrderId: 1001, ProductionMonth: "2016-01-01T00:00:00 ", OrdersCount: 10, StorageCount: 1, ProductAll: null } ] }, ]
标签： json angular typescript highcharts angular2-highcharts