G2 icon indicating copy to clipboard operation
G2 copied to clipboard

折线图的点击事件,能返回单个点吗?现在这个target是返回所有的点

Open visiky opened this issue 4 years ago • 2 comments

  • [ ] 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 -

visiky avatar Jul 19 '21 12:07 visiky

目前不行。应该是 target 返回的是一条折线对应的 Path shape,然后 shape 中包含的是全部的数据,而不是一个点的数据。

提供一个办法:

  • 拿到点击的 x y 坐标
  • 根据 x y 用 coordinate 转成 0 ~ 1 的数据
  • 然后获取到离这个点击点最近的一个数据点

hustcc avatar Oct 09 '21 07:10 hustcc

您好 请问具体要如何 根据 xy 用 coordinate 转数据呢 文档里貌似没有相关介绍

imyuxh avatar Mar 14 '22 07:03 imyuxh

给个伪代码:

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 就是折线图数据点的个数。 
})

hustcc avatar Dec 07 '22 05:12 hustcc