如何使用角度动态地渲染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[] = [ ]