如何用动态数据填充图表答案

【问题标题】：how to fill the chart by dynamic data如何用动态数据填充图表
【发布时间】：2019-04-21 16:26:04
【问题描述】：

我在我的应用程序中为仪表板开发功能，我使用 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>

文件.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;
  }

【问题讨论】：

标签： angular charts dashboard

【解决方案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>

一旦数据到达pies，API 调用图表应显示数据。

【讨论】：