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

更新

这是我迄今为止所拥有的一切：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

<强>

<强> ORIGINAL

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

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

1 个答案:

更新2

更新1

<强> ORIGINAL