Question

我正在使用Chart.js为某些数据创建折线图。我希望能够在图表上选择一个点，然后在下面加载与该数据点关联的更多数据。我对如何做到这一点有点困惑。

在profile.component.html我有

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

在graph.directive.ts（一些代码剪切使它缩短）我有

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

我也有一个profile.component.ts文件，但我现在省略了所有代码，因为它现在看起来并不重要。

我尝试了什么

我尝试了

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

在graph.directive.ts中

但myChart为null。我把它放在generateLineGraph（）中，因为这似乎是我唯一可以放的地方。

我尝试过（点击）=＆＃34; chartClick（$事件）＆＃34; 进入profile.component.html所以它将是

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

然后是profile.component.ts中的chartClick函数，但后来我不知道如何在graph.directive.ts中获取对图表的引用。

解决此问题的最佳方法是什么？

Answer 1

使用()=>代替function()将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

Chart.js和Angular - 点击图表上的事件

1 个答案: