ng2-charts条形图在angular2 +

时间:2019-01-06 13:00:27

标签: angular typescript ng2-charts

我已经在我的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>

图片-

bar chart

0 个答案:

没有答案