ng2-charts条形图不显示数据/图形标签

Question

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

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

UPDATE

这是我目前所拥有的一个Plunker:https://plnkr.co/edit/0GyFTkuqF7m8JhUKK6Kl？p = preview

标签未显示,但彩色水平条未正确定位.

Answer 1

更新2

由于在初始化图表数据异步时问题仍然存在subscribe,一个有效的解决方案是在初始化图表之前使用加载标志结合*ngIf等待来自服务的数据加载.

这看起来像这样:

模板:

<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

更新1

根据您的评论,这有助于显示数据,但标签仍未显示.从您提供的代码中,很难知道原因,但您的数据可能有问题.你可以登录barChartData,barCharLabels所以我可以看一下吗？

这是一个适用于您的示例的工作plunker,但具有硬编码数据:PLUNKER

原版的

ng2图表在ngOnChanges内部用于捕获其输入数据的更改.这意味着修改您输入的阵列不会触发更改.而且,由于你barChartLabels和barChartData阵列已经初始化为空数组,即图表将使用什么.

您需要做的是触发ngOnChanges更改实际的实例barChartLabels以及barChartData何时接收新数据.

在您的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);