antv g2坐標軸文字過長時添加省略號，懸浮顯示全部

 

antv g2坐標軸文字過長時添加省略號，懸浮顯示全部

示例改編自antv基礎條形圖 https://g2.antv.vision/zh/examples/bar/basic#basic

 

import { Chart } from '@antv/g2';

const data = [
  { country: '巴西', population: 18203 },
  { country: '印尼', population: 23489 },
  { country: '美國', population: 29034 },
  { country: '印度', population: 104970 },
  { country: '中國中國中國中國中國中國中國中國中國中國中國中國', population: 131744 },
];

const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
});

chart.data(data);
chart.scale('population', { nice: true });
// 格式化文字，超過長度添加省略號
chart.axis('country', {
  tickLine: null,
  label: {
    autoRotate: false,
    autoHide: false, // 取消自動隱藏label
    formatter(text) {
      // 字符太長添加省略號
      return text.length > 4 ? `${text.slice(0, 4)}...` : text;
    }
  },
});
chart.coordinate().transpose();
chart.tooltip({
  showMarkers: false
});
chart.interaction('active-region');
chart.interval().position('country*population');

// 捕捉axis-label的mouseenter事件創建DOM
chart.on('axis-label:mouseenter', ev => {
  // 判斷是否創建過div框,如果創建過就不再創建了
  const warp = document.getElementById('antv-text-extension');
  if (!warp) {
    const div = document.createElement("div")
    div.id = 'antv-text-extension';
    document.body.append(div)
  }
  warp.style.cssText = 'position: absolute; color: #fff; background: #393C41; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.10); font-size: 12px; padding: 5px; display: inline; z-index: 100; max-width: 160px;'
  warp.innerHTML = (ev.target.cfg.delegateObject.item.name);

  document.addEventListener('mousemove', ev => {
    const xx = ev.pageX - 30;
    const yy = ev.pageY + 20;
    warp.style.top = yy + 'px';
    warp.style.left = xx + 'px';
  })
    
// 捕捉axis-mouseleave隱藏DOM
  chart.on('axis-label:mouseleave', () => {
    warp.style.display = 'none'
  })
})
chart.render();

 

比較核心的部分是

使用G2的事件捕捉坐標軸文字的懸浮事件，然后動態添加dom顯示全部文字

// 格式化文字，超過長度添加省略號
chart.axis('country', {
  tickLine: null,
  label: {
    autoRotate: false,
    autoHide: false, // 取消自動隱藏label
    formatter(text) {
      // 字符太長添加省略號
      return text.length > 4 ? `${text.slice(0, 4)}...` : text;
    }
  },
});


// 捕捉axis-label的mouseenter事件創建DOM
chart.on('axis-label:mouseenter', ev => {
  // 判斷是否創建過div框,如果創建過就不再創建了
  const warp = document.getElementById('antv-text-extension');
  if (!warp) {
    const div = document.createElement("div")
    div.id = 'antv-text-extension';
    document.body.append(div)
  }
  warp.style.cssText = 'position: absolute; color: #fff; background: #393C41; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.10); font-size: 12px; padding: 5px; display: inline; z-index: 100; max-width: 160px;'
  warp.innerHTML = (ev.target.cfg.delegateObject.item.name);

  document.addEventListener('mousemove', ev => {
    const xx = ev.pageX - 30;
    const yy = ev.pageY + 20;
    warp.style.top = yy + 'px';
    warp.style.left = xx + 'px';
  })
    
// 捕捉axis-mouseleave隱藏DOM
  chart.on('axis-label:mouseleave', () => {
    warp.style.display = 'none'
  })
})

 

來更新一版

。

。

。

很高興在antv官網案例中試出結果，但是，到我自己的項目上，死活走不通，我想出一切可能，連node都升級了，但是就是不行

chart.on('axis-label:mouseenter', ev => {})

方法死活不走

 

絕望來絕望去，最終在大佬指導下，另起最簡單的HTML頁面，排除項目中的其他因素（算是檢查問題的一個方法），然后嘗試改動了antv版本，（我是不情願改的，因為官網上也是4.x的版本，我的項目是4.0.15版本，按理說小版本不應該有問題，就是這種盲目自信，走了很多坑，不過還好終於試了下，降了點版本，果然可，antv兼容性做的有待提高啊，后期估計會調整）

 

降低版本到4.0.14，不要降太多，不然可能會導致其他功能也會有問題（也是給自己一個教訓，不要盲目相信框架插件的，一切的有可能都值得去嘗試！！）

yarn add @antv/g2@4.0.14

 

得到效果圖

 

 

再更一版

。

。

。

又遇到一個新問題，當不移動鼠標，滾動頁面的時候，沒有觸發axis-mouseleave鼠標移除事件，dom元素沒有銷毀，這里需要添加監聽滾動事件來解決

// 捕獲滾動事件隱藏DOM
document.addEventListener('scroll', () => {
  const warp = document.getElementById('antv-text-extension')
  if (!warp) return
  warp.style.display = 'none'
})

 

 

 

參考文章：https://blog.csdn.net/qq_24922757/article/details/109202727

 

最后勵志下自己，未來可期，加油哦！！！💪