web-dev-qa-db-ja.com

ngx-chartエラー「TypeError：Object（...）is not a function」

開発プラットフォームにいくつかの統計情報を実装しようとしています。ngx-chartsを使用して表示します。しかし、エラーが発生し、その理由がわかりません。

私はJava Restful Backendから呼び出し、それらをAngular 5フロントエンドに返します。 ：日付と1日あたりのインシデント数したがって、バックエンドによって返されるテーブルには、これらの2つの列があります。

チャートをレンダリングするコンポーネントの私のコードは次のとおりです。

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

何が悪いのですか？

angular5ngx-charts
10
mixtou

Angularバージョン5.3とngx-charts 8.0を使用しています。これはAngular 6と互換性があり、Angular 5. 5。インストールされたngx-chartsバージョン7.4とすべてが正常に動作します。

13
mixtou

バージョン7.3.0にダウングレードして問題を解決しました

yarn add @swimlane/[email protected]

2
davidav

本当に8.0バージョンを使用する必要がある場合は、angular 6にアップグレードして問題を解決できます。v5からv6へのアップグレード方法は次のとおりです https：// stackoverflow.com/a/49474334

ドキュメンテーションページが今は壊れていると思うこともできますが、ここで見つけることができます https://swimlane.gitbook.io/ngx-charts/v/docs-test/installing

0
segito10

ngx-charts-bar-horizontalでも同じだと思いますが、以前はそうではありませんでした。ドキュメントページも今壊れているようですので、最近ソフトウェアが壊れてアップデートされたと思います。

0
davidav