HighCharts点击无响应问题

HighCharts 点击无响应问题

背景介绍

项目需要展示一个小时内日志设备的状态,由于数据量比较大,使用echarts效果不好。于是采用highcharts来处理显示。highcharts使用起来很方便,还有打印照片功能,相当满意。这里采用官网给的例子展示一下效果。在这里插入图片描述
但是问题是我需要点击某些点来跳转其他界面来进一步解析。按照其他人给出的方法,只要对series配置click事件就可以实现。

plotOptions:{  spline: {  marker: {  radius: 4,  lineColor: '#666666',  lineWidth: 1  }  },  series: {  cursor: 'pointer',  events: {  click: function(e) {  console.log(e.point.x);  }  }  }  
},  
series: [{  name:'20000',  data: this.zhouliu,  lineWidth: 0.5  
}]  

但是当我点击highcharts中的点时,控制台一直没有坐标打印。但是我在线编辑代码测试时,却能正常响应,到底是哪里出问题了?

问题原因

在尝试各种方法无果后,偶然间我发现了highcharts的一个功能,并解决了我这个问题。当数据量比较大时,可以用鼠标选择一小段,然后松手,highcharts自动忽略其他段,只展示选中的这一段。
这里只选择10k~11k的范围
这是选择了其中的一段,然后在此缩小范围。
进一步缩小范围
此时可以看到左上角有个Reset Zoom,一键点击就可复原最初2w个点的状态。此时点击任意一个点就能正确响应了,这就解释了之前点击没有响应的问题的原因了-鼠标没法准确选中点。我后来在2w点显示情况下也偶然成功过,侧面印证了这个原因。highcharts真是太好用了,还有很多组件都很好用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/119336.shtml

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

相关文章

产研团队必看!3款在线白板工具助你轻松改善工作!

随着科技的不断进步和团队协作的需求日益增加,产研团队在工作中常常面临各种挑战。例如,团队成员之间的沟通不畅、信息共享不便以及项目进度不明确等等。这些问题会导致团队的效率低下,影响整体工作质量。 为了解决这些问题,越来…

ExoPlayer架构详解与源码分析(7)——SampleQueue

系列文章目录 ExoPlayer架构详解与源码分析(1)——前言 ExoPlayer架构详解与源码分析(2)——Player ExoPlayer架构详解与源码分析(3)——Timeline ExoPlayer架构详解与源码分析(4)—…

可自由搭建的能源管理平台,轻松实现高效节能

随着科技的不断发展,能源问题越来越重要。为了提高能源的利用效率,减少能源浪费,能源用能企业纷纷开始注重能源管理工作,并想要一款可以进行高效管理的工具。智慧能源管理平台,是一款可自由搭建的能源管理平台&#xf…

app分发的一些流程2

应用分发的流程通常包括以下步骤: 开发应用程序:首先,您需要开发您的应用程序。这包括编写代码、设计用户界面、测试应用程序等等。确保您的应用程序符合各个应用商店的规范和要求,以确保顺利通过审核。 准备应用材料&#xff1…

Positive Technologies 在迪拜宣布与地区网络安全解决方案提供商开展合作

在中东最大的信息技术展 GITEX GLOBAL 2023 的间隙,Positive Technologies 同意与八家组织(网络安全服务和解决方案提供商)合作,在该地区开展合作,推广最先进的产品,并分享信息安全领域的经验。该公司强调了…

九方面解读国家数据局成立,可交易数据的五大特性探讨

​ 10月25日,国家数据局正式揭牌,标志着我国数据管理进入了新的阶段。国家数据局负责协调推进数据基础制度建设,统筹数据资源整合共享和开发利用,统筹推进数字中国、数字经济、数字社会规划和建设等,由国家发展和改革…

SENet 学习

ILSVRC 是一个比赛,全称是ImageNet Large-Scale Visual Recognition Challenge,平常说的ImageNet比赛指的是这个比赛。 使用的数据集是ImageNet数据集的一个子集,一般说的ImageNet(数据集)实际上指的是ImageNet的这个子…

容器类之QT

容器类之QT 顺序容器 关联容器 STL迭代容器 STL风格的反向迭代容器 QVariant类 QFlags类 QRandomGenerator类

金属纳米颗粒通过水基剥离方案使用嵌段共聚物模板

引言 随着纳米结构表面和界面在广泛的科学和技术应用中变得越来越重要,确定可扩展和廉价的方法来实现这些变成了一个关键的挑战。特别是有序、非密集、表面支撑的金属纳米颗粒的大面积阵列的制造,由于其在不同领域如等离子体增强薄膜太阳能电池中的应用…

Jupyter中使用parse报错[args = pp.parse_args()]

在Jupyter Notebook中使用parse报错了, pp argparse.ArgumentParser(description) pp.add_argument(--dataset, typestr, choices[pascal, coco, nuswide, cub], requiredTrue) pp.add_argument(--num-pos, typeint, default1, requiredFalse, helpnumber of posi…

NULL和const

// In C, NULL is limited to identifying a null pointer. // 在C中,它是一个宏 #define NULL ((void *)0)\0 is defined to be a null character - that is a character with all bits set to zero.const // const表示read-only的变量,和完全意义上的常量还不太一样 The con…

【电路笔记】-波特图(Bode Diagrams)

波特图(Bode Diagrams) 文章目录 波特图(Bode Diagrams)1、概述2、定义3、波特图的呈现4、常见的波特图4.1 一阶滤波器4.2 二阶滤波器 5、总结 1、概述 上世纪30年代末,一位名叫 Hendrick Wade Bode 的美国工程师设计了一个著名的表示法来研究频域中的交流电路。 这…

论文-分布式-并发控制-Lamport逻辑时钟

目录 前言 逻辑时钟讲解 算法类比为面包店内取号 Lamport算法的时间戳原理 Lamport算法的5个原则 举例说明 算法实现 参考文献 前言 在并发系统中,同步与互斥是实现资源共享的关键Lamport面包店算法作为一种经典的解决并发问题的算法,它的实现原…

docker部署rabbitmq的坑

背景 今天用docker部署rabbitmq,启动都一起正常,但是当访问15672端口时,不能加载出页面。 排查 1.防火墙是否开启 ufw status2.ip是否能ping通 ping 192.168.x.x3.检查docker日志 docker psdocker logs -f 容器id4.进入容器&#xff0c…

Vue3项目创建+组合式API使用+组件通信+渲染微博热搜+打包上线

摘要 Vue3的组合式API大大减少了代码量,以及使用也方便了很多,本案例使用Vite创建一个Vue3示例,简单介绍Vue3的组合式API使用以及父传子组件传参示例。 创建Vue3项目 1、首先要安装 Node.js 下载地址:https://nodejs.org/en/do…

Windows安装virtualenv虚拟环境

需要先安装好python环境 1 创建虚拟环境目录 还是在D:\Program\ 的文件夹新建 .env 目录(你也可以不叫这个名字,一般命名为 .env 或者 .virtualenv ,你也可以在其他目录中创建) 2 配置虚拟环境目录的环境变量 3 安装虚拟环境 进…

2310D导入c部分可用

看看简单的示例(该示例不使用.di文件): 这里 克隆它并放文件在方便的地方. 现在,试使用它. 在此例中,map.c和app.d在同一目录中. import std.stdio : writeln; //使用map.c import map; import std.string : toStringz; alias c toStringz; void main() {hashmap* m hashmap…

如何集成验证码短信API到你的应用程序

引言 当你需要为你的应用程序增加安全性和用户验证功能时,集成验证码短信API是一个明智的选择。验证码短信API可以帮助你轻松实现用户验证、密码重置和账户恢复等功能,提高用户体验并增强应用程序的安全性。本文将介绍如何将验证码短信API集成到你的应用…

AutoCAD 2024 Mac中文附激活补丁 兼容M1.M2电脑

AutoCAD 2024是一款功能强大的CAD设计绘图工具,旨在帮助用户创建和编辑高质量的设计图纸和模型。该软件支持2D和3D设计,具有丰富的功能和工具,可用于绘图、建模、注释、标注、尺寸设置等多种操作。AutoCAD 2024还引入了智能对象捕捉、实时预览…

【AGC】.p12证书文件如何获取MD5

近期在使用DevEco Studio3.1打包应用时遇到了一个问题,我使用Build—Generate Key and CSR创建了密钥库文件。 我这里需要获取到创建的.p12证书文件的MD5值,于是在控制台使用了keytool -list -v -keystore D:\myapp.p12命令获取证书指纹,但是…