从图表点击事件中获取 x,y 值

Question

我正在使用 ng2-charts 创建一个带有多个可点击点的折线图。当我点击一个点时，会触发一个点击事件——方法如下：

public chartClicked(e: any): void {
    console.log('Clicked: ' + e);
}

这是我的图表 HTML：

<div class="col-md-6">
    <base-chart id="lineChart" class="chart"
                [datasets]="chartData"
                [labels]="chartLabels"
                [colors]="chartColours"
                [legend]="chartLegend"
                [chartType]="chartType"
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)"></base-chart>
</div>

不幸的是，ng2-charts 文档没有解释如何实际使用“e”变量（据我所知）。我想从点击点检索 x 和 y 值 - 有人知道该怎么做吗？

Answer 1

查看 Angular2 图表演示，我发现了以下内容：

e 是一个容器，用于 a)被点击的图表元素和 b)点击的鼠标事件。

e = {
  active: chartData[],
  event: MouseEvent
}

因此，由于它似乎是一个常规的旧 MouseEvent，您应该能够执行以下操作来获取图表上的位置：

var x:number = e.event.layerX;
var y:number = e.event.layerY;

我建议仔细检查一下，如果我错了，请告诉我。