ng2-charts bar graph not displaying data/graph labels

风格不统一 提交于 2019-12-10 09:49:32

问题


I structured a horizontal bar graph using ng2-charts in angular2 but i am not sure why i am not seeing graph data nor am i seeing any errors in my console.

HTML:

<canvas baseChart [data]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">
</canvas>

Component:

  result: Iresult[] = [];

  barChartLabels: string[] =[];
  barChartType: string = 'horizontalBar';
  barChartLegend: boolean = true;
  barChartData: any[] = [];

  barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true
  };
  barChartLabels: string[] =[];
  barChartType: string = 'horizontalBar';
  barChartLegend: boolean = true;
  barChartData: any[] = [];

getData(){
    this.dataService.getData().subscribe(
      data => {
        this.result = data;
        this.barChartLabels = this.result.map(item => item.label);
        console.log(this.barChartLabels); // RESULT: ["test 1", "test 2"]
        this.barChartData = this.result.map(item => item.data);
        console.log(this.barChartData); // RESULT: [25, 55]
      },
        error => this.errorMessage = <any>error);
        console.log(this.barChartLabels); // RESULT: []
        console.log(this.barChartData); // RESULT: []
  }

JSON file:

[
  {
    "id": 5,
    "label": "test 1",
    "data": 25
  },
  {
    "id": 6,
    "label": "test 2",
    "data": 55
  }
]

Service File:

getData(): Observable<IChartData[]>{
        return this._http.get('https://api.myjson.com/bins/ywavt')
            .map((res:Response) => <IChartData[]> res.json())
            .do(data => console.log('All: ' + JSON.stringify(data))) //DEBUG USE
            .catch(this.handleError);
    }

private handleError(error: Response) {
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }

//Console do result: All: [{"id":5,"label":"test 1","data":25},{"id":6,"label":"test 2","data":55}]

Interface class

export interface IChartData {
    id: number;
    label: string;
    data: any;
}

UPDATE

Here is a Plunker of what i have so far: https://plnkr.co/edit/0GyFTkuqF7m8JhUKK6Kl?p=preview

Labels are not being displayed but a colored horizontal bar is not being positioned properly.


回答1:


UPDATE 2

As the problem is still there when initializing the chart data async in subscribe, a working solution is to use a loading flag combined with *ngIf to wait for the data from the service to be loaded before initializing the chart.

That would look like this:

Template:

<canvas *ngIf="loaded" baseChart [data]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>

Component:

loaded = false;

getData(){
    this.dataService.getData().subscribe(data => {
      this.resultData = data;
      this.barChartLabels = this.resultData.map(item => item.label);
      this.barChartData = this.resultData.map(item => item.data);
      this.loaded = true;
    }
}

Here is a PLUNKER

UPDATE 1

According to your comment, this helped with displaying the data, but the labels are still not showing up. From the code you have provided, it's really hard to know why, but it's probably something wrong with your data. Can you log the barChartData and barCharLabels so I can have a look at it?

Here is a working plunker for your example, but with hard-coded data: PLUNKER

ORIGINAL

The ng2-chart is using ngOnChanges internally to catch changes of its input data. This means that modifying the arrays you have inputed to it will not trigger a change. And since your barChartLabels and barChartData array are already initialize as empty arrays, that is what the chart will use.

What you will need to do to trigger ngOnChanges is change the actual instances of barChartLabels and barChartData when you receive new data.

Replace this inside your getData method:

this.result.forEach( item => {
   this.barChartLabels.push(item.label);
   this.barChartData.push(item.dataInfo);
})

With something like this:

this.barChartLabels = this.result.map(item => item.label);
this.barChartDatat = this.result.map(item => item.dataInfo);


来源:https://stackoverflow.com/questions/43675315/ng2-charts-bar-graph-not-displaying-data-graph-labels

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!