React 前端导航

本文在记录时使用的 @antdv/g2plot 版本是 2.4.31,后续更新大版本的话可能本文的方法就不再适用了,但是及时更新一般API也不会有大变动,仅供参考。

实现思路

首先我们看看文档中的折线图的图标示例是如何实现的默认激活tooltip,关键代码如下:

...
// 初始化,默认激活
 const lastData = _.last(data);//找到数据源的最后一个数据或者其它你默认想展示tooltip的数据,_是lodash库的引用
 const point = line.chart.getXY(lastData);//获取数据在图表中坐标轴的坐标
 line.chart.showTooltip(point);//展示tooltip
 ...

思路很简单,就如上述代码注释中写到的一样,获取数据坐标指定展示tooltip。

在双轴图中的实现思路也是一样的,但是在双轴图中 line.chart.getXY 这个方法获取不到数据的坐标,返回值始终是 undefined。那要怎么样获取到坐标呢?看看下面的代码:

const lastData = _.last(data);
const point = line.chart.views[0]?.getXY?.(lastData);
line.chart.showToolTip(point);
 
从上面的代码可以看到getXY方法的所属对象变成了views[0],经过测试这个方法是可以获取到数据坐标的,但是要问这个方法是怎么来的,参考 g2详细手册可以看到View.getXY 同样可以获取数据坐标,而line.views保存的就是View的实例。
 
注:G2Plot 是在 G2 基础上,屏蔽复杂概念的前提下,保留 G2 强大图形能力,通过 Adaptor 将 G2 能力转换成 config 的形势透出,封装出业务上常用的统计图表库,帮助开发者以最小成本绘制高质量统计图表,所以G2的能力,G2Plot也是同样使用的。

声明:本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。邮箱:farmerlzj@163.com。 本站原创内容未经允许不得转载,或转载时需注明出处: 内容转载自: React前端网:https://qianduan.shop//detail/198
想做或者在做副业的朋友欢迎加微信交流:farmerlzj,公众号:生财空间站。