从Angular中的异步函数解析数据时的空白图表

Question

当我想解析来自 http 调用的数据并将其解析为位于 ngoninit 的图表数据时遇到问题。页面重新加载时，图表显示空白数据。你能帮我解决这个问题吗？我正在使用 Chartist.js 和 Angular 4。

html:

<div class="col-md-4">
                <lbd-chart 
                  [title]="'Email Statistics'"
                  [subtitle]="'Last Campaign Performance'"
                  [chartClass]="'ct-perfect-fourth'"
                  [chartType]="emailChartType"
                  [chartData]="emailChartData"
                  [legendItems]="emailChartLegendItems"
                  [withHr]="true"
                  [footerIconClass]="'fa fa-clock-o'"
                  [footerText]="'Campaign sent 2 days ago'">
                </lbd-chart>
            </div>

ngOnInit：

 async ngOnInit() {
    console.log('Halo from ngOnInit');
    const data1 = await this.serviceDashboard.getAllGeografika().toPromise();
    const data2 = await this.serviceDashboard.getAllHistorika().toPromise();
    const data3 = await this.serviceDashboard.getAllKeramologika().toPromise();


    this.data1 = data1.length;
    this.data2 = data2.length;
    this.data3 = data3.length;

    this.emailChartType = ChartType.Pie;
    this.emailChartData = {

      series: [this.data1, this.data2, this.data3]
    };

    this.emailChartLegendItems = [
      { title: 'Open', imageClass: 'fa fa-circle text-info' },
      { title: 'Bounce', imageClass: 'fa fa-circle text-danger' },
      { title: 'Unsubscribe', imageClass: 'fa fa-circle text-warning' }
    ];
}

Answer 1

1) 我更喜欢 rxjs 而不是 async/await 范例。

ngOnInit() {
    console.log('Halo from ngOnInit');
    const data1$ = this.serviceDashboard.getAllGeografika();
    const data2$ = this.serviceDashboard.getAllHistorika();
    const data3$ = this.serviceDashboard.getAllKeramologika();

    this.chartContext$ = combineLatest([data1$, data2$, data3$])
                        .pipe(
                           map(([d1, d2, d3]) => {
                               return {
                                 emailChartType: ChartType.Pie,
                                 emailChartData: [d1, d2, d3],
                                 emailChartLegendItems = [
                     { title: 'Open', imageClass: 'fa fa-circle text-info' },
                     { title: 'Bounce', imageClass: 'fa fa-circle text-danger' },
                     { title: 'Unsubscribe', imageClass: 'fa fa-circle text-warning' }
                                 ]
                               }
                             }
                           )
                        )
}

// And template

<div class="col-md-4">
  <lbd-chart 
     *ngIf="chartContext$ | async as chart"
     [title]="'Email Statistics'"
     [subtitle]="'Last Campaign Performance'"
     [chartClass]="'ct-perfect-fourth'"
     [chartType]="chart.emailChartType"
     [chartData]="chart.emailChartData"
     [legendItems]="chart.emailChartLegendItems"
     [withHr]="true"
     [footerIconClass]="'fa fa-clock-o'"
     [footerText]="'Campaign sent 2 days ago'">
   </lbd-chart>
</div>

2) 无论如何 1) 也许不会帮助你。 Chartist.js 和 Angular 4？您可能应该考虑更好的图表库和当前 (9) 版本的 Angular。 D3.js 从来没有让任何人失望过（但你必须创建自己的图表组件:-)）

3) 您是否尝试过只在图表中放入虚拟数据而不查询 API 并查看它是否有效？