Пустая диаграмма при разборе данных из Asyn c Функция в Angular - PullRequest
Новая
       29

Пустая диаграмма при разборе данных из Asyn c Функция в Angular

1 голос
/ 07 марта 2020

У меня возникла проблема, когда я хочу проанализировать данные, полученные из 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' }
    ];
}

1 Ответ

0 голосов
/ 07 марта 2020

1) Я бы предпочел rx js парадигме 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) возможно, вам это не поможет. Чартист. js и Angular 4? Возможно, вам следует подумать о лучшей библиотеке графиков и текущей (9) версии Angular. D3. js никогда не подводил никого (но вам нужно было бы создать свои собственные компоненты диаграммы: -))

3) Вы пытались просто вставить фиктивные поддельные данные в диаграмму, не запрашивая API, и посмотрите, это работает?

...