Demand analysis

There's a demand recently , It is required to point at any position on the line chart , You can get what the user currently sees tooltip Information in . After getting the date that the user currently sees , Then send a request to get some other data at this time point to show . If there are students who play fund or stock investment, I believe they are not unfamiliar with this scene .
The essence of this requirement is to add click events to the line chart , I just searched the Internet , Most people summarize the scheme that only clicking on the circular break point of the broken line can trigger , Such operation may be too harsh for users . therefore , I'll summarize the scheme that clicking anywhere on the line chart can trigger a click event .

Expected effect

stay Antv G2 I found a basic line chart on the official website of , The effect is as follows ： Move the mouse to any position on the canvas ,tooltip Can display relevant information . When you click the mouse , You can get the current tooltip Information displayed .

Realize the idea

1. When the user's mouse moves on the line chart , monitor tooltip The change of , Record through a variable tooltip The current value of the .
   Corresponding event name ：tooltip:change
2. utilize G2 Provided Combined events , The drawing area of the line chart is monitored click When . here , Get tooltip Do whatever you need to do with the current value of .
   Corresponding event name ：plot:click

Code demonstration

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 --  If it's in vue Use in , Define the variable in data Then you can 

chart.data(data);
chart.scale({
    
  year: {
    
    range: [0, 1],
  },
  value: {
    
    min: 0,
    nice: true,
  },
});

chart.tooltip({
    
  showCrosshairs: true, //  Exhibition  Tooltip  guide 
  shared: true,
});

chart.line().position('year*value').label('value');
chart.point().position('year*value');

// new Add --  monitor  tooltip:change  event 
chart.on('tooltip:change', ev => {
    
  //  You can print it on the console ev, Look at the structure inside , Find the information you need 
  hoverData = ev.data.items[0].data;
})

// new Add --  Monitor the drawing area plot Click events for 
chart.on('plot:click', ev => {
    
  //  When the user clicks on the canvas , At this time, the user sees tooltip The data on has already existed hoverData in . Get hoverData, It is equivalent to that you get the data of relevant points on the broken line , After that, any demand can be realized ！
  console.log(JSON.stringify(hoverData));
})

chart.render();