charts - ng2-图表 : Error during evaluation of "mousemove"

Question

我正在尝试显示 ng2-charts折线图的示例代码 here .

折线图显示正确。但是，当我将鼠标悬停在图表上时，我得到了一个 Error during evaluation of "mousemove" .

我已经安装了ng2-charts通过 npm 和 Chart.js通过 bower，如 this 中所提议快速入门。

这是我正在使用的 SystemJS 配置:

    System.config({
        map: {
            "ng2-charts": "node_modules/ng2-charts"
        },
        packages: {
            transpiler: 'typescript',
            typescriptOptions: { emitDecoratorMetadata: true },
            app: { format: 'register', defaultExtension: 'js' },
            "ng2-charts": { defaultExtension: 'js' }
        }
    });

    System.import('./app/boot')
        .then(null, console.error.bind(console));

关于导入方式ng2-charts ，我做了一些测试，有些结果我无法解释:

1/没有任何<script> :

ReferenceError: Chart is not defined

难道 Bower 不应该为我处理所有 UI 依赖项吗？最重要的是，图表没有显示，但是当我将鼠标悬停在它应该出现的区域时，我得到了一个Error during evaluation of "mousemove"。 .

2/与 <script src="app/bower_components/Chart.js/Chart.js"></script> :

我在控制台中没有任何错误，但没有显示任何图表，“幽灵线图不可悬停”的奇怪行为也没有。

3/使用 CDN:

如果是1.0.2版本，<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script> ，与 2/ 中的行为相同。

如果是0.2.0版本，<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.js"></script> ，折线图终于显示了，但我仍然有一个 Error during evaluation of "mousemove" .

以下是 Error during evaluation of "mousemove" 的一些细节:

Uncaught EXCEPTION: Error during evaluation of "mousemove"
ORIGINAL EXCEPTION: TypeError: Cannot read property 'call' of undefined
ORIGINAL STACKTRACE:
TypeError: Cannot read property 'call' of undefined
    at BaseChart.hover (http://localhost:3000/node_modules/ng2-charts/components/charts/charts.js:199:47)
    at AbstractChangeDetector.ChangeDetector_BaseChart_0.handleEventInternal (viewFactory_BaseChart:36:24)
    at AbstractChangeDetector.handleEvent (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:8075:25)
    at AppView.triggerEventHandlers (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:10856:34)
    at eval (viewFactory_BaseChart:84:108)
    at http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:14003:34
    at http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:13356:18
    at Zone.run (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:1243:24)
    at Zone.run (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:13558:32)
    at NgZone.run (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:13520:34)

深入研究 hover 时charts.ts的方法|来 self 的 node_modules ，我发现这个:

public hover(evt) {
    console.log(evt); // I added this line
    let atEvent = this.chart.getPointsAtEvent || this.chart.getBarsAtEvent || this.chart.getSegmentsAtEvent;
    console.log(atEvent); // I added this line
    let activePoints = atEvent.call(this.chart, evt);
    if (activePoints.length > 0) {
      let activeLabel = activePoints[0].label;
      let activePoint = activePoints[0].value;
      this.chartHover.emit({activePoints: activePoints, activePoint: activePoint, activeLabel: activeLabel});
    } else {
      console.log('not point');
    }
  }

根据我添加的日志，好像atEvent实际上是 null ，如错误的详细信息所述。

我希望我已经给了你足够的信息来帮助我。

提前致谢!

编辑:

这是全部 charts.ts文件:

import {
  Component, View,
  Directive, AfterViewChecked, OnDestroy, OnInit,
  EventEmitter, ElementRef, Input
} from 'angular2/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from 'angular2/common';

declare var Chart:any;

@Component({
  selector: 'chart, canvas[chart]',
  template: `<canvas></canvas>`,
  directives: [CORE_DIRECTIVES, NgClass]
})
export class Charts {
  constructor(element:ElementRef) {
  }

}

@Component({
  selector: 'base-chart',
  properties: [
    'data',
    'labels',
    'series',
    'colours',
    'chartType',
    'legend',
    'options'
  ],
  inputs: ['chartClick', 'chartHover'],
  template: `
  <canvas style="width: 100%; height: 100%;" (click)="click($event)" (mousemove)="hover($event)"></canvas>
  `,
  directives: [CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass]
})
export class BaseChart implements OnInit, OnDestroy {
  private ctx:any;
  private cvs:any;
  private parent:any;
  private chart:any;
  private _data:Array<any> = [];
  private labels:Array<any> = [];
  private options:any = {responsive: true};
  private _chartType:string;
  private series:Array<any> = [];
  private colours:Array<any> = [];
  private legend:boolean;
  private legendTemplate:any;
  private initFlag:boolean = false;
  private chartClick:EventEmitter<any> = new EventEmitter();
  private chartHover:EventEmitter<any> = new EventEmitter();
  private defaultsColours:Array<any> = [
    {
      fillColor: 'rgba(151,187,205,0.2)',
      strokeColor: 'rgba(151,187,205,1)',
      pointColor: 'rgba(151,187,205,1)',
      pointStrokeColor: '#fff',
      pointHighlightFill: '#fff',
      pointHighlightStroke: 'rgba(151,187,205,0.8)',
      color: 'rgba(151,187,205,1)',
      highlight: 'rgba(151,187,205,0.8)'
    }, {
      fillColor: 'rgba(220,220,220,0.2)',
      strokeColor: 'rgba(220,220,220,1)',
      pointColor: 'rgba(220,220,220,1)',
      pointStrokeColor: '#fff',
      pointHighlightFill: '#fff',
      pointHighlightStroke: 'rgba(220,220,220,0.8)',
      color: 'rgba(220,220,220,1)',
      highlight: 'rgba(220,220,220,0.8)'
    }, {
      fillColor: 'rgba(247,70,74,0.2)',
      strokeColor: 'rgba(247,70,74,1)',
      pointColor: 'rgba(247,70,74,1)',
      pointStrokeColor: '#fff',
      pointHighlightFill: '#fff',
      pointHighlightStroke: 'rgba(247,70,74,0.8)',
      color: 'rgba(247,70,74,1)',
      highlight: 'rgba(247,70,74,0.8)'
    }, {
      fillColor: 'rgba(70,191,189,0.2)',
      strokeColor: 'rgba(70,191,189,1)',
      pointColor: 'rgba(70,191,189,1)',
      pointStrokeColor: '#fff',
      pointHighlightFill: '#fff',
      pointHighlightStroke: 'rgba(70,191,189,0.8)',
      color: 'rgba(70,191,189,1)',
      highlight: 'rgba(70,191,189,0.8)'
    }, {
      fillColor: 'rgba(253,180,92,0.2)',
      strokeColor: 'rgba(253,180,92,1)',
      pointColor: 'rgba(253,180,92,1)',
      pointStrokeColor: '#fff',
      pointHighlightFill: '#fff',
      pointHighlightStroke: 'rgba(253,180,92,0.8)',
      color: 'rgba(253,180,92,1)',
      highlight: 'rgba(253,180,92,0.8)'
    }, {
      fillColor: 'rgba(148,159,177,0.2)',
      strokeColor: 'rgba(148,159,177,1)',
      pointColor: 'rgba(148,159,177,1)',
      pointStrokeColor: '#fff',
      pointHighlightFill: '#fff',
      pointHighlightStroke: 'rgba(148,159,177,0.8)',
      color: 'rgba(148,159,177,1)',
      highlight: 'rgba(148,159,177,0.8)'
    }, {
      fillColor: 'rgba(77,83,96,0.2)',
      strokeColor: 'rgba(77,83,96,1)',
      pointColor: 'rgba(77,83,96,1)',
      pointStrokeColor: '#fff',
      pointHighlightFill: '#fff',
      pointHighlightStroke: 'rgba(77,83,96,0.8)',
      color: 'rgba(77,83,96,1)',
      highlight: 'rgba(77,83,96,0.8)'
    }];


  constructor(private element:ElementRef) {
  }

  ngOnInit() {
    this.ctx = this.element.nativeElement.children[0].getContext('2d');
    this.cvs = this.element.nativeElement.children[0];
    this.parent = this.element.nativeElement;
    this.refresh();
    this.initFlag = true;
  }

  ngOnDestroy() {
    if (this.chart) {
      this.chart.destroy();
      this.chart = null;
    }
    if (this.legendTemplate) {
      this.legendTemplate.destroy();
      this.legendTemplate = null;
    }
  }

  private get data() {
    return this._data;
  }

  private set data(value) {
    this._data = value;
    if (this.initFlag && this._data && this._data.length > 0) {
      this.refresh();
    }
  }

  private get chartType() {
    return this._chartType;
  }

  private set chartType(value) {
    this._chartType = value;
    if (this.initFlag && this._chartType && this._chartType.length > 0) {
      this.refresh();
    }
  }

  setLegend() {
    let list = this.parent.getElementsByTagName('ul');
    if (list.length) {
      list[0].remove();
      this.parent.insertAdjacentHTML('beforeend', this.chart.generateLegend());
    } else {
      this.parent.insertAdjacentHTML('beforeend', this.chart.generateLegend());
    }
  }

  getColour(colour:Array<number>):any {
    return {
      fillColor: this.rgba(colour, 0.2),
      strokeColor: this.rgba(colour, 1),
      pointColor: this.rgba(colour, 1),
      pointStrokeColor: '#fff',
      pointHighlightFill: '#fff',
      pointHighlightStroke: this.rgba(colour, 0.8),
      color: this.rgba(colour, 1),
      highlight: this.rgba(colour, 0.8)
    };
  }

  getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  rgba(colour, alpha) {
    return 'rgba(' + colour.concat(alpha).join(',') + ')';
  }

  public click(evt) {
    let atEvent = this.chart.getPointsAtEvent || this.chart.getBarsAtEvent || this.chart.getSegmentsAtEvent;
    let activePoints = atEvent.call(this.chart, evt);
    if (activePoints.length > 0) {
      let activeLabel = activePoints[0].label;
      this.chartClick.emit({activePoints: activePoints, activeLabel: activeLabel});
    } else {
      console.log('not point');
    }
  }

  public hover(evt) {
    console.log(evt);
    let atEvent = this.chart.getPointsAtEvent || this.chart.getBarsAtEvent || this.chart.getSegmentsAtEvent;
    console.log(atEvent);
    let activePoints = atEvent.call(this.chart, evt);
    if (activePoints.length > 0) {
      let activeLabel = activePoints[0].label;
      let activePoint = activePoints[0].value;
      this.chartHover.emit({activePoints: activePoints, activePoint: activePoint, activeLabel: activeLabel});
    } else {
      console.log('not point');
    }
  }

  getChartBuilder(ctx:any, data:Array<any>, options:any) {
    return new Chart(ctx)[this.chartType](data, options);
  }

  getDataObject(label:string, value:any):any {
    if (this.chartType === 'Line'
      || this.chartType === 'Bar'
      || this.chartType === 'Radar') {
      return {
        label: label,
        data: value
      };
    }

    if (this.chartType === 'Pie'
      || this.chartType === 'Doughnut'
      || this.chartType === 'PolarArea') {
      return {
        label: label,
        value: value
      };
    }

    return null;
  }

  getChartData(labels:any, dataObject:any) {
    if (this.chartType === 'Line'
      || this.chartType === 'Bar'
      || this.chartType === 'Radar') {
      return {
        labels: labels,
        datasets: dataObject
      };
    }
    if (this.chartType === 'Pie'
      || this.chartType === 'Doughnut'
      || this.chartType === 'PolarArea') {
      return dataObject;
    }

  }

  private refresh() {

    this.ngOnDestroy();
    let dataset:Array<any> = [];

    for (let i = 0; i < this.data.length; i++) {

      let colourDesc:Array<number> = [this.getRandomInt(0, 255), this.getRandomInt(0, 255), this.getRandomInt(0, 255)];
      let colour = i < this.colours.length ? this.colours[i] : this.defaultsColours[i] || this.getColour(colourDesc);


      let data:any = (<any>Object).assign(colour,
        this.getDataObject(this.series[i] || this.labels[i], this.data[i]));

      dataset.push(data);

    }
    let data:any = this.getChartData(this.labels, dataset);

    this.chart = this.getChartBuilder(this.ctx, data, this.options);

    if (this.legend) {
      this.setLegend();
    }
  }
}


export const CHART_DIRECTIVES:Array<any> = [Charts, BaseChart];

编辑(29/02/16):

我尝试使用 PrimeNG 而不是 ng2-chart:http://www.primefaces.org/primeng/#/linechart .我无法向自己解释的是，我有或多或少相同的行为:图表显示正常，但如果我点击它，我有

Uncaught EXCEPTION: Error during evaluation of "click"
ORIGINAL EXCEPTION: TypeError: this.chart.getPointsAtEvent is not a function


同样，当我查看来自 PrimeNg 的代码时(在 node_modules/primeng/components/chart/linechart/linechart.js 中)，有 var activePoints = this.chart.getPointsAtEvent(event);和 getPointsAtEvent(event)似乎无处定义...

我是不是遗漏了什么地方？我真的不知道如何解释这一切。

任何帮助将不胜感激! :)

Answer 1

我遇到了你遇到的同样问题。当页面加载时没有任何显示，当我将鼠标悬停在图表应该是控制台的区域时，控制台充满了错误。为我解决的是: <style> .chart {display: block; width: 100%;} </style>在 index.html 文件中的

希望这对您有所帮助。