当前位置: 首页 > news >正文

在vue中Antv G2 折线图如何添加点击事件获取折线上点的值

 

在项目中有个需求是点击折线图的点,获取当前点的信息,其它图形都可以参考相关的API获取到,但area做的折线图怎么都获取不到点击的信息,只能获取全部的信息,最终解决如下:

实现思路

  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();

http://www.lryc.cn/news/117622.html

相关文章:

  • 深度学习中训练、推理和验证分别都是什么意思
  • C语言规范
  • Express中间件
  • 124. 二叉树中的最大路径和
  • 管理类联考——逻辑——论证逻辑——汇总篇——真题和典例——分析
  • 深度ip转换器:一键更换ip地址方法
  • 【TypeScript】类型断言-类型的声明和转换(五)
  • 行业追踪,2023-08-10
  • Nodejs下动态加载文件夹下的文件模块
  • C#实现旋转图片验证码
  • MySQL—缓存
  • IP提取器对比器
  • 【Spring Boot】构建RESTful服务 — RESTful简介
  • 模仿火星科技 基于cesium+水平面积测量+可编辑
  • 26.配电网规划——考虑潮流约束的配电网规划
  • 【云原生】K8S集群
  • python接口自动化之自动发送测试报告邮件
  • umi出现“Cannot find module ‘umi-build-dev/lib/routes‘“ 错误
  • Redis类型检查与命令多态
  • mysql支持的xa具体指的是什么?
  • IntelliJ Idea 编译时控制台上中文输出乱码
  • 锚框【目标检测】
  • 001-Spring boot 启动内置Web容器分析
  • 【Cocos Creator 项目实战 】消灭星星加强版(附带完整源码工程)
  • 2023软件测试岗必问的100个面试题【含答案】
  • MediaExtractor MediaCodec手动解码播放音乐
  • element表格+表单+表单验证结合运用
  • 亚马逊云科技发布Amazon HealthScribe,使用生成式AI技术实现临床文档的自动生成
  • Windows11安装Linux子系统,并实现服务自启动,局域网访问,磁盘挂载
  • 【Git】保姆级详解:Git配置SSH Key(密钥和公钥)到github