如何使用 angular 4 动态渲染 ng2 图表（条形图）

Question

我使用 ng2charts 模块来渲染图表。如果我尝试使用以下虚拟数据，条形图会正确呈现。

打字稿

  public barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true
  };
  public barChartLabels: string[] = ['Label1', 'Label2', 'Label3'];
  public barChartType: string = 'bar';
  public barChartLegend: boolean = true;

  public barChartData: any[] = [
    { data: [65, 59, 80], label: 'Data1' },
    { data: [28, 48, 40], label: 'Data2' },
    { data: [30, 28, 80], label: 'Data3' }
  ];

组件 Html :

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

但是如果我尝试从服务器获取数据并动态设置数据，则无法按预期工作。

我遇到错误

HomeComponent.html:73 ERROR TypeError: Cannot read property 'data' of undefined

请参考我下面的代码。

export class HomeComponent implements OnInit {

  serverData: any;

  public barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true
  };


  public barChartLabels: string[];
  public barChartType: string = 'bar';
  public barChartLegend: boolean = true;

  public barChartData: any[];


  constructor(private fb: FormBuilder, private Service: Service,
    private route: ActivatedRoute, private router: Router, private _configService: ConfigService) {
    this.getApis();
  }

  ngOnInit() {
    const loggedInUser = new LoggedInUser();
    const user = loggedInUser.getLoggedUser();
    if (user != null) {
      this.loggedInUserId = loggedInUser.getLoggedUser().UserId;
    }

  }

  getApis() {
    this._configService.get()
      .subscribe(c => {
        this.apiEndpoints = c;
        this.loadDashBoardDetails();
      },
      error => { this.msg = <any>error; });
  }

  loadDashBoardDetails() {
    this.indLoading = true;
    this.Service.get("APIENDPOINT")
      .subscribe(c => {
        this.serverData = c[0];
        this.loadserverData();
        this.indLoading = false;
      },
      error => {
        this.msg = <any>error;
      }

      );
  }
  loadserverData() {
    let chartData: any[];
    let data1 = '';
    let data2 = '';
    let data3 = '';
    this.barChartLabels = new Array<string>();
    chartData = new Array<any>();
    for (let _i = 0; _i < this.serverData.length; _i++) {
      this.barChartLabels.push(this.serverData[_i].Code);
      if (data1 === '') {
        data1 = this.serverData[_i].Target;
      } else {
        data1 = data1 + ',' + this.serverData[_i].data1;
      }

      if (data2 === '') {
        data2 = this.serverData[_i].data2;
      } else {
        data2 = data2 + ',' + this.serverData[_i].data2;
      }

      if (data3 === '') {
        data3 = this.serverData[_i].data3;
      } else {
        data3 = data3 + ',' + this.serverData[_i].data3;
      }
    }

    chartData.push({
      data: data1,
      label: 'data1 label'

    });

    chartData.push({
      data: data2,
      label: 'data2 label'

    });

    chartData.push({
      data: data3,
      label: 'data3 label'

    });

    this.barChartData = chartData;
  }
 }

Answer 1

您收到该错误是因为在呈现图表时数据未定义。您可以通过在图表

上使用 *ngIf 来避免这种情况

<canvas
    *ngIf="barChartData"
    baseChart
    style="height:230px" 
    [datasets]="barChartData" 
    [labels]="barChartLabels" 
    [options]="barChartOptions" 
    [legend]="barChartLegend" 
    [chartType]="barChartType" 
    (chartHover)="chartHovered($event)" 
    (chartClick)="chartClicked($event)">
</canvas>

上面的HTML在数据解析完成后才会渲染。一旦数据被解析并且 barChartData 不再是未定义的，图表将被渲染。

编辑：

如果您继续向 barChartData 数组添加数据，图表将不会重新呈现。当您获取数据时，不要将其推送到 barChartData 数组，而是创建一个本地数组来构建数据。然后在本地数组中填充所有数据后，将本地数组赋值给barChartData。 Ng2Charts 不会重新呈现，直到对数组的引用更改或您手动调用它重新呈现。

编辑2

您的数据也应该是 number 类型。你有 data1 = '';

Answer 2

将ngIf的条件修改为barchartData.length > 0

<div *ngIf="barChartData.length > 0"
    <canvas
        baseChart
        style="height:230px" 
        [datasets]="barChartData" 
        [labels]="barChartLabels" 
        [options]="barChartOptions" 
        [legend]="barChartLegend" 
        [chartType]="barChartType" 
        (chartHover)="chartHovered($event)" 
        (chartClick)="chartClicked($event)">
    </canvas>
</div>

更新 1：

是的，您没有初始化数组。

public barChartData: any[] = [ ]

Answer 3

首先你需要在 ngoninit() 之前初始化条形图数据属性确保您将 yuur 服务器数据渲染到正确的数组 console.log 以验证然后定义 eg:this.barChartData=[your array] 然后你会得到如果那行不通在 html

中将 [数据集] 更改为 [数据]

如何使用 angular 4 动态渲染 ng2 图表（条形图）

How to Render ng2Chart (Barchart ) dynamically using angular 4

angular

angular2-forms

ng2-charts

angular4-forms