ng2-chart条形图不显示数据/图形标签 [英] ng2-charts bar graph not displaying data/graph labels

问题描述

我在angular2中使用ng2-charts构建了水平条形图，但是我不确定为什么我看不到图形数据，也看不到控制台中的任何错误.

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>

组件:

  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文件:

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

服务文件:

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}]

接口类

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

更新

以下是我到目前为止的想法: https://plnkr.co/edit/0GyFTkuqF7m8JhUKK6Kl?p =预览

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.

推荐答案

UPDATE 2

由于在subscribe中初始化图表数据异步时问题仍然存在，一种可行的解决方案是将 loading标志与*ngIf结合使用，以等待从服务中加载数据之前初始化图表.

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.

它看起来像这样:

模板:

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

组件:

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;
    }
}

这是 PLUNKER

UPDATE 1

根据您的评论，这有助于显示数据，但标签仍未显示.从您提供的代码中，很难知道为什么，但是您的数据可能出了点问题.您可以登录barChartData和barCharLabels以便我看看吗?

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

ng2-chart在内部使用ngOnChanges来捕获其输入数据的更改.这意味着修改输入的数组不会触发更改.而且，由于您的barChartLabels和barChartData数组已经被初始化为空数组，因此图表将使用该数组.

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.

触发ngOnChanges所需要做的就是在收到新数据时更改barChartLabels和barChartData的实际实例.

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

将其替换为您的getData方法:

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

具有这样的内容:

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

这篇关于ng2-chart条形图不显示数据/图形标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！