G2 圖表使用心得 | 支持鼠標懸浮進入

時間 2020-07-21

標籤 g2 圖表使用心得支持鼠標懸浮進入简体版

原文原文鏈接

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

G2 圖表使用心得 | 支持鼠標懸浮進入

最近使用G2圖表比較多，發現G2的中文文檔是寫的......，此次要作一次從v3版本到v4的升級，光看文檔徹底不知道怎麼辦。java

特別是在文檔中說是支持使用enterable: true，便可實現鼠標能夠進入tooltip，可是其實是沒有任何效果的（能夠使用官網的例子設置）。git

對G2官網文檔不斷的打磨之後，發現能夠利用自定義交互的方法。github

code

代碼是從github取下來的，一直在給G2提issue，可是不多有人離我，因此沒辦法，只能本身去查閱源碼和仔細打磨文檔了，具體的issue地址在github.com/antvis/G2/i…web

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 排版編輯器

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。