在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.rhkb.cn/news/84234.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于低代码和数字孪生技术的电力运维平台设计

电力能源服务商在为用能企业提供线上服务的时候,不可避免要面对用能企业的各种个性化需求。如果这些需求和想法都要靠平台厂家研发人员来实现,那在周期、成本、效果上都将是无法满足服务运营需要的,这也是目前很多线上能源云平台应用效果不理…

单例模式-java实现

介绍 单例模式的意图:保证某个类在系统中有且仅有一个实例。 我们可以看到下面的类图:一般的单例的实现,是属性中保持着一个自己的私有静态实例引用,还有一个私有的构造方法,然后再开放一个静态的获取实例的方法给外界…

快速修复应用程序中的问题的利器—— Android热修复

热修复技术在Android开发中扮演着重要的角色,它可以帮助开发者在不需要重新发布应用程序的情况下修复已经上线的应用程序中的bug或者添加新的功能。 一、热修复是什么? 热修复(HotFix)是一种在运行时修复应用程序中的问题的技术…

树结构转换

思路: 先把数组转化成一个对象(map),对象的key值是对象的id 遍历对象;map[map[k].pid].children.push(map[k]),【k代表索引】,pid等于0代表是根节点 // 数结构转换let arr [{id: 1,pid: 0,name: "b…

【OpenVINOSharp】 基于C#和OpenVINO2023.0部署Yolov8全系列模型

基于C#和OpenVINO2023.0部署Yolov8全系列模型 1 项目简介1.1 OpenVINOTM 2 OpenVinoSharp2.1 OpenVINOTM 2023.0安装配置2.2 C 动态链接库2.3 C#构建Core推理类2.4 NuGet安装OpenVinoSharp 3 获取和转换Yolov8模型3.1 安装ultralytics3.2 导出yolov8模型3.3 安装OpenVINOTM Pyt…

python——案例15:判断奇数还是偶数

案例15:判断奇数还是偶数numint(input(输入数值:))if(num%2)0: #通过if语句判断print("{0}是偶数".format(num))else: #通过else语句判断print("{0}是奇数".format(num))

flask-migrate使用

1.介绍 # 表,字段发生变化,都会有记录,自动同步到数据库中--》django支持这种操作 # 原生的sqlalchemy,不支持修改表的 # flask-migrate可以实现类似于django的 python manage.py makemigrations #记录 python manage.py migrate …

Docker之jenkins部署harbor在harbor中完成部署

Docker之jenkins部署harbor在harbor中完成部署 1、harbor作用 Harbor允许用户用命令行工具对容器镜像及其他Artifact进行推送和拉取,并提供了图形管理界面帮助用户查阅和删除这些Artifact。在Harbor 2.0版本中,除容器镜像外,Harbor对符合OCI…

爬虫程序中使用爬虫ip的优势

作为一名爬虫技术员,我发现在爬虫程序中使用代理IP可以提升爬取效率和匿名性。今天,我就来详细讲解一下代理IP在爬虫程序中的工作原理及应用。 首先,我们来了解一下代理IP在爬虫程序中的工作原理。当我们使用爬虫程序进行数据采集时&#xf…

计算机的构造和原理

本资料转载于B站up主芯片超人-花 仅用于学习和讨论,如有侵权请联系 计算机工作原理之3D动画揭秘:计算机内部如何工作_哔哩哔哩_bilibili 1.CPU的部分 1.1 CPU放大看 1.2 一个芯片中,有80亿至100亿晶体管 1.3 放大磁道 1.4 共享3级缓存 1.5 …

二、MySql库的操作

文章目录 一、库的操作(一)创建数据库(二)创建数据库案例(三)字符集和校验规则1、 查看系统默认字符集以及校验规则2、查看数据库支持的字符集3、查看数据库支持的字符集校验规则4、校验规则对数据库的影响…

python中的装饰器的真正含义和用法

闭包: 闭包是python中的一个很实用的写法,可以使得用户在函数中调用该函数外的函数的变量,使得该变量常驻于内存中。 闭包函数: 输入是函数,输出也是一个函数。 装饰器的写法是python闭包的语法糖。 面试中经常面…

常用抓包工具

Fiddler Fiddler 是一个很好用的抓包工具,可以用于抓取http/https的数据包,常用于Windows系统的抓包,它有个优势就是免费 Charles Charles是由JAVA开发的,可以运行在window Linux MacOS,但它是收费的,和…

你值得拥有——流星雨下的告白(Python实现)

目录 1 前言 2 霍金说移民外太空 3 浪漫的流星雨展示 4 Python代码 1 前言 我们先给个小故事,提一下大家兴趣;然后我给出论据,得出结论。最后再浪漫的流星雨表白代码奉上,还有我自创的一首诗。开始啦: 2 霍金说…

用Python编写的小游戏:探索游戏世界的乐趣

探索开始 引言:第一部分:猜数字游戏代码案例1: 第二部分:石头剪刀布游戏代码案例2: 第三部分:迷宫游戏代码案例3: 总结: 引言: Python是一种简单易学的编程语言&#xf…

成集云 | 报销单同步到金蝶云星空 | 解决方案

方案介绍 金蝶云星空是金蝶集团针对企业数字化转型需求推出的一款云端产品。它是一套集成了多个业务模块的全面企业管理解决方案,旨在帮助企业实现全面管控和高效运营。 旗下涵盖了多个功能模块,包括财务、人力资源、供应链、生产制造、销售与市场、客…

个推消息推送专项运营提升方案,基于AIGC实现推送文案智能生成

个推消息推送专项运营提升方案自今年3月份发布以来,已应用于游戏社交、影音资讯、电商购物等多个行业。现个推消息推送专项运营提升方案又实现了推送策略的智能化和推送流程的自动化,助力APP进一步提升消息推送的效率和效果。 丰富推送策略组合&#xf…

【C# 基础精讲】List 集合的使用

在C#中&#xff0c;List<T>是一种非常常用的泛型集合类&#xff0c;用于存储一组相同类型的元素。List<T>具有动态调整大小的能力&#xff0c;可以方便地添加、删除、查找和修改元素&#xff0c;非常灵活和高效。本文将详细介绍List<T>集合的使用方法&#x…

idea - 刷新 Git 分支数据 / 命令刷新 Git 分支数据

一、idea - 刷新 Git 分支数据 idea 找到 fetch 选项&#xff0c;重新获取分支数据 二、命令刷新 Git 分支数据 git fetch参考链接 1. 远程Gitlab新建的分支在IDEA里不显示

软考圈地震!2023年下半年软考改为机考,报名时间推迟到9月4日

【1】通知原文 关于2023年下半年计算机软件资格考试有关工作调整的通知 各省、自治区、直辖市及计划单列市、新疆生产建设兵团&#xff0c;香港、澳门计算机软件资格考试考务管理机构: 为全面做好计算机软件资格考试安全防控工作&#xff0c;确保考试公正、公平。现将有关工…