Question

我正在尝试在我的develepping平台中实现一些统计数据，并尝试使用ngx-charts来显示它们。但是我得到一个错误，我无法弄清楚为什么。

我正在使用storedProcedures进行MySQL统计，我从Java Restful Backend调用它并在Angular 5前端返回它们。返回的表格包含以下两个字段：日期和每天的事件数。所以后端返回的表有两列。

我呈现图表的组件代码如下：

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

我使用的是Angular版本5.3和ngx-charts 8.0，它与Angular 6兼容，而不是Angular 5.我安装了ngx-charts版本7.4，一切正常。

Answer 2

我通过降级到版本7.3.0

为我解决了这个问题

yarn add @swimlane/ngx-charts@7.3.0

Answer 3

我认为我在ngx-charts-bar-horizontal看到了同样的情况，而在此之前并非如此。文档页面目前似乎也被打破了，所以我认为该软件最近已经破碎了。

Answer 4

如果您确实需要使用8.0版本，可以升级到角度6来解决问题。以下是如何从v5升级到v6 https://stackoverflow.com/a/49474334

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

ngx-chart错误“TypeError：Object（...）不是函数”

4 个答案: