angular - 仅在放大后使用angular2加载动态数据的图表js

Question

我正在使用 chartjs 开发一个 Angular 2 应用程序，以使用饼图、 donut 显示一些数据。

我可以用静态数据渲染图表，但它不能处理动态数据。它仅在放大后才呈现动态数据。

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

组件 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)绑定(bind)到一个还没有被实例化的集合

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

(2) 将 ngif 添加到您的图表标记中，例如

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

(3) 在 ng init 上运行你的 getDoughnutChartData功能。在你身上使用本地收藏getDoughnutChartData收集数据的功能。当数据返回/完成时做 doughnutChartData = localDoughnutChartData

使用 ngif表示在您获得数据之前不会尝试呈现图表

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