需求分析

最近接到一个需求，要求在折线图上点任意位置，就可以获取到用户当前看到的tooltip里的信息。拿到用户当前所看到的日期之后，再发送请求获取该时间点一些其他的数据展示出来。如果有玩基金或者股票投资的同学相信对这种场景并不陌生。
这个需求的本质就是给折线图添加点击事件，只是我在网络上搜索了一下，大部分人总结的方案都是只有点击折线的圆形折点才能触发，这样的操作对于用户来说可能是过于苛刻了。所以，我下面总结了一下点击折线图任意位置都可触发点击事件的方案。

预期效果

在Antv G2的官网上找了一个基础折线图，实现的效果如下：鼠标移动到画布任意位置，tooltip都能显示出相关信息。点击鼠标时，可以拿到当前tooltip显示的信息。

实现思路

1. 用户的鼠标在折线图上移动时，监听tooltip的变化，通过一个变量记录tooltip的当前值。
   对应的事件名称：tooltip:change
2. 利用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();