我正在接收一个json对象,其中包含要在模板中显示的图表列表。每个图表都有[数据],[选项]和[类型]。即使我使用ngFor进行循环,我似乎也无法使id正常工作。
bar.component.ts
@Component({
selector: 'ngx-chartjs-bar',
template: `
<div *ngFor="let chart of bardata>
<chart type="bar" [data]="data" [options]="options"></chart>
</div>
`,
})
export class ChartjsBarComponent implements OnDestroy {
data: any;
bardata: any;
options: any;
themeSubscription: any;
newLabel : any[];
newData : number[];
temp : any;
constructor(
private theme: NbThemeService,
protected apiService: ApiService,
) {
this.bardata = this.apiService.response_object.body;
this.newData = [];
this.newLabel = [];
this.temp = [];
for(var obj in this.bardata.byFile) {
for(var curr in this.bardata.byFile[obj]) {
this.temp.push(this.bardata.byFile[obj][curr]);
}
}
console.log(this.bardata);
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
const chartjs: any = config.variables.chartjs;
this.data = {
labels: ['Purchase Count', 'Refund Count', 'Payment Count'],
datasets: this.temp,
/* [{
data: this.newData,
label: this.newLabel[0],
backgroundColor: NbColorHelper.hexToRgbA(colors.primaryLight, 0.8),
}, {
data: [28, 48, 40, 19, 86, 27, 90],
label: this.newLabel[1],
backgroundColor: NbColorHelper.hexToRgbA(colors.infoLight, 0.8),
}], */
};
this.options = {
maintainAspectRatio: false,
responsive: true,
legend: {
labels: {
fontColor: chartjs.textColor,
},
},
scales: {
xAxes: [
{
gridLines: {
display: false,
color: chartjs.axisLineColor,
},
ticks: {
fontColor: chartjs.textColor,
},
},
],
yAxes: [
{
gridLines: {
display: true,
color: chartjs.axisLineColor,
},
ticks: {
fontColor: chartjs.textColor,
},
},
],
},
};
});
}
ngOnInit() {
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}
在这种情况下,temp包含条形图或图表的列表,而newData是api中的数据,其中包含条形图的数据集。
组件的html:
<nb-card>
<nb-card-header>View All Statistics</nb-card-header>
<nb-card-body>
<div class="row">
<div class="col-lg-6">
<nb-card>
<nb-card-header>Bar</nb-card-header>
<nb-card-body>
issue here --> <div *ngFor="let data of barData; index as i" [attr.data-
index]="i">
<ngx-chartjs-bar></ngx-chartjs-bar>
</div>
</nb-card-body>
</nb-card>
</div>
</div>
</nb-card-body>
以上不是一个可行的示例,只是对应该发生的事情的一个想法,但不能完全确定如何设置索引并遍历每个数据集。 ngFor应该进入html还是组件中的装饰器?
编辑:json只是一个图表数组,每个索引都引用一个具有相应数据集的图表。因此,如果barData [0]本身就是一个图表。