Chart.jsとAngular - ClickイベントClick on

Question

私はChart.jsを使ってデータの折れ線グラフを作成しています。私は、グラフ上のポイントを選択し、そのデータポイントに関連付けられているより多くのデータをロードすることができるようにしたい。私はこれを行う方法にちょっと固執しています。 profile.component.htmlで

Iはgraph.directive.tsで

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

私はまたprofile.componentを有する

@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 
     });  
    } 
} 

を有する（それを短くするためにいくつかのコードカット）を有します.tsファイルですが、今は重要ではないように、すべてのコードを省略しています。私はgraph.directive.tsで

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

を入れてみましたが、myChartがNULLの

を試してみましたが、何

。私はそれを置くことができる唯一の場所と思われるので、私はgenerateLineGraph（）に配置していました。

私はそれがその後、

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

、その後profile.component.tsでchartClick機能はなくなりますのでprofile.component.htmlに （クリック）= "chartClick（$イベント）" を入れてみましたgraph.directive.tsでグラフを参照する方法を知りません。

この問題を解決するにはどうすればよいでしょうか？代わりにfunction()の

Answer 1

使用()=>コールバック内thisの範囲を維持するために：詳細については

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

がhttps://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions

を見ます