本文在记录时使用的 @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也是同样使用的。