Angular 5 chart.js onclick 返回空数组答案

【问题标题】：Angular 5 chart.js onclick returning empty arrayAngular 5 chart.js onclick 返回空数组
【发布时间】：2018-05-30 23:11:52
【问题描述】：

我正在尝试让 chart.js 中的 onclick 函数工作，并发现 getElementsAtEvent(event) 函数应该返回一个数组，其中包含我单击的图表部分的数据，但它会不断返回一个空数组。

这是我的代码：

var canvas = this.el; //this is an elementref
canvas.onclick = (event) => {
  var data = this.chart.getElementsAtEvent(event)
  console.log(data);
}

this.chart = new Chart('canvas', {
  type: 'bar',
  data: {
    labels: ["Browser", "Game", "Word Processing", "Database", "Spreadsheet", "Multimedia"],
    datasets: [{
      label: 'number of applications related to',
      data: [24, 10, 30, 20, 46, 78],
      backgroundColor: 'rgba(54, 162, 235, 0.2',
      borderColor: 'rgba(54, 162, 235, 1)',
      pointHoverBackgroundColor: 'red',
      borderWidth: 1
    }]
  },
  options: {
    title: {
      text: "Application Logs",
      display: true
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
})

不确定这是否是它不起作用的部分原因，但这是我的画布：

<canvas id="canvas" width="300" height="123" class="chartjs-render-monitor"></canvas>

就像我提到的，它只是在控制台中打印出一个空数组 []，而使用 console.log(data[0]) 显然只是返回未定义。

【问题讨论】：

检查我的答案应该可以解决您的问题。
我添加了演示链接

标签： angular chart.js

【解决方案1】：

下面的代码对我有用，而且不需要使用ElementRef 来添加点击事件处理程序。您可以在<canvas> 的(click) 事件上调用一个方法，如下所示 -

<canvas id="canvas" width="300" height="123" #mychart (click)="showData($event)" class="chartjs-render-monitor">{{chart}}</canvas>

这里我使用组件的chart 属性渲染了图表。

这里是showData() 方法-

showData(evt:any){
  var data = this.chart.getElementsAtEvent(evt)
  console.log(data[0]._model); // it prints the value of the property
}

这是完整的工作代码-

app.component.ts

import { Component,ViewChild,ElementRef,OnInit } from '@angular/core';
import Chart from 'chart.js';
declare var Chart: any;

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  implements OnInit{
  name = 'Angular 5';
  chart:any;
  // @ViewChild('mychart') el:ElementRef; 

  constructor(){

  }

  ngOnInit(){
    this.createChart();
  }
createChart(){
// var canvas = this.el; 

this.chart = new Chart('canvas', {
  type: 'bar',
  data: {
    labels: ["Browser", "Game", "Word Processing", "Database", "Spreadsheet", "Multimedia"],
    datasets: [{
      label: 'number of applications related to',
      data: [24, 10, 30, 20, 46, 78],
      backgroundColor: 'rgba(54, 162, 235, 0.2',
      borderColor: 'rgba(54, 162, 235, 1)',
      pointHoverBackgroundColor: 'red',
      borderWidth: 1
    }]
  },
  options: {
    title: {
      text: "Application Logs",
      display: true
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
})
}
    showData(evt:any){
      var data = this.chart.getElementsAtEvent(evt)
      console.log(data[0]._model);
     }

}

app.component.html

<canvas id="canvas" width="300" height="123" #mychart (click)="showData($event)" class="chartjs-render-monitor">{{chart}}</canvas>

这是一个工作演示 - https://stackblitz.com/edit/angular-5-example-txcthz

【讨论】：