ng2-charts：评估“mousemove”

时间：2016-02-26 13:28:37

标签： charts import typescript angular systemjs

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

线图正确显示。但是，当我徘徊图表时，我得到了Error during evaluation of "mousemove"。

我已经通过npm安装了ng2-charts，并通过bower安装了Chart.js，正如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 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];

编辑（2016年2月29日）：

我尝试使用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)似乎无处定义......

我错过了什么地方吗？我真的不知道如何解释所有这些。

任何帮助都会非常感激！ ：）

1 个答案:

答案 0 :(得分：3)

我遇到了你遇到的同样问题。当页面加载时没有任何显示，当我在图形应该是控制台填满错误的区域上空盘旋时。 解决它的原因是： <style> .chart {display: block; width: 100%;} </style> 在

中的index.html文件中

希望这有帮助。

相关问题
最新问题