使用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. 数据可视化【原创】vue+arcgis+threejs 实现流光边界线效果

    本文适合对vue,arcgis4.x,threejs,ES6较熟悉的人群食用. 效果图: 素材: 主要思路: 先用arcgis externalRenderers封装了一个ExternalRender ...

  2. 使用 Laf 一周内上线美术狮 AI 绘画小程序

    "美术狮 AI 绘画"(以下简称"美术狮"),是我们小团队的一次尝试,定位是人人都可以上手的,充满创意的,理解中文和中国文化的图片生成工具. 在完善图像模型和论 ...

  3. 记一次weak_up函数绕过

    2023 蓝帽杯CTF LovePHP 因为比赛已经结束,所以复现环境是从本地进行复现,这次比赛本来排名挺靠前的,原本总排名是60多名,赛区排名30多名,本来是以为有希望进入半决赛的,但是没想到比赛结 ...

  4. api接口对接如何实现商品数据采集的

    在当前互联网行业中,快速准确地采集和处理大量数据是非常重要的一项任务.而实现商品数据采集则是许多企业和电商平台必须完成的任务之一.使用API接口对接进行商品数据采集可以大大提高数据采集效率和准确性.下 ...

  5. Asp-Net-Core开发笔记：FrameworkDependent搭配docker部署

    前言 之前我写过一篇使用 docker 部署 AspNetCore 应用的文章,这种方式搭配 CICD 非常方便, build 之后 push 到私有的 dockerhub ,在生产服务器上 pull ...

  6. 【krpano】KRPano打开黑屏： FATAL ERROR

    在KRPano开发过程中,初学者打开项目经常遇到如下的问题: FATAL ERROR:tour.xml – loading failed! (0) 或者是: ERROR:Local usage wit ...

  7. JavaAgent寄生在目标进程中引起的ClassNotFoundException

    今天有解决方案部的小伙伴反映,我公司XWind产品在分析客户应用程序的潜在性能问题时,总是显现诊断任务异常,为了定位问题的根因,我们马上要求解决方案部的小伙伴提供XWind相关的日志,从日志中找到了如 ...

  8. C++算法之旅、09 力扣篇 | 常见面试笔试题（上）算法小白专用

    刷题的目的是为了更好的理解数据结构与算法,更好的理解一些封装起来的库函数是怎么实现的,而不是简简单单的为了刷题而刷题. 时间.空间复杂度 事后统计法 提前写好算法代码和编好测试数据,在计算机上跑,通过 ...

  9. 01--OpenStack 手动安装手册（Icehouse）

    #OpenStack 手动安装手册(Icehouse) 声明:本博客欢迎转发,但请保留原作者信息!作者:[罗勇] 云计算工程师.敏捷开发实践者博客:http://yongluo2013.github. ...

  10. mapState、mapGetters、mapMutations、mapActions学习

    https://next.vuex.vuejs.org/zh/guide/state.html#mapstate-%E8%BE%85%E5%8A%A9%E5%87%BD%E6%95%B0 https: ...