我真的很困惑。如何访问图表中的数据?
以下数据来自服务中的服务器:
{
"data": [
{
"Prev2WkAnsweredNotifcn": 0,
"CrntYearNotifiedNotifcn": 0,
"CrntWkAnsweredNotifcn": 0,
"Prev1WkAnsweredNotifcn": 0,
"Prev2WkNotifiedNotifcn": 0,
"CrntWkNotifiedNotifcn": 0,
"Prev1WkNotifiedNotifcn": 0,
"Closed": "Closed",
"Prev3WkNotifiedNotifcn": 0,
"Open": "Open",
"Prev3WkAnsweredNotifcn": 0,
"CrntMonthNotifiedNotifcn": 0
}
]
}
服务:
getPosts(): Observable<any> {
return this._http.get('EscalationGraphData/')
.map(res => res.json().data)
.do(data => console.log(data[0]) // eyeball results in the console
}
最终组件 - &gt;在这里,我必须访问数据并需要显示它:
import {Component} from 'angular2/core';
import {CHART_DIRECTIVES, Highcharts} from 'angular2-highcharts';
//import {IncidentGraphService} from './incident-graph-service.ts';
import {EscalatedRightSideData} from './escalated-right-side.component.ts';
import {HttpService} from './http.service.ts';
//<incident-right-side-data></incident-right-side-data>
@Component({
selector: 'escalation-graph-component',
directives: [CHART_DIRECTIVES , EscalatedRightSideData]//, IncidentRightSideData],
providers: [HttpService]
//providers :[IncidentGraphService]
styles: [`
chart {
display: block;
width: 600px;
height: 300px;
margin: 0;
}
`]
template: `
<div class="row">
<div class="col-md-5">
<chart [options]="options">
<series>
<point (select)="onPointSelect($event)"></point>
</series>
</chart>
`
})
export class EscalationGraphComponent {
response: Array<any>;
ngOnInit() {
this.onGetPosts();
}
constructor(private _httpService: HttpService) {
this.options = {
series: [
{
name:'Monitored'
data: [29.9, 71.5, 106.4, 129.2], //[data.CrntWkNotifiedNotifcn , data.Prev1WkNotifiedNotifcn , data.Prev2WkNotifiedNotifcn , data.Prev3WkNotifiedNotifcn]
allowPointSelect: true
},
{
name:'UnMonitored'
data: [10, 20, 30, 40], //[data.CrntWkAnsweredNotifcn , data.Prev1WkAnsweredNotifcn,data.Prev2WkAnsweredNotifcn , data.Prev3WkAnsweredNotifcn ]
allowPointSelect: true
},
],
credits:{enabled:false},
};
}
options: Object;
onPointSelect (e) {
this.point = e.context.y;
}
onGetPosts() {
this._httpService.getPosts()
.subscribe(
response => this.response = response,
console.log("response"),
error => console.log(error);
)
}
}
保存数据的数据类:
export class GraphData {
Prev2WkAnsweredNotifcn: number;
CrntYearNotifiedNotifcn: number;
CrntWkAnsweredNotifcn: number;
Prev1WkAnsweredNotifcn: number;
Prev2WkNotifiedNotifcn: number;
CrntWkNotifiedNotifcn: number;
Prev1WkNotifiedNotifcn: number;
Prev3WkNotifiedNotifcn: number;
Prev3WkAnsweredNotifcn: number;
Prev3WkAnsweredNotifcn: number;
CrntMonthNotifiedNotifcn : number;
Open:string;
Closed :string;
}
我需要将数据从服务器存储到GraphData
对象。后来想要将这些数据串行访问组件---&gt; data
。请参阅组件中的注释代码。