G2 图表使用心得 | 支持鼠标悬浮进入

原文链接：www.rabbitzzc.top/blog/tab-ja…

G2 图表使用心得 | 支持鼠标悬浮进入

最近使用G2图表比较多，发现G2的中文文档是写的......，这次要做一次从v3版本到v4的升级，光看文档完全不知道怎么办。

特别是在文档中说是支持使用enterable: true，即可实现鼠标可以进入tooltip，但是实际上是没有任何效果的（可以使用官网的例子设置）。

对G2官网文档不断的打磨以后，发现可以利用自定义交互的方法。

code

代码是从github取下来的，一直在给G2提issue，但是很少有人离我，所以没办法，只能自己去查阅源码和仔细打磨文档了，具体的issue地址在github.com/antvis/G2/i…

import { registerInteraction } from '@antv/g2'

// 注册 tooltip 的 interaction
// 点击 tooltip，可以锁定
registerInteraction('locked-tooltip', {
  start: [
    {
      trigger: 'plot:click',
      action: context => {
        const locked = context.view.isTooltipLocked()
        if (locked) {
          context.view.unlockTooltip()
        } else {
          context.view.lockTooltip()
        }
      },
    },
    { trigger: 'plot:mousemove', action: 'tooltip:show' },
  ],
  end: [{ trigger: 'plot:mouseleave', action: 'tooltip:hide' }],
})

console.log('register lock tooltip')

本文使用 mdnice 排版