我最近在图表上工作,我正在使用ngprime(pie)的图表模型。我想将我的数字数组作为ts文件中的数据传递,但它不会显示任何内容。数组在OnInit方法中填充。
更新:
这些数字会被填写,但仅在一段时间后,当我调整窗口大小时。有没有一种方法让图表只显示加载的所有内容?我尝试将数据放在oninit等,但似乎没有任何帮助。数组填写完毕。
亲切的问候
import {Component, OnInit} from '@angular/core';
import {InternshipAssignmentService} from '../services/internshipAssignment.service';
import {IInternshipModel} from '../models/internship.model';
@Component({
selector: 'coordinator-chart',
templateUrl: 'coordinatorChart.component.html',
styleUrls: ['../../assets/css/in/style.css']
})
export class CoordinatorChartComponent implements OnInit{
// afstudeerrichtingen, technologieen
dataAfst: any
options: any;
dataTech: any;
internships: IInternshipModel[] = [];
specialisations: string[] = [];//;
specialisationsArray: number[] = [this.specialisations.length];
constructor(private _service: InternshipAssignmentService) {
this.dataAfst = {
labels: this.specialisations,
datasets: [
{
data: this.specialisationsArray,
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
};
this.dataTech = {
labels: ['AngularJs', 'SQL','C#'],
datasets: [
{
data: [300, 50, 100],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
};
this.options = {
responsive: true,
maintainAspectRatio: false
};
}
ngOnInit(): void {
this._service.getInternshipAssignments().subscribe(internships => {
this.internships = internships;
this.getSpecialisations();
this.countSpecialisations();
});
}
public getSpecialisations(): void {
this.internships.forEach(i => {
const helper: string [] = i.PreferredSpecialization.split(';');
for(let h of helper) {
if (this.specialisations.indexOf(h) === -1) {
this.specialisations.push(h);
}
}
});
}
public countSpecialisations(): void {
let i: number = 0;
for(i; i < this.specialisations.length; i++) {
this.specialisationsArray[i] = 0;
}
this.internships.forEach(i => {
switch (i.PreferredSpecialization) {
case "AON":
this.specialisationsArray[0]++;
break;
case "SWM":
this.specialisationsArray[1]++;
break;
case "SNB":
this.specialisationsArray[2]++;
break;
}
});
}
}
Html:
<p-chart type="pie" class="charts col-sm-6" [data]="dataAfst" [options]="options"></p-chart>
它的图像没有显示任何内容: