Comment faire pour rendre ng2Chart (Barchart) dynamiquement en utilisant angulaire 4

Question

J'ai utilisé le module ng2charts pour rendre les graphiques. Si j'essaie avec des données factices ci-dessous, le rendu de diagramme à barres correctement.

Tapuscrit

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' } 
    ]; 

Component Html:

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

Mais si je tentais d'obtenir des données à partir du serveur et les données du jeu de travail dynamique pas comme prévu.

Je suis en train d'erreur ci-dessous

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

S'il vous plaît se référer mon code ci-dessous.

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

Vous obtenez cette erreur car les données ne sont pas définies lors du rendu du graphique. Vous pouvez éviter cela en utilisant *ngIf sur votre carte

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

ne sera pas rendu tant que les données ont résolu le HTML ci-dessus. Une fois les données restaurées et que barChartData n'est plus indéfini, le graphique sera rendu.

---

EDIT:

Le tableau ne sera pas rerender si vous continuez à ajouter des données au tableau barChartData. Lorsque vous obtenez vos données, au lieu de le pousser vers le tableau barChartData, créez un tableau local pour générer les données. Affectez ensuite le tableau local à barChartData lorsque toutes les données sont remplies dans le tableau local. Ng2Charts ne se reconnecte pas jusqu'à ce que la référence au tableau soit modifiée ou que vous l'appeliez manuellement pour le rendre.

---

EDIT2

Vos données devraient également être de type number. Vous avez data1 = '';

Answer 2

Modifier la condition de 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> 

Mise à jour 1:

Oui, vous n'êtes pas initialisant le tableau.

public barChartData: any[] = [ ]