图表中，鼠标悬浮位置与实际不符

Question

1、问题描述
antd的柱状图，鼠标悬浮位置和tooltip对应的内容和位置对不上。
例如悬浮到第五根，显示的却是第三根的内容。

2、试图解决的步骤
① 我将官网的代码全替换过来，也是这样，应该不是组件的问题
https://charts.ant.design/examples/column/basic/#basic

② 借鉴这位博主提到的，是因为界面缩放导致的，鼠标悬浮位置与实际不符，修改zoom和transform属性
是可以了，但是大小不对，而且我界面上文中提到的缩放比例document.body.style.zoom=”“
https://blog.csdn.net/bingmoujs/article/details/129714741?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22129714741%22%2C%22source%22%3A%22unlogin%22%7D

Answer 1

【以下回答由 GPT 生成】

我明白你在使用antd中的柱状图组件时遇到的问题。根据你提供的信息，你已经尝试了一些解决步骤，但问题仍然存在。

我理解你在第2步中尝试了修改zoom和transform属性来解决问题，但是这个方法导致了图表的大小不正确。基于这个情况，我可以提供一个更稳定的解决方案。

根据你提供的信息，这个问题可能是因为界面缩放导致的。那么你可以尝试使用react-resize-detector库，该库可以帮助你监听组件的大小变化。

下面是解决该问题的具体步骤：

1. 安装react-resize-detector库： npm install react-resize-detector

2. 在你的柱状图组件文件中导入react-resize-detector库： jsx import ReactResizeDetector from 'react-resize-detector';

3. 在柱状图组件的render方法中使用ReactResizeDetector组件，来监听容器的大小变化： jsx render() { return ( <div> <ReactResizeDetector handleWidth handleHeight onResize={this.handleResize} /> <BarChart data={yourData} /> </div> ); }

4. 在组件中添加handleResize方法，在该方法中重新渲染柱状图组件： jsx handleResize = () => { this.forceUpdate(); // 强制组件重新渲染 }

通过使用react-resize-detector库，监听容器的大小变化，当大小变化时，强制重新渲染柱状图组件，这样就能够解决鼠标悬浮位置与实际位置不符的问题，而且不会导致图表大小不正确。

希望这个解决方案能够帮助你解决这个问题。如果你有任何疑问，请随时向我提问。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^