antvis/G2

Do you want to work on this issue?

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

[Bug]: 多轴图数据缺失的时候,tooltip title 显示异常 #6699

hustcc posted onGitHub

Describe the bug / 问题描述

tooltip显示相关问题,柱状图堆叠+折线图,部分时间X轴对应的Y轴没有值,这种情况显示的tooltip异常

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

const data = [
  { time: '10:10', call: 4, waiting: 2, people: 2 },
  { time: '10:15', call: 2, waiting: 6, people: 3 },
  { time: '10:20', call: 13, waiting: 2, people: 5 },
  { time: '10:25', call: 9, waiting: 9, people: 1 },
  { time: '10:30', call: 5, waiting: 6, people: 3 },
  { time: '10:35', call: 8, waiting: null, people: null },
  { time: '10:40', call: 13, waiting: 3, people: 2 },
];

chart.data(data);

chart
  .interval()
  .encode('x', 'time')
  .encode('y', 'waiting')
  .encode('color', () => 'waiting')

chart
  .interval()
  .encode('x', 'time')
  .encode('y', 'people')
  .encode('color', () => 'people')

chart
  .line()
  .encode('x', 'time')
  .encode('y', 'call')
  .encode('color', () => 'call')

chart.render();

Image

No response

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

No response

Version / 版本

🆕 5.x

OS / 操作系统

  • macOS
  • Windows
  • Linux
  • Others / 其他

Browser / 浏览器

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

确认 bug,应该是 tooltip 拾取问题。

posted by hustcc about 1 month ago

简单 debug 了一下,感觉问题出现在状态处理上,因为数据是 undefined ,被 filterValid 方法过滤掉了,导致后续直接缺失当前数据,从而进一步导致了tooltip 无法正确捕捉,所以 tooltip 展示错误,用户可以将数据从 null 改为 0,这样 tooltip 展示的是正确的。

<img width="1159" alt="Image" src="https://github.com/user-attachments/assets/b922b1b8-970f-492c-8c16-c0fbf6d7d31c" />

posted by BQXBQX about 1 month ago

但是 title 为啥会变成多个数据。

posted by hustcc about 1 month ago

但是 title 为啥会变成多个数据。

title 出现多个数据的原因是 time 折线图是正确的,但是条形图是错误的,条形图错误数据和折线图正确数据整合,导致 tooltip 的 title 展示了两个时间,所以错误。

如果源码这里需要处理的话,我觉得可以对 value 是 null 的数据项,tooltip 直接不展示。我来处理一下。

posted by BQXBQX about 1 month ago

title 出现多个数据的原因是 time 折线图是正确的,但是条形图是错误的,条形图错误数据和折线图正确数据整合,导致 tooltip 的 title 展示了两个时间,所以错误。

如果源码这里需要处理的话,我觉得可以对 value 是 null 的数据项,tooltip 直接不展示。我来处理一下。

合理,为 null 的不显示。

posted by hustcc about 1 month ago

确认 bug,应该是 tooltip 拾取问题。

请问下,这个问题大概什么时候修复,目前我们项目内也出现了tooltip问题,如果短期内不能修复的话那我们只能回归到低版本了

posted by yk9710 24 days ago

这个已经修复好了,我们今天或者明天就会发布一个中版本 5.3.0~

posted by interstellarmt 24 days ago

Fund this Issue

$0.00
Funded
Only logged in users can fund an issue

Pull requests