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

Antv/G2 柱状图添加自定义点击事件

news 文章来源：https://blog.csdn.net/HH18700418030/article/details/134425041 2025/4/21 16:53:13 
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>柱状图点击事件</title></head><body><div id="container" /><script src="https://gw.alipayobjects.com/os/lib/antv/g2/4.2.8/dist/g2.min.js"></script><script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.11.1/dist/data-set.js"></script><script><!-- 浏览器引入，请使用全局命名空间 G2，如 new Chart() 改为 new G2.Chart，即可运行。 -->const data = [{ month: 'Jan', city: 'Tokyo', temperature: 7 },{ month: 'Jan', city: 'London', temperature: 3.9 },{ month: 'Feb', city: 'Tokyo', temperature: 6.9 },{ month: 'Feb', city: 'London', temperature: 4.2 },{ month: 'Mar', city: 'Tokyo', temperature: 9.5 },{ month: 'Mar', city: 'London', temperature: 5.7 },{ month: 'Apr', city: 'Tokyo', temperature: 14.5 },{ month: 'Apr', city: 'London', temperature: 8.5 },{ month: 'May', city: 'Tokyo', temperature: 18.4 },{ month: 'May', city: 'London', temperature: 11.9 },{ month: 'Jun', city: 'Tokyo', temperature: 21.5 },{ month: 'Jun', city: 'London', temperature: 15.2 },{ month: 'Jul', city: 'Tokyo', temperature: 25.2 },{ month: 'Jul', city: 'London', temperature: 17 },{ month: 'Aug', city: 'Tokyo', temperature: 26.5 },{ month: 'Aug', city: 'London', temperature: 16.6 },{ month: 'Sep', city: 'Tokyo', temperature: 23.3 },{ month: 'Sep', city: 'London', temperature: 14.2 },{ month: 'Oct', city: 'Tokyo', temperature: 18.3 },{ month: 'Oct', city: 'London', temperature: 10.3 },{ month: 'Nov', city: 'Tokyo', temperature: 13.9 },{ month: 'Nov', city: 'London', temperature: 6.6 },{ month: 'Dec', city: 'Tokyo', temperature: 9.6 },{ month: 'Dec', city: 'London', temperature: 4.8 },];const chart = new G2.Chart({container: 'container',autoFit: true,height: 500,});chart.data(data);chart.tooltip({showCrosshairs: true,shared: true,});chart.axis('temperature', {label: {formatter: (val) => {return val + ' °C';},},});chart.interval().position('month*temperature').color('city').adjust([{type: 'dodge',marginRatio: 0,},])chart.interaction('active-region')chart.render();// 监听click事件chart.on('element:click',(ev)=>{const data=ev.data.data; console.log('ev data',data)        })</script></body>
</html>

页面效果：
在这里插入图片描述

相关文章：

Antv/G2 柱状图添加自定义点击事件

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>柱状图点击事件</title></head><body><div id"container" /><script src"https://gw.alipayobjects.com/os/lib/antv/g2/4.2.8/…...

编程日记 2023/11/17 4:08:12

Python---数据序列中的公共方法

公共方法就是 支持大部分 数据 序列。 常见公共方法---简单 运算符描述支持的容器类型合并字符串、列表、元组* 复制字符串、列表、元组in元素是否存在字符串、列表、元组、字典not in元素是否不存在字符串、列表、元组、字典 案例&#xff1a; 合并 代码&#xff1…...

编程日记 2023/11/17 4:06:09

从0开始python学习-33.夹具@pytest.fixture(scope=““,params=““,autouse=““,ids=““,name=““)

目录 1. 创建夹具 1.1 pytest方式 1.2 unittest方式 2. 使用夹具 2.1 通过参数引用 2.2 通过函数引用 3. 参数详解 3.1 scope&#xff1a;作用域 3.2 params-参数化 3.3 autouseTrue表示自动使用&#xff0c;默认为False 3.4 ids&#xff1a;设置变量名 3.5 name&am…...

编程日记 2023/11/17 4:04:06

vue3别名配置（vite）

1、配置别名的优点&#xff1a; 在VUE项目中import导入文件时&#xff0c;可以写相对路径. 2、在vite.config.js中配置 a. 首先引入path import path from "path"/* */ b.在resolve添加别名&#xff0c;例如&#xff1a; alias:{"~":path.resolve(__di…...

编程日记 2023/11/17 4:03:05

初学UE5 C++①

目录 游戏类 三种时间函数类型函数和提示类型 FName、FString、FText类型相互转化 数组容器 键值容器 集合容器 基本类型打印 UPROPERTY宏 函数 枚举 法1 法2 结构体 其他 蓝图生成时暴露 游戏类 1.创建所需项的类 2.创建游戏模式类&#xff0c;在该类上实现所需…...

编程日记 2023/11/17 4:02:03

ElasticSearch6.8.1 常见错误

1.vm.max_map_count max virtual memory areas vm.max_map_count [65530] is too low, increase to at least [262144] 1.1 修改 /etc/sysctl.conf 只添加最后vm值即可&#xff0c;sysctl -p /etc/sysctl.conf net.ipv4.conf.all.accept_redirects0 net.ipv4.tcp_tw_reuse1 n…...

编程日记 2023/11/17 3:58:59

wx.canvasToTempFilePath生成图片保存到相册

微信小程序保存当前画布指定区域的内容导出生成指定大小的图片&#xff0c;记录一下 api&#xff1a;wx.canvasToTempFilePath 效果&#xff1a; 代码&#xff1a;wxml <canvas style"width: {{screenWidth}}px; height: {{canvasHeight}}px;" canvas-id"my…...

编程日记 2023/11/17 3:57:57

HDU1276：士兵队列训练问题 ← STL queue

【题目来源】http://acm.hdu.edu.cn/showproblem.php?pid1276【题目描述】 某部队进行新兵队列训练&#xff0c;将新兵从一开始按顺序依次编号&#xff0c;并排成一行横队&#xff0c;训练的规则如下&#xff1a;从头开始一至二报数&#xff0c;凡报到二的出列&#xff0c;剩下…...

编程日记 2023/11/17 3:56:56

JS 读取excel文件内容 和 将json数据导出excel文件

一、实现将json数据导出为excel文件 1、通过原生js实现 核心方法&#xff1a; function JSONToExcelConvertor(JSONData, FileName, title, filter) {if (!JSONData)return;//转化json为objectvar arrData typeof JSONData ! object ? JSON.parse(JSONData) : JSONData;va…...

编程日记 2023/11/17 3:55:55

ASP.NET限流器的简单实现

一、滑动时间窗口 我为RateLimiter定义了如下这个简单的IRateLimiter接口&#xff0c;唯一的无参方法TryAcquire利用返回的布尔值确定当前是否超出设定的速率限制。我只提供的两种基于时间窗口的实现&#xff0c;如下所示的基于“滑动时间窗口”的实现类型SliddingWindowRateL…...

编程日记 2023/11/17 3:54:53

汇编语言循环左移和循环右移如何实现的，详细的比喻一下

汇编语言中的循环左移&#xff08;ROL&#xff09;和循环右移&#xff08;ROR&#xff09;是两种基本的位操作&#xff0c;通常用于低级编程任务&#xff0c;如加密、解密、数据处理等。我将使用一个详细的比喻来解释这两种操作&#xff0c;以使其更易于理解。 循环左移&#…...

编程日记 2023/11/17 3:53:52

ChromeDriver 各版本下载地址

chromedriver 115及115之后版本下载地址&#xff1a;https://googlechromelabs.github.io/chrome-for-testing/ chromedriver 115之前版本下载地址&#xff1a;http://chromedriver.storage.googleapis.com/index.html...

编程日记 2023/11/17 3:52:51

计算机网络之物理层

物理层 1. 物理层的基本概念 2.物理层下面的传输媒体 传输媒体可分为两类&#xff0c;一类是导引型传输媒体&#xff0c;另一类是非导引型传输媒体。 3.传输方式 3.1 串行传输和并行传输 串行传输&#xff1a;串行传输是指数据是一个比特依次发送的&#xff0c;因此在发送端…...

编程日记 2023/11/17 3:51:50

沉浸式航天vr科普馆VR太空主题馆展示

科普教育从小做起&#xff0c;现在我们的很多地方小孩子游乐体验不单单只有草坪玩耍体验&#xff0c;还有很多科普知识的体验馆和游玩馆。虽然现在我们还不能真实的上太空或者潜入海底&#xff0c;但是这些现在已经可以逼真的展示在我们面前。通过一种虚拟现实技术手段。人们带…...

编程日记 2023/11/17 3:50:48

AI电话机器人能否代替人工？优缺点介绍

AI电话机器人是一种基于人工智能技术的自动语音系统&#xff0c;它可以模拟人类的语音交互&#xff0c;执行客服、销售、调查等任务。随着人工智能的发展&#xff0c;AI电话机器人的功能越来越强大&#xff0c;它们在某些领域已经能够替代人工执行任务。那么&#xff0c;AI电话…...

编程日记 2023/11/17 3:49:46

Java —— 多态

目录 1. 多态的概念 2. 多态实现条件 3. 重写 重写与重载的区别 4. 向上转型和向下转型 4.1 向上转型 4.2 向下转型 5. 多态的优缺点 6. 避免在构造方法中调用重写的方法 我们从字面上看"多态"两个字, 多态就是有多种状态/形态. 比如一个人可以有多种状态, …...

编程日记 2023/11/17 3:47:44

UI自动化测试(弹出框，多窗口)

一、弹出框实战 1、在UI自动化测试中经常会遇到Alert弹出框的场景。Alert类是对话框的处理&#xff0c;主要是对alert警告框。confirm确认框&#xff0c;promp消息对话框。 text():获取alert的文本 dismiss ():点击取消 accept():接受 send-keys():输入 from selenium import …...

编程日记 2023/11/17 3:45:41

Python爬虫程序网络请求及内容解析

目录 引言 一、网络请求 1. 导入必要的库 2. 发送请求 3. 处理响应 二、内容解析 1. HTML解析 2. 查找特定元素 3. 查找多个元素 4. 使用选择器选择元素 三、应用示例&#xff1a;爬取网站文章并解析标题和内容 1. 发送请求并解析HTML内容 2. 查找文章元素并提取标…...

编程日记 2023/11/17 3:44:39

C嘎嘎模板

> 作者简介&#xff1a;დ旧言~&#xff0c;目前大二&#xff0c;现在学习Java&#xff0c;c&#xff0c;c&#xff0c;Python等 > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;了解什么是模板&#xff0c;并且能熟练运用函数模…...

编程日记 2023/11/17 3:43:36

数据结构和算法八股与手撕

数据结构和算法八股文 第一章 数据结构 1.1 常见结构 见http://t.csdnimg.cn/gmc3U 1.2 二叉树重点 1.2.1 各种树的定义 满二叉树&#xff1a;只有度为0的结点和度为2的结点&#xff0c;并且度为0的结点在同一层上 完全二叉树&#xff1a;除了最底层节点可能没填满外&…...

编程日记 2023/11/17 3:42:35

windiws docker 部署jar window部署docker 转载

Windows环境下从安装docker到部署前后端分离项目（springboot+vue） 一、前期准备 1.1所需工具： 1.2docker desktop 安装 二、部署springboot后端项目 2.1 部署流程 三、部署vue前端项目 3.1相关条件 3.2部署流程 四、前后端网络请求测试 一、前期准备 1.1所需工具： ①docke…...

编程日记 2023/11/17 3:41:33

使用git上传代码至gitee入门（1）

文章目录 一、gitee注册新建仓库 二、git的下载三、git的简单使用&#xff08;push、pull&#xff09;1、将本地文件推送至gitee初始化配置用户名及邮箱将本地文件提交至gitee补充 2、将远程仓库文件拉取至本地直接拉拉至其他本地文件夹 一、gitee 注册 官网&#xff1a;http…...

编程日记 2023/11/17 3:38:31

分类预测 | MATLAB实现基于Isomap降维算法与改进蜜獾算法IHBA的Adaboost-SVM集成多输入分类预测

分类预测 | MATLAB实现基于Isomap降维算法与改进蜜獾算法IHBA的Adaboost-SVM集成多输入分类预测 目录 分类预测 | MATLAB实现基于Isomap降维算法与改进蜜獾算法IHBA的Adaboost-SVM集成多输入分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 Isomap-Adaboost-IHBA-…...

编程日记 2023/11/17 3:35:27

如何解决3d max渲染效果图全白这类异常问题？

通过3d max渲染效果图时&#xff0c;经常会出现3Dmax渲染效果图全黑或是3Dmax渲染效果图全白这类异常问题。可能遇到这类问题较多的都是新手朋友。不知如何解决。 3dmax渲染出现异常的问题&#xff0c;该如何高效解决呢&#xff1f;今天小编这里整理几项知识点&#xff0c;大家…...

编程日记 2023/11/17 3:34:26

振南技术干货集：比萨斜塔要倒了,倾斜传感器快来！（2）

注解目录 1、倾斜传感器的那些基础干货 1.1 典型应用场景 &#xff08;危楼、边坡、古建筑都是对倾斜敏感的。&#xff09; 1.2 倾斜传感器的原理 1.2.1 滚珠式倾斜开关 1.2.2 加速度式倾斜传感器 1)直接输出倾角 2)加速度计算倾角 3)倾角精度的提高 &#xff08;如果…...

编程日记 2023/11/17 3:33:25

图形学 -- Geometry几何

隐式 implicit 基于给点归类&#xff0c;满足某些关系的点 缺点&#xff1a;不规则表面难以描述&#xff01; algebraic surface 直接用数学公式表示&#xff1a;不直观&#xff01; Constructive Solid Geometry&#xff08;CSG&#xff09; 用简单形状进行加减 distance …...

编程日记 2023/11/17 3:32:24

opencv中边缘检测的方法

在OpenCV中&#xff0c;边缘检测的方法主要有以下几种&#xff1a; Sobel算子&#xff1a; Sobel算子是边检测器&#xff0c;它使用33内核来检测水平边和垂直边。Sobel算子有两个&#xff0c;一个是检测水平边缘的&#xff0c;另一个是检测垂直边缘的。在OpenCV中&#xff0c;…...

编程日记 2023/11/17 3:31:23

DigitalVirt 洛杉矶 CMIN2 VPS 测评

发布于 2023-07-16 在 https://chenhaotian.top/vps/digitalvirt-us-cmin2/ 官网链接&#xff08;含AFF&#xff09;&#xff1a;https://digitalvirt.com/aff.php?aff459 美国西海岸 四网回程 CMIN2 移动新线路。 晚高峰延迟 165ms 左右&#xff0c;不丢包&#xff0c;非常…...

编程日记 2023/11/17 3:30:22

Qt DragDrop拖动与放置

本文章从属于 Qt实验室-CSDN博客系列 拖放操作包括两个动作&#xff1a;拖动(drag)和放下(drop或称为放置)。 拖动允许 对于要拖出的窗口或控件&#xff0c;要setDragEnabled(true) 对于要拖入的窗口或控件&#xff0c;要setAcceptDrops(true) 下面以一个具体的用例进行说…...

编程日记 2023/11/17 3:29:21

thinkphp8 多级控制器调用

在使用这个目录的时候正常访问时 http://tp.com/index.php/user2.login/index, 这个多级目录时不允许使用的&#xff0c;想要使用就的使用路由 在route/app.php 里面配置&#xff1a;Route::get(user2/login,user2.Login/index); 第一个参数时外部访问参数&#xff0c;第二个是…...

编程日记 2023/11/17 3:26:18