我正在使用Angular和ngx-charts来显示一些从服务器提取的数据。
首次加载时,当ngOnInit()方法触发对服务器的请求(getStats())时,将按应加载的方式加载所有内容:
但是,当单击“获取数据”按钮并将相同的请求发送到服务器(getStats())时,该表将重新呈现,如下所示:
条形线变稀。
HTML:
<div class="row shadow">
<div class="col" style="height: 80vh; width: 100%;">
<ngx-charts-bar-horizontal
[scheme]="colorScheme"
[results]="data"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
(select)="onSelect($event)">
</ngx-charts-bar-horizontal>
</div>
</div>
TS代码:
export class StatsComponent implements OnInit {
constructor(
private adminService: AdminService,
private toastr: ToastrService,
private datePipe: DatePipe,
private formBulder: FormBuilder,
private changeDetection: ChangeDetectorRef ) { }
days = 7; // Days you want to subtract
date = new Date();
endMonth = this.date.getUTCMonth() + 1; //months from 1-12
endDay = this.date.getUTCDate();
endyear = this.date.getUTCFullYear();
endDate = this.endyear + '/' + this.endMonth + '/' + this.endDay;
last = new Date(this.date.getTime() - (this.days * 24 * 60 * 60 * 1000));
startDay = this.last.getDate();
startMonth= this.last.getMonth()+1;
startYear = this.last.getFullYear();
startDate = this.startYear + '/' + this.startMonth + '/' + this.startDay;
statsSearchFrom = this.formBulder.group({
startTime: [this.startDate, Validators.required],
endTime: [this.endDate, Validators.required]
});
agents: User[];
data: any[] = [];
multi: any[];
// view: any[] = [100%, 800];
// bar chart options
showXAxis = true;
showYAxis = true;
gradient = false;
showLegend = true;
showXAxisLabel = true;
xAxisLabel = 'Number of Tickets';
showYAxisLabel = true;
yAxisLabel = 'Agent';
colorScheme = {
domain: ['#263859', '#a7d129', '#21e6c1', '#278ea5', '#7045af', '#e14594', '#ed6363', '#3c6562']
};
ngOnInit() {
this.getAllAgents();
}
getStats() {
const startTime = this.datePipe.transform(this.statsSearchFrom.controls['startTime'].value, 'ddMMyyyy');
const endTime = this.datePipe.transform(this.statsSearchFrom.controls['endTime'].value, 'ddMMyyyy');
this.adminService.getAgentStats(this.agents, startTime, endTime).subscribe(response => {
this.agents = response;
for (const agent of this.agents) {
const point: any = {'name': agent.username, 'value': agent.nbOfClosedEmails};
this.data.push(point);
}
this.data = [...this.data];
}, error => {
this.toastr.error('Error while getting the statistics.')
});
}
getAllAgents() {
this.adminService.getAllAgents().subscribe(response => {
this.agents = response;
this.agents = [...this.agents];
this.getStats();
}, error => {
this.toastr.error('Error while getting the agents.');
console.error(error);
});
}```
问题是ngx-charts barPadding参数。将其设置为固定值后,每个请求的钢筋厚度均保持不变。
要解决此问题[barPadding]="1"
,请在html<ngx-charts-bar-horizontal>
元素中添加:。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句