antvis/G2

Do you want to work on this issue?

You can request for a bounty in order to promote it!

[Bug]: g2最新版本折线图,x轴横坐标只有两个并且数据缺失时,tooltip展示的图例颜色顺序错乱 #6710

ustcfury posted onGitHub

Describe the bug / 问题描述

以下是data,删除注释的一条数据后,tooltip展示的图例颜色不对,并且只有在x轴只有两个值时才会发生(例如eg中x轴横坐标为 '10:10','10:20',假如有更多个时不会有这种问题)

Image

Image

const data = [ { time: '10:10', call: 10, value: 2,name:"people" }, { time: '10:20', call: 10, value: 7,name:"people" }, // { time: '10:10', call: 10, value: 3,name:"mock" }, { time: '10:20', call: 10, value: 5,name:"mock" }, { time: '10:10', call: 10, value: 10,name:"call" }, { time: '10:20', call: 10, value: 10,name:"call" }, ];

https://codesandbox.io/p/sandbox/wh6y9r

Steps to Reproduce the Bug or Issue / 重现步骤

复现链接即可重现

Version / 版本

🆕 5.x

OS / 操作系统

  • macOS
  • Windows
  • Linux
  • Others / 其他

Browser / 浏览器

  • Chrome
  • Edge
  • Firefox
  • Safari (Limited support / 有限支持)
  • IE (Nonsupport / 不支持)
  • Others / 其他

<img width="1312" alt="Image" src="https://github.com/user-attachments/assets/02aa93c9-1f5e-4ff7-a0a3-33c5109f325a" /> 简单 debug 了一下,应该是 groupItems 函数的处理导致了颜色发生了变化。

posted by BQXBQX 27 days ago

目前看来是折线图在特殊情况下的拾取问题,待排查

posted by interstellarmt 27 days ago

目前看来是折线图在特殊情况下的拾取问题,待排查

问题已找到,是因为按照索引值来查询 element 导致。element 的数据因为缺失无法和 data 一一对应,但是还是按照索引值去查找,导致 element 匹配错误,所以颜色错误。

<img width="734" alt="Image" src="https://github.com/user-attachments/assets/0aae3c12-0ff4-44de-aeed-422994882924" />

posted by BQXBQX 27 days ago

elements数组长度为3,data长度为2导致了不匹配,要解决颜色的问题,不取索引,拿data里的key去做匹配应该可以解决。 但是折线图单点情况下的tooltip拾取看起来不太符合预期,鼠标在图表左侧的时候tooltip拾取到了最右边的单点,感觉这也是个问题。

posted by interstellarmt 27 days ago

elements数组长度为3,data长度为2导致了不匹配,要解决颜色的问题,不取索引,拿data里的key去做匹配应该可以解决。 但是折线图单点情况下的tooltip拾取看起来不太符合预期,鼠标在图表左侧的时候tooltip拾取到了最右边的单点,感觉这也是个问题。

这个问题和 seriesTootip 的拾取有关,和 https://github.com/antvis/G2/pull/6708 有关,我结合一起 debug 一下。

posted by BQXBQX 27 days ago

Fund this Issue

$0.00
Funded
Only logged in users can fund an issue

Pull requests