如何访问图表中的数据?

时间:2016-04-13 08:21:19

标签: highcharts angular

我真的很困惑。如何访问图表中的数据?

以下数据来自服务中的服务器:

 {
            "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。请参阅组件中的注释代码。

0 个答案:

没有答案