Chart.js und Angular - Klick Ereignis auf Diagramm

Question

Ich verwende Chart.js, um ein Liniendiagramm für einige Daten zu erstellen. Ich möchte in der Lage sein, einen Punkt auf dem Graphen auszuwählen und dann darunter mehr Daten zu laden, die diesem Datenpunkt zugeordnet sind. Ich bin ein bisschen fest, wie das geht.

In profile.component.html Ich habe

<canvas [lineGraph]="graphData" width="700" height="400"></canvas> 

In graph.directive.ts (einige Code geschnitten, um es kurz zu machen) Ich habe

@Directive({ 
    selector: '[lineGraph]' 
}) 

export class LineGraphDirective { 
    @Input('lineGraph') data:any; 

    el:any; 
    myChart:any; 

    constructor(element:ElementRef) { 
     this.el = element.nativeElement; 
    } 

    ngAfterViewInit() { 
     this.generateLineGraph(); 
    } 

    private generateLineGraph() { 
     var canvas = this.el; 

     var _data = {...load data here from data input}; 

     var _options = {...get options here}; 

     this.myChart = new Chart(canvas.getContext('2d'), { 
      type: 'line', 
      data: _data, 
      options: _options 
     });  
    } 
} 

Ich habe auch eine profile.component .ts-Datei, aber ich lasse den gesamten Code für jetzt weg, da es im Moment nicht wichtig scheint.

Was ich versucht habe

Ich versuchte

setzen

canvas.onclick = function (event) { 
    ... code to get the point clicked on such as 
    this.myChart.getPointsAtEvent(event) 
}; 

in graph.directive.ts aber myChart ist null then. Ich habe das in generateLineGraph() platziert, da dies der einzige Ort zu sein schien, an den ich es schreiben konnte.

Ich habe versucht Putting (klick) = "chartClick ($ event)" in profile.component.html so wäre es

<canvas [lineGraph]="graphData" width="700" height="400" (click)="chartClick($event)"></canvas> 

und dann eine chartClick Funktion in profile.component.ts sein, aber dann Ich weiß nicht, wie man einen Verweis auf das Diagramm in graph.directive.ts bekommt.

Was wäre der beste Ansatz, um dieses Problem zu lösen?

Answer 1

Verwenden ()=> statt function() den Umfang der this innerhalb der Callback zu halten:

canvas.onclick = (event) => { 
    ... code to get the point clicked on such as 
    this.myChart.getPointsAtEvent(event) 
}; 

Weitere Details finden https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions