[Bug]: 当数据量很大时， 通过chart.emit("tooltip:show") 时， tooltip 显示两个xField 的数据，

[unicode6674]

Describe the bug / 问题描述

数据量：x轴每秒一个, 24小时

hover 时正常显示

当点击后， 通过 emit('tooltip: show')固定tooltip 时， 会出现以下情况

 chart.on("plot:click", () => {
 chart.emit("tooltip:disable");
        chart.emit("tooltip:show", {
          data: {
            data: { x: devicePointerTime.value },
          },
        });
    });

效果如图

一个奇怪的点：
如果使用slider, slider 拖动一下， 上面的问题就不存在了

Reproduction link / 复现链接

No response

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

No response

Version / 版本

🆕 2.x

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

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

[dosubot]

这个问题的根本原因是：当你用 chart.emit('tooltip:show', { data: { data: { x: ... } } }) 固定 tooltip 时，G2 的 tooltip controller 会查找所有 xField 接近或相同的数据点，并一起显示出来。数据量很大且时间戳很细时（比如每秒一个点），会出现两个相邻的 xField 被一起匹配，导致 tooltip 显示重复数据。用 slider 拖动后，数据被过滤或重新渲染，xField 匹配变得精确，tooltip 就只显示一个数据点了。

解决方法是自定义 tooltip 的渲染函数（customContent 或 interaction.tooltip.render），只显示你需要的 xField 数据。例如：

tooltip: {
  customContent: (title, items) => {
    // 只保留 xField 精确等于 title 的数据
    const filtered = items.filter(item => item.data && item.data.x === title);
    return `<div>
      <div>${title}</div>
      <ul>
        ${filtered.map(d => `<li>${d.name}: ${d.value}</li>`).join('')}
      </ul>
    </div>`;
  }
}

或者用 onEvent 拦截 tooltip 事件，手动过滤 payload：

onEvent: (chart, event) => {
  if (event.type === 'tooltip:show') {
    // 这里可以自定义过滤逻辑
    // event.items = event.items.filter(...)
  }
}

目前 API 没有办法直接指定 tooltip 只显示某个节点，只能通过渲染函数过滤。这个方法是官方推荐的解决方案，相关讨论和代码示例可以参考 issue 3052 和 类似问题。

如果你的数据结构复杂（比如 DualAxes），建议保证所有 xField 都完全对应（即使为 null），这样 tooltip 聚合逻辑会更稳定。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[unicode6674]

我是双轴图， 当我 chart.emit("toolitp:show", {data: data:{ x: '2026-01-09 09:24'}})
我拿到的 items 却是两个时间的 ， 堆叠bar 是2026-01-09 09:21， 多折线是 09:24， 上面的 filter 是实现不了的

[dosubot]

这个问题是 DualAxes 图的已知限制，根源在于底层 G2 的 tooltip 聚合逻辑：当你用 chart.emit('tooltip:show', {data: {x: ...}})，G2 会分别在两个子视图（比如堆叠 bar 和多折线）里找“最接近”你指定 x 的数据点，然后把它们都显示出来。数据量大、时间戳很细时，两个视图的最近点可能不是同一个时间，比如你遇到的 09:21 和 09:24，这就是 tooltip items 里出现不同时间的原因。

用 customContent 或 interaction.tooltip.render 过滤 items，只能过滤 title 或 items 里的数据，但如果 items 里本身就有多个时间（不是你想要的那个），就没法精确只显示目标时间的数据。这个限制是因为 tooltip 的事件和数据聚合逻辑都在 G2 层处理，ant-design-charts 只是把聚合后的结果传给 render 函数，无法区分你鼠标实际 hover 的具体节点（比如到底是 bar 还是 line）相关讨论。

目前唯一能缓解的方法是：保证两个数据源的 xField 完全对齐（即所有时间点都一致，即使某个视图没有数据也补 null），这样 tooltip 聚合时才不会混入前后节点的数据。或者用 slider 过滤后让数据子集变得稀疏，G2 就能精确匹配到唯一的 x。

如果你需要更细粒度的 hover 行为或 tooltip 控制，只能关注后续 G2 或 ant-design-charts 的 API 更新，或者考虑用单一类型图表规避聚合问题。相关 issue 可以参考 3052、2830、3127。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}