如何使用角度 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' }
];

组件网页 ：

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

但是如果我尝试从服务器获取数据并动态设置数据，则无法按预期工作。

我得到以下错误

主页组件.html：73 错误类型错误：无法读取未定义的属性"数据">

请参考我下面的代码。

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 不会重新呈现，直到对数组的引用发生变化，或者您手动调用它重新呈现。

---

编辑2

您的数据也应属于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[] = [ ] 

Answer 3

首先你需要在ngoninit((之前初始化barchart数据属性 确保将 yuur 服务器数据渲染到正确的数组控制台.log以进行验证 然后定义 eg：this.barChartData=[你的数组]，然后你会得到如果这不起作用 在 HTML 中将 [数据集] 更改为 [数据]