背景:
项目依赖bizcharts ^4.0.7实现图表绘制,现有一chart图表需要使用自定义tooltip,但是出现了在图表未加载出来之前,鼠标覆盖上去会有默认的tooltip,且图表加载完成后,鼠标再覆盖上去,虽然能正确控制自定义tooltip的显示和隐藏,但是默认toolip会一直保留在页面上的问题
原因分析:
- 首先,我们通过查看元素,发现默认tooltip是·、
G2的Tooltip( .g2-tooltip )
,另外一个自定义tooltip是BizCharts的Tooltip( .bizcharts.bizcharts-tooltip )
其中,G2是以数据驱动,具有高度的易用性和扩展性的可视化图形语法。而BizCharts是基于antv的G2进行了一层封装,并且实现按需加载,使得图表可以以组件的形式进行调用,方便我们在 React 环境下使用 G2。 - 有bizCharts-tooltip情况下,只有在图表未加载完成前鼠标覆盖图表才会出现g2-tooltip,并且在图表加载完成后,解除了g2-tooltip对鼠标覆盖移除事件的监听(即控制g2的tooltip的显隐)。
解决思路:
- 首先查找bizcharts库 issues,发现issue #1302: 自定义tooltip 偶尔会出现两个tooltip,与此问题相同,但是并没有查找到解决方案
- 官方提供了
props tooltip
来控制tooltip组件的显隐,我们可以将props tooltip初始设置为false,隐藏g2-tooltip组件,等到图表加载完成后,才将tooltip props设置true,显示.bizcharts-tooltip,这里我们使用官方提供的onGetG2Instance props
来进行图表加载完成后的操作
(注:当前问题已在bizcharts ^4.0.15中解决)tooltip={isShowTooltip} onGetG2Instance={(c: any) => { setShowTooltip(true); }}
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!