使用flchart库，版本0.35，在点击柱状图时，当柱状图的高度为0，默认选中热区很小，很难点击选中对应区域，如图一 9和10的柱状图高度为0。

查了源码，貌似没有单独针对底部title设置点击事件的回调。

实际上点击底部title,barTouchData 内的touchCallback是有回调的，如图二。但返回的参数是一堆坐标，因为任务紧急，工期短，暂时不建议去重新计算底部title的位置。

发现在点击有高度的柱状图时既然在点击事件内返回了坐标，以及点击对应的BarTouchedSpot，BarTouchedSpot这个对象内部有touchedBarGroupIndex，这个变量表示当前点击了第几个柱状图。一路查看源码，看在哪个地方对这个变量进行赋值的。如图三。判断当前点击区域属于哪条柱状图，底层逻辑是拿当前点击的位置坐标x,y，依次去判断是否属于最近的柱状图。在X坐标，点击区域需要大于柱状图的左侧X坐标，小于右侧X坐标。在Y坐标，需要判断点击区域的Y坐标大于柱状图底部Y坐标，小于柱状图上部Y坐标。我们的目标是希望点击底部title，能被识别为点击了对应的柱状图，看源码，有个变量touchExtraThreshold，在计算是否在柱状图内时，默认加了个变量的上下左右值，应该是对柱状图点击热区的一个预留值。

因此，在flchart库 0.35版本，想要实现点击底部title也有对应柱状图index的返回,可以直接添加touchExtraThreshold

flchart库判断当前点击的底部title的index的更多相关文章

  1. JQuery------如何判断当前点击的是否是哪个类

    $(document).ready(function () { $("html").click(function (e) { if (e.target == $(".ad ...

  2. unity3D基础学习 通过判断鼠标点击的是否是目标物体，物体旋转，滑动滚轮缩放拉近视角

    贴代码: 摄像机的拉近视角代码: public Transform target;     public float minFov = 15f;     public float maxFov = 7 ...

  3. 怎么给当前点击的a标签添加一个样式（跳转页面后）

    怎么给当前点击的a标签添加一个样式(跳转页面后): 方法1. 用cookie记录这个打开的序列号,然后页面在跳转的时候在读出来.方法2. 循环a的链接,然后与location.href去比对,如果相同 ...

  4. vue 判断页面是否滚动到底部

    需求 要求用户阅读完本页所有内容后,下一步按钮才可以点击. 实现思路 通过判断当前页面是否到达底部来设置按钮的点击事件. 要判断当前页面是否到达底部需要用到三个距离--距离顶部的距离scrollTop ...

  5. 【笔记】js获取当前点击元素的索引

    以前用jq 做过图片切换 滑动之类的特效现在想用js 试试是怎么一回事 jq图片切换的思路是用index()函数获取当前点击的按钮的索引然后根据索引值将对应索引的图片显示出来 于是查了一下js 是如何 ...

  6. jq获取当前点击的li是ul中的第几个？

    <script> var navulsize = $('.navul li').size();            var navulwidth = $('.navul li').wid ...

  7. Google判断广告点击作弊的几种方式和数据

     Google判断广告点击作弊的几种方式和数据. 作弊广告点击的CTR数据太高网上有研究说如果CTR值大于了10%的站被干掉的可能性很高,他们会被单独拿出来分析.一般来说低于6-7%的CTR是安全红线 ...

  8. jquery中获取当前点击对象

    jquery中获取当前点击对象的简单方法就是,在点击事件click中传入event对象 click(function(event)); 调用当前对象就是$(event.target);

  9. ie8下jquery读取当前点击的标签位置错误，原因是里面有内容写了text-indent:-9999px

    今天写一地图的效果,鼠标点击对应的区域,弹出所点击区域的名字. 因为设计的区域名字有特殊效果,所以,在点击区域里面套了个标签写上区域名字用来识别,但是这个文字呢不同显示在页面上,所以就给 em 加个了 ...

  10. 通过this获取当前点击选项相关数据

    很多时候jquery只能或者应该回去一个集合.然后通过this获取触发时间的对象及相关属性 this.jq('#needsType').on("click", ".sel ...

随机推荐

  1. 系统内存管理：虚拟内存、内存分段与分页、页表缓存TLB以及Linux内存管理

    虚拟内存 虚拟内存是一种操作系统提供的机制,用于将每个进程分配的独立的虚拟地址空间映射到实际的物理内存地址空间上.通过使用虚拟内存,操作系统可以有效地解决多个应用程序直接操作物理内存可能引发的冲突问题 ...

  2. 在 Spring 6 中使用虚拟线程

    一.简介 在这个简短的教程中,我们将了解如何在 Spring Boot 应用程序中利用虚拟线程的强大功能. 虚拟线程是Java 19 的预览功能,这意味着它们将在未来 12 个月内包含在官方 JDK ...

  3. Gopher进阶神器：拥抱刻意练习，从新手到大师。

    发现一个非常友好的工具,帮助我们回顾练习过程,设定目标,并提供丰富多样的Gopher主题练习题. 刻意练习:从新手到大师. Carol 心理学家 Carol Dweck 做过一个实验,她找了一些十岁的 ...

  4. 小知识：OCI实例的私钥文件权限

    在OCI上创建新的实例时,会提示你保存私钥用于连接,而且该界面不会再次显示,所以一定要保存好这个私钥. 实例创建完成后,当使用保存的私钥进行连接时,却发现由于私钥文件的权限问题无法连接,查看当前私钥文 ...

  5. k8s证书到期处理

    证书续期提示 当执行kubectl get nodes等提示 Unable to connect to the server: x509: certificate has expired or is ...

  6. 探析ElasticSearch Kibana在测试工作中的实践应用

    一. 为什么使用ES Kibana 离线数据测试中最重要的就是数据验证,一部分需要测试es存储数据的正确性,另一部分就需要验证接口从es取值逻辑的正确性.而为了验证es取值逻辑的正确性,就需要用到Ki ...

  7. Solution -「洛谷 P1852」跳跳棋

    Description Link. 在一个数轴上给你三个点,移动方法是彼此为中点进行跳跃,不能同时越过两颗棋子. 给出初始状态和目标状态,问能否从初始状态跳到目标状态.若能,输出最少步数. 棋子之间互 ...

  8. Solution -「洛谷 P5659」「CSP-S 2019」树上的数

    Description Link. 联赛原题应该都读过吧-- Solution Part 0 大致思路 主要的思路就是逐个打破,研究特殊的数据得到普通的结论. Part 1 暴力的部分分 暴力的部分分 ...

  9. C51单片机开发

    C51单片机开发笔记 定时器 C51中的定时器和计数器是同一个硬件电路支持的,通过寄存器配置不同,就可以将他当做定时器 或者计数器使用. 确切的说,定时器和计数器区别是致使他们背后的计数存储器加1的信 ...

  10. 实现脚本自动部署docker

    前言: 使用场景是 我这边的一个单体项目需要多一个多副本的部署方式,一直输入重复命令我实在是嫌烦了,使用写了一个脚本来一键更新部署上去.jar包都是我手动上传的,没有把包传入公网库里. 之所以记录就是 ...