我有四个图形,我想使用复选框来管理它们。 当我单击一个复选框时,图形应该出现,如果单击,它必须消失。 但是,我的代码不能很好地工作,因为图形在选中或未选中时会随机出现。
这是我在.ts文件中的代码:
dataChart: any[] = [{
'name': 'orders',
'series': []
}
,
{
'name': 'invoices',
'series': []
}
,
{
'name': 'customers',
'series': []
}
,
{
'name': 'products',
'series': []
}
];
selectOrderCheckBox() {
if (this.chkOrders) {
this.service.getChartData().subscribe(res => {
console.log(res['data']) if (res['status_code'] === 200) {
let orders = res['data'][0]['serieOrders'];
let i: number;
for (i = 0; i < orders.length;
i++) {
this.dataChart[0].series.push({
'name': orders[i]['date'],
'value': orders[i]['nbre'],
}
);
}
}
}
,
err => {}
);
this.dataChart = [...this.dataChart];
} else if (this.chkOrders == false) {
this.dataChart[0].series = [];
this.dataChart = [...this.dataChart];
} else {}
}
selectInvoiceCheckBox() {
if (this.chkInvoices) {
this.service.getChartData().subscribe(res => {
console.log(res['data']) if (res['status_code'] === 200) {
let invoices = res['data'][0]['serieInvoices'];
let i: number;
for (i = 0; i < invoices.length;
i++) {
this.dataChart[1].series.push({
'name': invoices[i]['date'],
'value': invoices[i]['nbre'],
}
);
}
}
}
,
err => {}
);
this.dataChart = [...this.dataChart];
} else if (this.chkInvoices == false) {
this.dataChart[1].series = [];
this.dataChart = [...this.dataChart];
} else {}
}
selectCustomerCheckBox() {
if (this.chkCustomers) {
this.service.getChartData().subscribe(res => {
console.log(res['data']) if (res['status_code'] === 200) {
let customers = res['data'][0]['serieCustomers'];
let i: number;
for (i = 0; i < customers.length;
i++) {
this.dataChart[2].series.push({
'name': customers[i]['date'],
'value': customers[i]['nbre'],
}
);
}
}
}
,
err => {}
);
this.dataChart = [...this.dataChart];
} else if (this.chkCustomers == false) {
this.dataChart[2].series = [];
this.dataChart = [...this.dataChart];
} else {}
}
selectProductCheckBox() {
if (this.chkProducts) {
this.service.getChartData().subscribe(res => {
console.log(res['data']) if (res['status_code'] === 200) {
let products = res['data'][0]['serieProducts'];
let i: number;
for (i = 0; i < product.length;
i++) {
this.dataChart[3].series.push({
'name': products[i]['date'],
'value': products[i]['nbre'],
}
);
}
}
}
,
err => {}
);
this.dataChart = [...this.dataChart];
} else if (this.chkProducts == false) {
this.dataChart[3].series = [];
this.dataChart = [...this.dataChart];
} else {}
}
selectCheckAll {
selectOrderCheckBox();
selectInvoiceCheckBox();
selectCustomerCheckBox();
selectProductCheckBox();
}
这是我在.html文件中的代码:
<div class="option1">
<label ><input type="checkbox" [(ngModel)]="allChart" (change)="selectCheckAll()" > Toutes</label>
<label> <input type="checkbox" [(ngModel)]="chkOrders" (change)="selectOrderCheckBox()" />Orders</label>
<label><input type="checkbox" [(ngModel)]="chkInvoices" (change)="selectInvoiceCheckBox()" /> Invoices</label>
<label><input type="checkbox" [(ngModel)]="chkCustomers" (change)="selectCustomerCheckBox()"/> Customers</label>
<label><input type="checkbox" [(ngModel)]="chkProducts" (change)="selectProductCheckBox()"/>Products</label>
</div>
<div class="col-xxl-12">
<nb-card class="card-coubes" style="height:auto;">
<nb-card-body>
<ngx-charts-line-chart
[view]="view"
[scheme]="colorScheme"
[results]="dataChart"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
[autoScale]="true"
[timeline]="timeline"
(select)="onSelect($event)">
</ngx-charts-line-chart>
</nb-card-body>
</nb-card>
</div>
如何解决该问题?