最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 解决BizCharts偶尔会有两个tooltip问题

    正文概述 掘金(Dynamite0707)   2021-03-07   719

    背景:

    项目依赖bizcharts ^4.0.7实现图表绘制,现有一chart图表需要使用自定义tooltip,但是出现了在图表未加载出来之前,鼠标覆盖上去会有默认的tooltip,且图表加载完成后,鼠标再覆盖上去,虽然能正确控制自定义tooltip的显示和隐藏,但是默认toolip会一直保留在页面上的问题

    原因分析:

    1. 首先,我们通过查看元素,发现默认tooltip是·、G2的Tooltip( .g2-tooltip ),另外一个自定义tooltip是BizCharts的Tooltip( .bizcharts.bizcharts-tooltip )
      其中,G2是以数据驱动,具有高度的易用性和扩展性的可视化图形语法。而BizCharts是基于antv的G2进行了一层封装,并且实现按需加载,使得图表可以以组件的形式进行调用,方便我们在 React 环境下使用 G2。

    2. 有bizCharts-tooltip情况下,只有在图表未加载完成前鼠标覆盖图表才会出现g2-tooltip,并且在图表加载完成后,解除了g2-tooltip对鼠标覆盖移除事件的监听(即控制g2的tooltip的显隐)。

    解决思路:

    1. 首先查找bizcharts库 issues,发现issue #1302: 自定义tooltip 偶尔会出现两个tooltip,与此问题相同,但是并没有查找到解决方案
    2. 官方提供了 props tooltip 来控制tooltip组件的显隐,我们可以将props tooltip初始设置为false,隐藏g2-tooltip组件,等到图表加载完成后,才将tooltip props设置true,显示.bizcharts-tooltip,这里我们使用官方提供的onGetG2Instance props来进行图表加载完成后的操作
      tooltip={isShowTooltip}
      onGetG2Instance={(c: any) => {
           setShowTooltip(true);
      }}
      
      (注:当前问题已在bizcharts ^4.0.15中解决)

    起源地下载网 » 解决BizCharts偶尔会有两个tooltip问题

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元