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

更新

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

标签未显示，但彩色水平条未正确定位。

Answer 1

更新 2

由于在 subscribe 中异步初始化图表数据时问题仍然存在，一个可行的解决方案是使用 loading flag 结合 *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-chart 在内部使用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);