Ошибка ngx-диаграммы "Ошибка типа: объект (...) не является функцией"

Question

Я пытаюсь реализовать некоторые статистические данные на своей платформе для разработки и пытаюсь использовать ngx-диаграммы для их отображения.Однако я получаю сообщение об ошибке и не могу понять, почему.

Я использую хранимые процедуры для статистики MySQL, которую я вызываю из Java Restful Backend и возвращаю их в Angular 5 front-end.Возвращенная таблица имеет следующие два поля: Дата и количество инцидентов в день.Таким образом, таблица, возвращаемая бэкендом, имеет эти два столбца.

Мой код для компонента, отображающего диаграмму, следующий:

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});
        }
      );
  }

}

Однако, когда я запускаю приведенный выше код, я получаю в JavaScriptвыводит сообщение об ошибке:

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)

Файл моего 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>

Служба получения значений:

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));
  }
}

Что я делаю неправильно

Answer 1

Если вам действительно нужно использовать версию 8.0, вы можете обновить ее до версии Angular 6, чтобы решить эту проблему.Вот как вы можете выполнить обновление с v5 до v6 https://stackoverflow.com/a/49474334

Вы также можете подумать, что страница документации сейчас сломана, но вы можете найти ее здесь https://swimlane.gitbook.io/ngx-charts/v/docs-test/installing

Answer 2

Я использую Angular версии 5.3 и ngx-charts 8.0, который совместим с Angular 6, а не Angular 5. Я установил ngx-charts версии 7.4 и все работает нормально.

Answer 3

Я исправил проблему, опустившись до версии 7.3.0

yarn add @swimlane/ngx-charts@7.3.0

Answer 4

Я думаю, что вижу то же самое с ngx-charts-bar-horizontal, тогда как раньше этого не было.На данный момент страница документации, похоже, тоже не работает, поэтому я полагаю, что программное обеспечение было недавно обновлено с ошибками.