Angular 5 chart.js onclick, возвращающий пустой массив

Question

Я пытаюсь заставить работать функцию onclick в chart.js и узнал о функции 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]), очевидно, просто возвращает undefined.

Answer 1

Приведенный ниже код работает для меня, а также нет необходимости использовать ElementRef для добавления обработчика события click.Вы можете просто вызвать метод для события (click) для <canvas>, как показано ниже -

<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