我已经在我的angular2 +前端和NodeJS后端数据中实现了ng2-charts条形图。我显示了服务的图表,并且它具有成功和错误条形图。我在Success和Error中都有数据,但是只有Error栏没有显示Success。我什至只使用了ngIf,以便仅在两个数据都到来之后才完全加载它。在控制台中,我获得了整个数据值,但是为什么它没有在栏中显示两个值?
代码-
app.component.ts
// Entire BarChart
public barChartOptionsEntire: any = {
scaleShowVerticalLines: false,
responsive: true
};
public barChartLabelsEntire: string[] = ['Entire Karza'];
public barChartTypeEntire = 'bar';
public barChartLegendEntire = true;
public barChartDataEntire: { data: Array<any>, label: string }[]
= [
{ data: [this.EntireSuccessResult], label: 'Success' },
{ data: [this.EntireErrorResult], label: 'Error' }
];
// ================================= Entire Data ===========
viewEntireData() {
console.log("INSIDE viewEntireData()")
var url = config.url;
var port = config.port;
this.hideEntire = true;
// Entire Success Value
console.log("inside Entire Success");
return new Promise((resolve, reject) => {
this.http.post("http://" + url + ":" + port + "/dashboard/EntireSuccess/", this.emptyObj
, { headers: new Headers({ 'Authorization': 'Bearer ' + localStorage.getItem('Token') }) })
.map(resultSuccess1 => this.resultSuccess1 = resultSuccess1.json(), )
.subscribe((res: Response) => {
this.http.post("http://" + url + ":" + port + "/dashboard/EntireError/", this.emptyObj
, { headers: new Headers({ 'Authorization': 'Bearer ' + localStorage.getItem('Token') }) })
.map(result1 => this.result1 = result1.json(), )
.subscribe((res: Response) => {
this.records = res;
this.EntireSuccessResult = this.resultSuccess1.length;
this.EntireErrorResult = this.result1.length;
this.barChartDataEntire = [
{ data: [this.EntireSuccessResult], label: 'Success' },
{ data: [this.EntireErrorResult], label: 'Error' }
];
console.log("this.barChartDataEntire = ", this.barChartDataEntire);
this.hideEntire= false;
//For Piechart
this.karzaSuccessTotal = this.resultKarzaSuccess1.length
this.karzaErrorTotal = this.resultKarza1.length;
this.karzaTotal = this.karzaSuccessTotal +
this.karzaErrorTotal;
resolve(this.karzaTotal);
});
});
});
}
app.component.html
<div class="card" style="width:400px">
<div class="card-header">
Bar Chart
</div>
<!-- For Entire Values -->
<div class="card-body" *ngIf="!hideEntire" style="width:400px">
<div class="chart-wrapper">
<canvas baseChart class="chart" [datasets]="barChartDataEntire" [labels]="barChartLabelsEntire" [options]="barChartOptionsEntire"
[legend]="barChartLegendEntire" [chartType]="barChartTypeEntire" (chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
图片-