?

在項(xiàng)目中有個(gè)需求是點(diǎn)擊折線圖的點(diǎn)，獲取當(dāng)前點(diǎn)的信息，其它圖形都可以參考相關(guān)的API獲取到，但area做的折線圖怎么都獲取不到點(diǎn)擊的信息，只能獲取全部的信息，最終解決如下：

實(shí)現(xiàn)思路

1. 用戶的鼠標(biāo)在折線圖上移動(dòng)時(shí)，監(jiān)聽(tīng)tooltip的變化，通過(guò)一個(gè)變量記錄tooltip的當(dāng)前值。
   對(duì)應(yīng)的事件名稱(chēng)：tooltip:change
2. 利用G2提供的組合事件，監(jiān)聽(tīng)折線圖的繪圖區(qū)被 click 的時(shí)候。此時(shí)，拿到tooltip的當(dāng)前值做任意你需要的操作即可。
   對(duì)應(yīng)的事件名稱(chēng)：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 -- 監(jiān)聽(tīng) tooltip:change 事件
chart.on('tooltip:change', ev => {// 自己可以在控制臺(tái)打印一下ev，看下里面的結(jié)構(gòu)，找到自己所需要的信息hoverData = ev.data.items[0].data;
})// new Add -- 監(jiān)聽(tīng)繪圖區(qū)plot的點(diǎn)擊事件
chart.on('plot:click', ev => {// 當(dāng)用戶在畫(huà)布上點(diǎn)擊時(shí)，這個(gè)時(shí)候用戶看到tooltip上的數(shù)據(jù)其實(shí)已經(jīng)被存在了hoverData里。拿到hoverData，相當(dāng)于你拿到了折線上相關(guān)點(diǎn)的數(shù)據(jù)，之后再有什么需求都可以實(shí)現(xiàn)啦！console.log(JSON.stringify(hoverData));
})chart.render();