Question

我目前有一个组件，我将在一个页面上显示多个图形，每个图形来自一个单独的json文件。我正在使用ng2-charts和angular2，我不知道如何根据json数据加载我的图表，以及在一个组件中设置多个图形数据的最佳方法是什么。

这是我的get调用，它返回组件文件中的对象：

dataType: any=[];
 getData(){
    this.dataService.getDataType().subscribe((response) => {this.dataType = response; 
    for(let item of this.dataType){
      this.barChartLabels.push(this.dataType.name);
    }
    console.log(this.itemNames);

    });
  }

这是我在组件文件中加载图表的代码：

public barChartOptions: any = {
  scaleShowVerticalLines: false,
  responsive: true
};
public barChartLabels: any =[]; //LOAD from dataType.label
public barChartType: string = 'horizontalBar';
public barChartLegend: boolean = true;

public barChartData: any[] = //LOAD from dataType.data

示例json数据：

[
  {
    "id": 1,
    "name": "Test 1",
    "display": "Test 1",
    "score": 45
  }, ...
]

我的HTML - 使用ng2-charts：

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

目前 - 我能够在控制台中看到我有一个标签数组但由于某种原因它们没有显示在图表上，即使我已将我返回的标签推入barChartLabels数组中在html中使用。

Answer 1

从RESTful服务中检索数据和标签到我的图表时，我也遇到了同样的问题。我通过在图表上调用ngOnChanges（）解决了这个问题。

import { Component, AfterViewInit, OnInit, ViewChild, SimpleChanges } from '@angular/core';
import { BaseChartDirective } from 'ng2-charts';

export class DashboardComponent implements OnInit, AfterViewInit {
    @ViewChild(BaseChartDirective)
    public chart: BaseChartDirective;

    ngAfterViewInit() {
        this.updateCharts();
    }

    public updateCharts(): void {
        console.log('updateCharts()');

        setTimeout(() => {
            this.chart.ngOnChanges({} as SimpleChanges);
        }, 100);
    }
}

<强>更新

使用上述方法时，在同一组件中加载第二张图表时出现问题。

ngOnChanges（）只会更新/加载第一张图表。

相反，我在每个画布中使用了ngIf指令，现在加载所有图表。

<canvas baseChart *ngIf="pastChartLabels.length > 0" [colors]="pastChartColors" [datasets]="pastChartData" [labels]="pastChartLabels" [options]="pastChartOptions"
    [chartType]="pastChartType" [legend]="pastChartLegend" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>

<canvas baseChart *ngIf="recentChartLabels.length > 0" [colors]="recentChartColors" [datasets]="recentChartData" [labels]="recentChartLabels" [options]="recentChartOptions"
    [chartType]="recentChartType" [legend]="recentChartLegend" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>

使用ng2-charts从angular2中的json对象加载图形数据

1 个答案: