使用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. What...MiniGPT-4居然开源了,提前感受 GPT-4 的图像对话能力！

    说在前面的话: 一个月前,OpenAI向外界展示了GPT-4如何通过手绘草图直接生成网站,令当时的观众瞠目结舌. 在GPT-4发布会之后,相信大家对ChatGPT的对话能力已有所了解.圈内的朋友们应该 ...

  2. Qt开发思想探幽]QObject、模板继承和多继承

    @ 目录 [Qt开发探幽]QObject.模板继承和多继承 1. QObject为什么不允许模板继承: 2.如果需要使用QObject进行多继承的话,子对象引用的父类链至多只能含有一个QObject ...

  3. SpringBoot整合ueditor编辑器

    1.到ueditor编辑器官网下载jsp版(目前官网地址改为了GitHub)https://ueditor.baidu.com/website/download.html2.下载解压后复制到当前项目3 ...

  4. 当开源项目 Issue 遇到了 DevChat

    目录 1. 概述 2. Bug 分析与复现 3. Bug 定位与修复 4. 代码测试 5. 文档更新 6. 提交 Commit 7. 总结 1. 概述 没错,又有人给 GoPool 项目提 issue ...

  5. MySQL 表分区简介

    MySQL表分区是一种数据库管理技术,用于将大型表拆分成更小.更可管理的分区(子表).每个分区可以独立进行维护.备份和查询,从而提高数据库性能和管理效率.以下是详细介绍MySQL表分区的步骤和注意事项 ...

  6. Solution -「CSP-S 2020」函数调用

    Description 大家应该都读过题. Solution 赛后变摩托. 我们对每一个操作 \(3\) 连边建图,然后可以知道只是一个 \(\texttt{DAG}\). 考虑操作 \(2\),我们 ...

  7. 【Flutter】如何优美地实现一个悬浮NavigationBar

    [Flutter]如何优美地实现一个悬浮NavigationBar 最近写代码的时候遇到了一个如下的需求: 整体来说,底部的条是一个浮动的悬浮窗,有如下的三个按钮: 点击左边的要进入"主页& ...

  8. 2020/5/8—cf，我裂开来

    呜呜呜我爆零了呜呜呜ljll 嗯T1T2防爆零的没了呜呜呜在此纪念可怜的yjz大佬21发AC 太惨了(逃 先来说说我们都有些啥题目吧... T1 嗯,裂开了,当场裂开我一看!桶排!然后实现,嗯?嗯!嗯 ...

  9. 2023年SWPU NSS 秋季招新赛 (校外赛道)WP—Crypto

    一.Caesar_base 题目信息 s = "HIJKLMNOPQRSTUVWXYZABCDEFGhijklmnopqrstuvwxyzabcdefg0123456789+/" ...

  10. 21.1 Python 使用PEfile分析PE文件

    PeFile模块是Python中一个强大的便携式第三方PE格式分析工具,用于解析和处理Windows可执行文件.该模块提供了一系列的API接口,使得用户可以通过Python脚本来读取和分析PE文件的结 ...