在项目中有个需求是点击折线图的点,获取当前点的信息,其它图形都可以参考相关的API获取到,但area做的折线图怎么都获取不到点击的信息,只能获取全部的信息,最终解决如下:
实现思路
- 用户的鼠标在折线图上移动时,监听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();