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 Chart演示，我发现以下内容：

e是a）点击的图表元素和b）鼠标点击的容器。

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

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

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

我建议仔细检查并告诉我是否错了。

从图表点击事件

1 个答案: