Question

我在应用程序中为仪表板开发了功能，我使用ChartModule，如果数据是静态的，图表单词，但是我想在图表中使用动态数据，问题是如何用动态数据填充图表，谢谢文件.html：

<div class="col-md-4">
      <div class="ibox" style="margin-top:20px">
        <div class="ibox-head">
          <div class="ibox-title">
            <div style="font-size:12px"><i class="fa fa-pie-chart fa-fw"></i> My Tickets</div>
          </div>
        </div>            
        <div class="ibox-body" *ngFor="let pie of pies">
          <div style="display: block">
            <canvas baseChart width="511" height="255"
                    [(data)]="this[pie.Nombre]" 
                    [(labels)]="this[pie.Name]"
                    [chartType]="doughnutChartType"
                    (chartHover)="chartHovered($event)"
                    (chartClick)="chartClicked($event)"></canvas>
          </div>
        </div>
      </div> 
    </div>

file.ts：

public doughnutchartlabels: string[] = [];
  public doughnutchartdata: number[] = [];
  public doughnutcharttype: string = 'doughnut';
  constructor(private http: HttpClient, private _dashbordService: DashbordService, private _userService: UserService) { }
  async ngOnInit() {

    let id = localStorage.getItem('userId');
    console.log(id);
    this.pies = await this._dashbordService.getViews(id)
  }

model.ts：

export class PieChartData {
  Name: string;
  Nombre: number;
}

file.service.ts：

async getViews(UID) {
    let result = await this.http.get(this.pathAPI + 'Statistique?typeByUserId=' + UID)
      .toPromise()
      .then(function (res) {
        return result = res;
      })
      .catch((err) => {
        return (err)
      })
    return result;
  }

Answer 1

问题是图表在数据到达异步情况之前被渲染，延迟渲染直到数据到达应该按以下方式工作：

.ts

pies:PieChartData;//undefined to start with

.html

<div class="col-md-4">
  <div class="ibox" style="margin-top:20px">
    <div class="ibox-head">
      <div class="ibox-title">
        <div style="font-size:12px">
          <i class="fa fa-pie-chart fa-fw"></i> My Tickets
        </div>
      </div>
    </div>
    <ng-container *ngIf="pies">
      <div class="ibox-body" *ngFor="let pie of pies">
        <div style="display: block">
          <canvas
            baseChart
            width="511"
            height="255"
            [(data)]="this[pie.Nombre]"
            [(labels)]="this[pie.Name]"
            [chartType]="doughnutChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"
          ></canvas>
        </div>
      </div>
    </ng-container>
  </div>
</div>

在api调用图表应随数据一起显示后，pies的数据一旦到达。

如何通过动态数据填充图表

1 个答案: