web-dev-qa-db-fra.com

erreur ngx-chart "TypeError: Object (...) n'est pas une fonction"

J'essaie d'implémenter des statistiques dans ma plate-forme de développement et j'essaie d'utiliser des graphiques ngx pour les afficher. Cependant, je reçois une erreur et je ne comprends pas pourquoi. 

J'utilise stockéesProcédures pour les statistiques MySQL que j'appelle depuis Java Restful Backend et que je les retourne dans Angular 5 front-end. La table renvoyée contient les deux champs suivants: Date et nombre d'incidents par jour. Donc, la table retournée par le backend a ces deux colonnes.

Mon code pour le composant qui rend le graphique est le suivant:

import {Component, OnInit} from '@angular/core';
import {StatisticsService} from '../../statistics.service';


class Data {

  private _name: string;
  private _value: number;

  get name(): string {
    return this._name;
  }

  set name(value: string) {
    this._name = value;
  }

  get value(): number {
    return this._value;
  }

  set value(value: number) {
    this._value = value;
  }

}


@Component({
  selector: 'app-daily-incidents-statistics',
  templateUrl: './daily-incidents-statistics.component.html',
  styleUrls: ['./daily-incidents-statistics.component.css']
})


export class DailyIncidentsStatisticsComponent implements OnInit {


  view: any[] = [700, 400];
  data: any[] = [];

  // options
  showXAxis = true;
  showYAxis = true;
  gradient = false;
  showLegend = false;
  showXAxisLabel = true;
  xAxisLabel = 'Ημέρα';
  showYAxisLabel = true;
  yAxisLabel = 'Αρ. Περιστατικών';


  constructor(private statisticsService: StatisticsService) {
    // Object.assign(this, { single })
    // Object.assign(this, { data } );
  }

  colorScheme = {
    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
  };


  onSelect(event) {
    console.log(event);
  }

  async ngOnInit() {
    console.log('NG ON INIT EXECUTION');
    await this.getIncidentsByDay();
  }

  getIncidentsByDay() {
    this.statisticsService.getIncidentsByDay()
      .subscribe(
        (results) => {
          let temp = new Data();

          for (let i in results) {
            console.log(results[i][0] + '>>=====>> ' + results[i][1]);
            temp.name = results[i][0];
            temp.value = results[i][1];
            this.data.Push(temp);
          }

          const test = this.data;
          // for (let i = 0; i < this.data.length; i++) {
          //   console.log('wtf: ' + this.data[i][0] + '::::' + this.data[i][1]);
          // }
          // console.log(results);
          // console.log(JSON.stringify(results));
          // Object.assign(this, {test});
        }
      );
  }

}

Cependant, lorsque je lance le code ci-dessus, l'erreur dans la console JavaScript est affichée:

ERROR TypeError: Object(...) is not a function
    at BarVerticalComponent../src/common/base-chart.component.ts.BaseChartComponent.bindWindowResizeEvent (index.js:7818)
    at BarVerticalComponent../src/common/base-chart.component.ts.BaseChartComponent.ngAfterViewInit (index.js:7730)
    at callProviderLifecycles (core.js:12689)
    at callElementProvidersLifecycles (core.js:12656)
    at callLifecycleHooksChildrenFirst (core.js:12639)
    at checkAndUpdateView (core.js:13794)
    at callViewAction (core.js:14136)
    at execComponentViewsAction (core.js:14068)
    at checkAndUpdateView (core.js:13791)
    at callViewAction (core.js:14136)

Mon fichier de modèle html:

<div>
  lalalal <br/>
  ante pali... <br/>
  kala ti na pw... <br/>
  Gamiete pali... <br/>
  <ngx-charts-bar-vertical
    [view]="view"
    [scheme]="colorScheme"
    [results]="data"
    [gradient]="gradient"
    [xAxis]="showXAxis"
    [yAxis]="showYAxis"
    [legend]="showLegend"
    [showXAxisLabel]="showXAxisLabel"
    [showYAxisLabel]="showYAxisLabel"
    [xAxisLabel]="xAxisLabel"
    [yAxisLabel]="yAxisLabel"
    (select)="onSelect($event)">
  </ngx-charts-bar-vertical>
</div>

Alors que le service pour récupérer les valeurs est:

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {catchError} from 'rxjs/operators';
import {ErrorHandler} from '../shared/lib/error-handler';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class StatisticsService {

  constructor(private http: HttpClient) {
  }


  public getIncidentsByDay(): Observable<any> {
    console.log("FEtching Incidents All By Day");
    const url = 'statistics/incidents/day';
    return this.http.get(url)
      .pipe(catchError(ErrorHandler.handleError));
  }
}

Qu'est-ce que je fais mal?

angular5ngx-charts
7
mixtou

J'utilise Angular version 5.3 et ngx-charts 8.0 qui est compatible avec Angular 6 et non pas Angular 5. J'ai installé ngx-charts version 7.4 et tout fonctionne correctement.

11
mixtou

J'ai résolu le problème pour moi en rétrogradant à la version 7.3.0

yarn add @swimlane/[email protected]

2
davidav

Si vous devez vraiment utiliser la version 8.0, vous pouvez effectuer une mise à niveau vers angular 6 pour résoudre le problème. Voici comment effectuer la mise à niveau de v5 à v6 https://stackoverflow.com/a/49474334

Vous pouvez aussi penser que la page de documentation est déjà brisée mais vous pouvez la trouver ici https://swimlane.gitbook.io/ngx-charts/v/docs-test/installing

0
segito10

Je pense que je vois la même chose avec ngx-charts-bar-horizontal, alors qu'avant, ce n'était pas le cas. La page de documentation semble être cassée pour le moment aussi, donc je suppose que le logiciel a récemment été mis à jour de manière cassée. 

0
davidav