antvis/G2

Do you want to work on this issue?

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

4.x-自定义Tooltip,图表重绘后自定义的Tooltip不出现 #4745

BoleLee posted onGitHub

问题重现Demo

https://codesandbox.io/s/g2-4-x-vue2-custom-tooltip-xvdpdp

问题描述

Demo1,使用container挂载自定义tooltip的html, 初次tooltip正常渲染,当重绘图后,tooltip无法触发。 重现步骤:查看Demo1图表,鼠标移动使出现自定义的tooltip,鼠标进入tooltip点击“穿透”按钮,即触发重绘图,再次查看,自定义的tooltip不出现。


自定义Tooltip在图表重绘后,就不出现的问题,注意到重绘后,自定义Tooltip的html被移除了,因此猜测可能由于在chart.destroy()时被移除了,导致不出现,因此,挂载自定义tooltip元素前,先判断其是否存在于DOM中,不存在则重新加回,上述Demo中测试成功:

// 若自定义Tooltip的html被移除,则重新放回DOM
      const tooltipClassName = `custom-tooltip-${this.chartId}`;
      console.log(document.getElementsByClassName(tooltipClassName));
      console.log("this.$refs.customTooltip: ", this.$refs.customTooltip);
      console.log("this.tooltipElm: ", this.tooltipElm);
      if (!document.getElementsByClassName(tooltipClassName)[0]) {
        const chartParentElm = document.getElementsByClassName(
          `chart-parent-${this.chartId}`
        )[0];
        chartParentElm.appendChild(this.tooltipElm);
      }
posted by BoleLee about 2 years ago

Fund this Issue

$0.00
Funded
Only logged in users can fund an issue

Pull requests