需求分析
最近接到一个需求,要求在折线图上点任意位置,就可以获取到用户当前看到的tooltip里的信息。拿到用户当前所看到的日期之后,再发送请求获取该时间点一些其他的数据展示出来。如果有玩基金或者股票投资的同学相信对这种场景并不陌生。
这个需求的本质就是给折线图添加点击事件,只是我在网络上搜索了一下,大部分人总结的方案都是只有点击折线的圆形折点才能触发,这样的操作对于用户来说可能是过于苛刻了。所以,我下面总结了一下点击折线图任意位置都可触发点击事件的方案。
预期效果
在Antv G2的官网上找了一个基础折线图,实现的效果如下:鼠标移动到画布任意位置,tooltip都能显示出相关信息。点击鼠标时,可以拿到当前tooltip显示的信息。
实现思路
- 用户的鼠标在折线图上移动时,监听tooltip的变化,通过一个变量记录tooltip的当前值。
对应的事件名称:tooltip:change - 利用G2提供的组合事件,监听折线图的绘图区被 click 的时候。此时,拿到tooltip的当前值做任意你需要的操作即可。
对应的事件名称:plot:click
代码演示
import { Chart } from '@antv/g2';
const data = [
{ year: '1991', value: 3 },
{ year: '1992', value: 4 },
{ year: '1993', value: 3.5 },
{ year: '1994', value: 5 },
{ year: '1995', value: 4.9 },
{ year: '1996', value: 6 },
{ year: '1997', value: 7 },
{ year: '1998', value: 9 },
{ year: '1999', value: 13 },
];
const chart = new Chart({
container: 'container',
autoFit: true,
height: 500,
});
let hoverData = {}; // new Add -- 如果是在vue中使用,把该变量定义在data中即可
chart.data(data);
chart.scale({
year: {
range: [0, 1],
},
value: {
min: 0,
nice: true,
},
});
chart.tooltip({
showCrosshairs: true, // 展示 Tooltip 辅助线
shared: true,
});
chart.line().position('year*value').label('value');
chart.point().position('year*value');
// new Add -- 监听 tooltip:change 事件
chart.on('tooltip:change', ev => {
// 自己可以在控制台打印一下ev,看下里面的结构,找到自己所需要的信息
hoverData = ev.data.items[0].data;
})
// new Add -- 监听绘图区plot的点击事件
chart.on('plot:click', ev => {
// 当用户在画布上点击时,这个时候用户看到tooltip上的数据其实已经被存在了hoverData里。拿到hoverData,相当于你拿到了折线上相关点的数据,之后再有什么需求都可以实现啦!
console.log(JSON.stringify(hoverData));
})
chart.render();