как заполнить график динамическими данными - PullRequest
Новая
       26

как заполнить график динамическими данными

0 голосов
/ 19 ноября 2018

Я разрабатываю функцию для панели мониторинга в своем приложении, я использую 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;
  }

1 Ответ

0 голосов
/ 19 ноября 2018

Проблема в том, что диаграмма визуализируется до того, как данные поступают в асинхронном случае, задержка рендеринга до получения данных должна работать следующим образом:

.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 должна появиться с данными.

...