如何使用角度動態地渲染ng2Chart（條形圖）4

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不會重新渲染，直到對數組的引用更改或您手動調用它以重新渲染。

---

EDIT2

您的數據也應該是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[] = [ ]