做网站条件,网站建设公司的重要性,nginx环境下安装wordpress,百度关键词下拉有什么软件在项目中有个需求是点击折线图的点#xff0c;获取当前点的信息#xff0c;其它图形都可以参考相关的API获取到#xff0c;但area做的折线图怎么都获取不到点击的信息#xff0c;只能获取全部的信息#xff0c;最终解决如下#xff1a;
实现思路
用户的鼠标在折线图上移… 在项目中有个需求是点击折线图的点获取当前点的信息其它图形都可以参考相关的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();
