Question

我想在Angular中使用图表。输入原始数据时，将显示图形，但无法通过API动态恢复数据。我在ngOnInit中尝试使用console.log，并成功从API检索了数据。问题是当我要将数据分配给图表时。

组件TS：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { PageTitleService } from '../../core/page-title/page-title.service';
import { TranslateService } from '@ngx-translate/core';
import { StatistiqueService } from 'app/service/statistique/statistique.service';


@Component({
  selector: 'ms-charts',
  templateUrl:'./statstypedemande-component.html',
  styleUrls: ['./statstypedemande-component.scss'],
  encapsulation: ViewEncapsulation.None  
})

export class StatsTypeDemandeComponent implements OnInit {

   stats: number[];
   statistiques: [];

   constructor(private pageTitleService: PageTitleService,
               public translate: TranslateService,
               private serviceStatistique : StatistiqueService) {}

   ngOnInit() {
      this.translate.get('Statistique des types de demandes').subscribe((res: string) => {
        this.pageTitleService.setTitle(res);
      });

      this.serviceStatistique.getTest()
      .subscribe(res => {
         console.log(res);
         this.stats = res;
         console.log(this.stats);

      })      
   }

      // Doughnut
      public doughnutChartLabels = ['Entreprise', 'Salarié', 'Particulier'];
      public doughnutChartColors: any[] = [{ backgroundColor: ["#b8436d", "#00d9f9", "#a4c73c"] }];
      //public doughnutChartData:number[] = [350, 450, 100];
      public doughnutChartData:number[] = this.stats;
      public doughnutChartType:string = 'doughnut';

}

服务：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class StatistiqueService {

  readonly rootURL = 'https://localhost:44319/api';
  list : number[];

  constructor(private http: HttpClient) { }

  getTest()
  {
      return this.http.get(this.rootURL + '/Demande/StatsTypeDemande');
  }
}

组件HTML：

<!--Ng2 Charts-->
<div class="row">
    <!-- Doughnut Chart -->

    <div *ngFor="let a of stats">
        {{ a }}
    </div>   

    <div class="col-12 col-sm-6 col-md-6 col-lg-6">
        <div class="chk-block">
            <div class="chk-block-title">
                <div class="d-flex justify-content-between">
                    <div class="d-flex align-items-start flex-row">
                        <h3>Statistique des types de demande</h3>
                    </div>
                </div>
            </div>
            <div class="chk-block-content">
                <canvas baseChart height="100" [data]="doughnutChartData" [options]="PieChartOptions" [colors]="doughnutChartColors" [chartType]="doughnutChartType" [labels]="doughnutChartLabels"></canvas>
            </div>
        </div>
    </div>
</div>
<!-- Row Closed -->

Answer 1

在模板中，您使用doughnutChartData字段将数据从组件绑定到图表。在初始化期间，将其设置为this.stats字段，该字段当时不包含任何内容：

public doughnutChartData:number[] = this.stats;

从API加载数据后，将其设置为this.stats字段：

this.serviceStatistique.getTest()
  .subscribe(res => {
    console.log(res);
    this.stats = res;
    console.log(this.stats);
  })

但是doughnutChartData字段（在模板中使用）仍指向旧this.stats的 undefined 值。

可以删除this.stats并将数据直接设置到doughnutChartData字段：

this.serviceStatistique.getTest()
  .subscribe(res => this.doughnutChartData = res)

或或删除doughnutChartData并将模板更新为使用stats字段：

<canvas baseChart
  height="100"
  [data]="stats"
  [options]="PieChartOptions"
  [colors]="doughnutChartColors"
  [chartType]="doughnutChartType"
  [labels]="doughnutChartLabels">
</canvas>

StackBlitz example

数据图表不起作用

1 个答案: