Charts ng2图表：评估“数据”时出错；“鼠标移动”；

我正在尝试显示线条图的

ng2图表

示例代码

折线图显示正确。但是，当我在图形上悬停时，在计算“mousemove”时出现了一个

错误

我已经通过npm安装了
ng2图表
，通过bower安装了
Chart.js
，正如quickstart中建议的那样

这是我正在使用的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图表的方法
，我做了一些测试，有些结果我无法解释：

1/无任何
：

ReferenceError: Chart is not defined

Bower不是应该为我处理所有的UI依赖项吗？除此之外，图形不会显示，但当我将鼠标悬停在它应该显示的区域时，在计算“mousemove”时出现了一个
错误

2/带有
：

ReferenceError: Chart is not defined

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

3/带有CDN:

ReferenceError: Chart is not defined

如果1.0.2版本为
，则与2/中的行为相同

如果是0.2.0版本，
，最终会显示折线图，但在计算“mousemove”
时，我仍然有一个
错误

下面是计算“mousemove”时出现的
错误的一些详细信息
：

从我的
节点\u模块
深入研究
charts.ts的
悬停
方法时，我发现：

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
，如错误细节所述

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

提前谢谢你

编辑：

ReferenceError: Chart is not defined

以下是整个
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];

导入{
组件、视图、，
指令、AfterViewChecked、OnDestroy、OnInit、，
EventEmitter，ElementRef，输入
}来自“angular2/核心”；
从'angular2/common'导入{CORE_指令、FORM_指令、NgClass}；
申报var图表：有；
@组成部分({
选择器：“图表，画布[图表]”，
模板：``，
指令：[核心指令，NgClass]
})
导出类图表{
构造函数（元素：ElementRef）{
}
}
@组成部分({
选择器：'基础图表'，
特性：[
"数据",，
“标签”，
“系列”，
“颜色”，
“图表类型”，
“传奇”，
“选项”
],
输入：['chartClick'，'chartHover']，
模板：`
`,
指令：[核心指令，形式指令，NgClass]
})
导出类BaseChart实现OnInit、OnDestroy{
私人ctx：任何；
私人简历：任何；
私人家长：任何；
私人海图：任何；
私有数据：数组。我无法向自己解释的是，我或多或少有着相同的行为：图表显示得很好，但如果我点击它，我就有了

未捕获异常：计算“单击”时出错
原始异常：TypeError:this.chart.getPointsAtEvent不是函数

同样，当我查看priming中的代码时（在
node\u modules/priming/components/chart/linechart/linechart.js
），有
var-activePoints=this.chart.getPointsAtEvent（event）；
和
getPointsAtEvent（event）
似乎没有定义任何地方

我是不是遗漏了什么？我真的不知道怎么解释这一切

非常感谢您的帮助！：）
我遇到了与您相同的问题。当页面加载时，没有显示任何内容，当我将鼠标悬停在图形应为的区域时，控制台中充满了错误。
对我来说，解决这个问题的办法是：
.chart{显示：块；宽度：100%；}
在

希望这有帮助。
对不起，我误解了代码。问题是
这个.chart
没有任何函数
getPointsAtEvent
，
getBarsAtEvent
或
getSegmentsAtEvent
。可能
这个。chart
根本不是一个图表。你可能是对的，我已经更新了我的第一篇帖子，添加了如果你想看一看的话，请把整个
charts.ts
文件放在最后。如果，恐怕是这样，
this.chart
结果根本不是一个图表，我不确定我能做些什么来修复我的错误，我想……我已经用新信息更新了我的原始帖子，你能看一下吗？我真的很想感谢！：）我建议添加charts.js d.ts文件->如果你使用打字，它可以自动从github获取If。你也可以将其发布到PrimeNG论坛，以便我们的团队可以在那里提供帮助吗？我不太理解Cagatay，我需要确切地添加chart.d.ts文件到哪里？只是为了确定，是那个吗？还有，当我尝试的时候g要使用打字（我第一次尝试），我有
打字错误！消息无法解析“https://github.com/DefinitelyTyped/DefinitelyTyped.git“打字错误！由意外标记引起”这也解决了我尝试对Ionic 2执行相同操作时的问题。非常感谢