HighCharts点击无响应问题

news2025/1/13 13:32:12

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.coloradmin.cn/o/1137154.html

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

相关文章

jsp初学

指令标识 html java代码 out内置对象,直接拿过来用 注释 <%-- 注释内容 --%>:JSP提供了隐藏注释&#xff0c;隐藏注释不仅在浏览器页面中看不到&#xff0c;在查看HTML源代码时也看不到 动态注释,网页看不到,只能看源码<!-- <%new Date()%> --> 指令 …

springboot配置redis、Spring cache

1.Jedis库 依赖库 <dependency><groupId>redis.clients</groupId><artifactId>jedis</artifactId><version>5.0.2</version> </dependency>使用案例&#xff1a; Testpublic void jedis(){Jedis jedis new Jedis("127…

【ceph】ceph集群的节点机器重启,导致磁盘的lvm消失,如何恢复呢~~满满的都是干货

本站以分享各种运维经验和运维所需要的技能为主 《python零基础入门》&#xff1a;python零基础入门学习 《python运维脚本》&#xff1a; python运维脚本实践 《shell》&#xff1a;shell学习 《terraform》持续更新中&#xff1a;terraform_Aws学习零基础入门到最佳实战 《k8…

用python写一个俄罗斯方块程序

用python写一个俄罗斯方块程序 1.源代码2.游戏运行 1.源代码 import pygame import random# 初始化游戏 pygame.init()# 游戏窗口尺寸 WINDOW_WIDTH 800 WINDOW_HEIGHT 600# 方块大小和颜色 BLOCK_SIZE 30 COLORS [(0, 0, 0), # 黑色(255, 0, 0), # 红色(0, 255, 0), #…

补码为什么要+1

关于补码的文章&#xff0c;csdn上面遍地都是&#xff0c;所以我们大可不必搬运别人的文章来装点门面&#xff0c;我写这篇博客是想补充一个问题“补码为什么要1”的问题&#xff0c;这个问题&#xff0c;博客园有个叫张子秋的文章写的很好&#xff0c;但是最后对补码为什么1的…

【VASP】POTCAR文件

【VASP】POTCAR文件 POTCAR 文件的介绍qvasp 生成POTCARvaspkit 生成POTCAR再来认识一下各种赝势如何区分US、PAW、LDA、GGA、PW91 前言 一、4个常用的输入文件INCAR、POSCAR、POTCAR、KPOINTS INCAR: 计算任务类型是什么&#xff1f;怎么计算&#xff1f; KPOINTS: 包含了倒易…

Decomposed Meta-Learning for Few-Shot Named Entity Recognition

原文链接&#xff1a; https://aclanthology.org/2022.findings-acl.124.pdf ACL 2022 介绍 问题 目前基于span的跨度量学习&#xff08;metric learning&#xff09;的方法存在一些问题&#xff1a; 1&#xff09;由于是通过枚举来生成span&#xff0c;因此在解码的时候需要额…

Zoho Mail荣登福布斯2023年企业邮箱榜单,引领行业新方向!

几十年来&#xff0c;电子邮件一直是电子通信的重要形式&#xff0c;并且在未来的许多年里&#xff0c;它可能会无处不在。尽管有大量免费电子邮件服务可供用户和企业使用&#xff0c;但其中许多服务缺乏专门的功能&#xff0c;例如适合办公室使用的集中管理。 福布斯小型企业顾…

S5PV210裸机(七):Nand和iNand

本文主要探讨210Nand和iNand相关知识。 NandFlash 型号与命 K9F2G08&#xff1a;K9F为发行商,2G为Nand大小是2Gbit(256MB),08为Nand是8位(8数据线即接口为8位:传输数据,地址,命令) 功能 Nand是矩阵式存储,每块可存1bit位 …

3.SpringSecurity基于数据库的认证与授权

文章目录 SpringSecurity基于数据库的认证与授权一、自定义用户信息UserDetails1.1 新建用户信息类UserDetails1.2 UserDetailsService 二、基于数据库的认证2.1 连接数据库2.2 获取用户信息2.2.1 获取用户实体类2.2.2 Mapper2.2.3 Service 2.3 认证2.3.1 实现UserDetails接口2…

探索跨境电商产品开发流程的最佳工具

产品是跨境电商行业的核心竞争力&#xff0c;一个完整的新产品开发过程&#xff0c;大致要经历创意生成 - 创意筛选 - 产品概念开发与测试 - 营销策划 - 业务分析 - 产品实体开发 - 试销 - 商业化这8个阶段。 上述每个阶段都很重要且需要在实操中不断完善&#xff0c;当中涉及…

十九、类型信息(1)

本章概要 为什么需要 RTTI RTTI&#xff08;RunTime Type Information&#xff0c;运行时类型信息&#xff09;能够在程序运行时发现和使用类型信息 RTTI 把我们从只能在编译期进行面向类型操作的禁锢中解脱了出来&#xff0c;并且让我们可以使用某些非常强大的程序。对 RTTI …

Active learning Tiny Review for autonomous driving

Introduction 阅读某一特定主题的一本书不会使你成为专家&#xff0c;阅读多本包含相似内容的书也不会。真正掌握一项技能或领域的知识需要来自多样化信息源的大量信息。 这对于自动驾驶和其他人工智能技术同样适用。 负责自动驾驶功能的深度神经网络需要经过详尽的训练&#…

ES 数据迁移最佳实践

ES 数据迁移最佳实践与讲解 数据迁移是 Elasticsearch 运维管理和业务需求中常见的操作之一。以下是不同数据迁移方法的最佳实践和讲解&#xff1a; 一、数据迁移需求梳理 二、数据迁移方法梳理 三、各方案对比 方案 优点 缺点&#xff08;限制&#xff09; 适用场景 是否有…

Lua脚本语言

1. 概念 Lua&#xff08;发音为"loo-ah"&#xff0c;葡萄牙语中的"lua"意为月亮&#xff09;是一种轻量级的、高效的、可嵌入的脚本编程语言。官网Lua最初由巴西计算机科学家Roberto Ierusalimschy、Waldemar Celes和Luiz Henrique de Figueiredo于1993年开…

看完这篇 教你玩转渗透测试靶机Vulnhub——Hacksudo: Aliens

Vulnhub靶机Bluemoon: 2021渗透测试详解 Vulnhub靶机介绍&#xff1a;Vulnhub靶机下载&#xff1a;Vulnhub靶机安装&#xff1a;Vulnhub靶机漏洞详解&#xff1a;①&#xff1a;信息收集&#xff1a;②&#xff1a;数据库后台传木马&#xff1a;③&#xff1a;反弹shell&#x…

免费活动-11月4日敏捷武林上海站 | Scrum.org CEO 亲临现场

​​​​​​​ 活动介绍 过去的几年里&#xff0c;外界的风云变幻为我们的生活增添了一些不一样的色彩。在VUCA世界的浪潮里&#xff0c;每一个人都成为自己生活里的冒险家。面对每一次的变化&#xff0c;勇于探索未知&#xff0c;迎接挑战&#xff0c;努力追逐更好的自己。…

实现地址转换的硬件机构

一、基本地址变换机构 1.硬件&#xff1a; 设置一个页表寄存器&#xff0c;存放页表在内存中的起始地址与页表长度。 2.执行过程&#xff1a; 进程未执行时&#xff0c;页表起始地址和长度存放在进程控制块(PCB)中;进程被调度时&#xff0c;OS内核会将其放入页表寄存器中。 3.具…

海外广告投放必看,如何使用Quora广告开拓新流量市场?

虽然在Quora 上学习广告相对容易&#xff0c;但需要大量的试验和错误才能找出最有效的方法。一些广告技巧可以让您的工作更有效率。这篇文章将介绍如何有效进行quora广告投放与有价值的 Quora 广告要点&#xff0c;这将为您节省数万美元的广告支出和工作时间&#xff01;往下看…

postgresSQL 数据库本地创建表空间读取本地备份SQL文件

使用pgAdmin4&#xff0c;你安装PG得文件夹****/16/paAdmin 4 /runtime/pgAdmin4.exe 第一步&#xff1a;找到Tablespaces 第二步&#xff1a;创建表空间名称 第三步&#xff1a;指向数据文件 第四步&#xff1a;找到Databases&#xff0c;创建表空间 第五步&#xff1a;输入数…