角度4を使ってng2Chart（Barchart）を動的にレンダリングする方法

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

グラフがレンダリングされるときにデータが定義されていないため、このエラーが発生しています。あなたは、データが解決されるまで、上記のHTMLをレンダリングされません

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

チャート上 *ngIfを使用することによって、これを回避することができます。データが再構築され、barChartDataが定義されなくなった場合、チャートがレンダリングされます。

---

EDIT：あなたはbarChartData配列にデータを追加し続ける場合

チャートが再描画しません。データを取得するときには、barChartData配列にプッシュする代わりに、ローカル配列を作成してデータを構築します。次に、すべてのデータがローカル配列に移入されると、ローカル配列をbarChartDataに割り当てます。 Ng2Chartsは、配列への参照が変更されるか、手動で再レンダリングを呼び出すまで再レンダリングしません。

---

EDIT2

あなたのデータはまた、タイプnumberでなければなりません。

はいあなたは配列を初期化されていません：あなたはdata1 = '';

Answer 2

はngIf

<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> 

barchartData.length > 0へのアップデート1の条件を変更しています。値 `プロパティdata`を使用している

public barChartData: any[] = [ ]