G2
G2 copied to clipboard
折线图的点击事件,能返回单个点吗?现在这个target是返回所有的点
- [ ] I have searched the issues of this repository and believe that this is not a duplicate.
Reproduction link
https://github.com/antvis/component/issues/174
Steps to reproduce
https://github.com/antvis/component/issues/174
| Environment | Info |
|---|---|
| g2 | 4.1.20 |
| System | - |
| Browser | - |
目前不行。应该是 target 返回的是一条折线对应的 Path shape,然后 shape 中包含的是全部的数据,而不是一个点的数据。
提供一个办法:
- 拿到点击的 x y 坐标
- 根据 x y 用 coordinate 转成 0 ~ 1 的数据
- 然后获取到离这个点击点最近的一个数据点
您好 请问具体要如何 根据 xy 用 coordinate 转数据呢 文档里貌似没有相关介绍
给个伪代码:
chart.on('line:click', (e) => {
const { x, y } = e;
const { X, Y } = coordinate.invert({ x, y }); // x y 是 0 ~ 1 之间的值
const idx = Math.floor(x / (1 / data.length)); // data.length 就是折线图数据点的个数。
})