图表JS与Angular2仅在放大后加载动态数据

Question

我正在开发一个带有chartjs的角度2应用程序，以使用饼图，甜甜圈显示一些数据。

我能够使用静态数据呈现图表，但它不适用于动态数据。它仅在放大后呈现动态数据。

您能否帮助我解决这个问题并帮助一次性动态呈现数据。

组件 HTML：

<canvas baseChart 
          [data]="getDoughnutChartData()"
          [labels]="getDoughnutChartLabels()"
          [colors]="lineChartColors"
          [chartType]="doughnutChartType"
          [legend]="legend"></canvas>

组件 TS 文件：

import { Component, Input } from '@angular/core';
import { PaymentModeServiceComponent } from '../../services/paymentmode/paymentmode-service.component';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import {Observable} from 'rxjs/Observable';
import { PaymentMode } from '../../domain/paymentmode';
@Component({
  selector: 'app-paymentmode',
  templateUrl: './paymentmode.component.html',
  providers: [PaymentModeServiceComponent]
})
export class PaymentModeComponent {
   paymentModes: Array<PaymentMode> = [];
   
         // Doughnut
  private doughnutChartLabels:string[]=["sdsd"];
  doughnutChartData:number[]=[1,1,1,1,1,1,1,1,1,1 ];
  public doughnutChartType:string = 'doughnut';
  
  public lineChartColors:Array<any> = [{
                backgroundColor: [
                "#0000ff",
                "#ff0000",
                "#00ff00",
                "#728885",
                "#f98885",
                "#f9fc4b"
  ]}
            ];
            
   public legend:boolean = false;
  
   constructor(dataService: PaymentModeServiceComponent) {
    dataService.getPaymentModes().subscribe(
          paymentMode => this.paymentModes = paymentMode,
      );
  }
  
  
  getDoughnutChartLabels() {
  	for (let i = 0; i < this.paymentModes.length; i++) {
  		let paymentMode = this.paymentModes[i];
  		this.doughnutChartLabels[i] = paymentMode.paymentMode;
	  }
	  return this.doughnutChartLabels;
   }
   
   getDoughnutChartData() {
  	for (let i = 0; i < this.paymentModes.length; i++) {
  		let paymentMode = this.paymentModes[i];
  		this.doughnutChartData[i] = paymentMode.paymentModeTotalSales;
	  }
	  
	  //this.doughnutChartData.splice(this.doughnutChartLabels.length + 1, this.doughnutChartData.length - this.doughnutChartLabels.length);
	  
	  //this.doughnutChartData = this.doughnutChartData.slice();
	  
	  return this.doughnutChartData;
   }
  
}

Answer 1

我在 Angular 2 和许多图表包中遇到了这个问题，通常我必须做的是以下几行：

(1( 绑定到尚未实例化的集合

HTML: [data]="doughnutChartData" ; TS: doughnutChartData:number[]

(2( 在图表标记中添加 NGIF，例如

<canvas baseChart  *ngIf="doughnutChartData && doughnutChartData.length > 0" ....>

(3( 在 ng init 上运行您的getDoughnutChartData函数。 使用getDoughnutChartData函数中的本地集合来收集数据。 当数据返回/完成时，执行doughnutChartData = localDoughnutChartData

使用 ngif 意味着在获得数据之前不会尝试呈现图表

您可以在其上方添加一个 DIV，其中包含一个微调器并具有相反的 ngif，以便在制作图表数据时显示一个微调器，例如 *ngIf="!doughnutChartData || doughnutChartData.length < 1"

Answer 2

这就像一个魅力

  <canvas *ngIf="doughnutChartData && doughnutChartData.length > 0" baseChart
  [data]="doughnutChartData"
  [labels]="doughnutChartLabels"
  [chartType]="doughnutChartType"
  [options]="barChartOptions"></canvas>