Интеграция данных API с диаграммой ng2-диаграмма-пончик - PullRequest
Новая
       24

Интеграция данных API с диаграммой ng2-диаграмма-пончик

0 голосов
/ 25 марта 2020

Файл Component.ts

Это код кольцевой диаграммы 

  doughnutChartLabels1: Label[] = ["Total Suppliers", "Invoices Available", "Invoices Funded"];
  doughnutChartData1: MultiDataSet = [
    [this.seller_count,204,this.Inv_Funded]
  ];
  doughnutChartType1: ChartType = 'doughnut';
   donutColors1 = [
    {
      backgroundColor: [
        'rgba(95, 103, 245, 1)',
        'rgba(128, 237, 104,1)',
        '#A9A9A9',
        '#5c8a8a'
      ]
    }
  ];

В вышеприведенном коде отвечают только данные из жесткого кода.

Ниже приведен мой вызов API: 

    this.load=true;
    this._auth.pricing_buckets().toPromise().then((res:any)=>{
      if(res){
        
        this.seller_count = parseInt(res["Seller Count"])
        this.Inv_Available = parseInt(res["Total No of Invoices Available"])
        this.Inv_Funded = parseInt(res["Total No of Invoices Funded"])
        console.log(this.seller_count+" "+this.Inv_Available+ " "+this.Inv_Funded)
      }
      this.load = false;
    });

Ниже HTML Код файла: 

 <div class="col-md-6 col-sm-1 col-6 equel-grid">
          <div class="grid">
            <div class="grid-body">
              <h2 class="grid-title">Pricing Bucket [8% - 12%]</h2>
              <div class="item-wrapper">
                <div class="chartjs-size-monitor">
                  <div class="chartjs-size-monitor-expand">
                    <div class=""></div>
                  </div>
                  <div class="chartjs-size-monitor-shrink">
                    <div class=""></div>
                  </div>
                </div>
                <div class="chart-wrapper">
                  <canvas *ngIf="!load"
                    baseChart
                    [data]="doughnutChartData1"
                    [labels]="doughnutChartLabels1"
                    [chartType]="doughnutChartType1"
                    [colors]="donutColors1"
                  >
                  </canvas>
                </div>
              </div>
            </div>
          </div>
        </div>

Я не могу получить данные в кольцевой диаграмме, если они жестко запрограммированы, они работают нормально, но если передать данные API, они не отвечают.

...