ngx-chart error "TypeError: Object(...) is not a function"

Question

我正在尝试在我的开发平台上实现一些统计数据，我尝试使用 ngx-charts 来显示它们。但是我收到一个错误，我不知道为什么。

我正在使用 storedProcedures 进行 MySQL 统计，我从 Java Restful 后端和 return 在 Angular 5 前端调用它们。 returned table 有以下两个字段：日期和每天的事件数。所以后端编辑的 table return 有这两列。

我的图表组件代码如下：

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

}

然而，当我运行以上代码时，我在 Java 脚本控制台中得到了错误：

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

我认为 ngx-charts-bar-horizontal 也是如此，而在此之前情况并非如此。文档页面目前似乎也已损坏，因此我认为该软件最近以损坏的方式进行了更新。

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

如果确实需要使用8.0版本，可以升级到angular6来解决问题。这是从 v5 升级到 v6 的方法

您也可以认为文档页面现在已损坏，但您可以在这里找到它 https://swimlane.gitbook.io/ngx-charts/v/docs-test/installing

ngx-chart error "TypeError: Object(...) is not a function"

ngx-chart error "TypeError: Object(...) is not a function"

angular5

ngx-charts