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

发布时间：2020-12-17 17:02:59 所属栏目：安全来源：网络整理

导读：我使用angular2中的ng2-charts构建了一个水平条形图,但我不确定为什么我没有看到图形数据,也没有在控制台中看到任何错误. HTML： canvas baseChart [data]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend"

我使用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

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

解决方法

更新2
由于在订阅中初始化图表数据异步时问题仍然存在,因此一个可行的解决方案是使用加载标志与* 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);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!