当前位置： 首页 > news >正文

HQChart使用教程101-创建内置键盘精灵

news 2025/7/16 3:56:38

HQChart使用教程101-创建内置键盘精灵

  • 键盘精灵
  • 步骤
    • 1. 创建键盘精灵实例
    • 2. 设置事件回调
    • 3. 初始化键盘精灵
    • 4. 设置码表数据
    • 5. 监听"keydown","mousedown"
  • 交流QQ群
  • HQChart代码地址
    • 键盘精灵源码
  • 完整实例

键盘精灵

键盘精灵是一种便捷操作软件的功能工具，通过按键实现快速功能操作。
在这里插入图片描述
目前内置1.0版本只支持切换股票， 后续会增加快捷键，切换指标等功能

测试页面地址：https://jones2000.github.io/HQChart/webhqchart.demo/samples/keyboard_demo.html

步骤

1. 创建键盘精灵实例

 var hqKeyboard=new JSPopKeyboard();

2. 设置事件回调

设置键盘精灵选中事件

hqKeyboard.Keyboard.Option.EventCallback=
[{event:JSCHART_EVENT_ID.ON_KEYBOARD_SELECTED,    //切换股票callback:(event, data, obj)=>{ console.log("[JSCHART_EVENT_ID.ON_KEYBOARD_SELECTED] data", data)hqKeyboard.Hide();if (data && data.Data && data.Data.Symbol){klineControl.Chart.Focus();klineControl.ChangeSymbol(data.Data.Symbol);} }},
]

3. 初始化键盘精灵

hqKeyboard.Inital();
hqKeyboard.Create();

4. 设置码表数据

....
//TODO 请求码表数据
hqKeyboard.SetSymbolData(data)

码表格式

[{ Symbol:完整的股票代码（带后缀的），Name:股票名称，ShortSymbol:股票代码（不后缀的）,Spell:拼音缩写TypeName:类型名称，可以自己取如“股票“，”指数“Color:单行文字颜色（可选）},]

5. 监听"keydown",“mousedown”

“keydown” 用来处理键盘输入
“mousedown” 用来处理点击其他区域隐藏键盘精灵

document.addEventListener('keydown', (event) =>
{var div=document.getElementById('kline'); if (div.contains(event.target)) //在K线上才出来键盘精灵{hqKeyboard.OnGlobalKeydown(event) }
});document.addEventListener("mousedown", (event)=>{  hqKeyboard.OnGlobalMouseDown(event) })

交流QQ群

如果还有问题可以加交流QQ群， 群号在git首页可以找到。

HQChart代码地址

github.com/jones2000/HQChart

键盘精灵源码

  1. umychart.keyboard.js
  2. umychart.PopKeyboard.js

完整实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>键盘精灵</title>  <link rel="stylesheet" href="../jscommon/umychart.resource/css/tools.css" /><link rel="stylesheet" href="../jscommon/umychart.resource/font/iconfont.css" />
</head>  
<body><div id="kline"></div><script src="../jscommon/umychart.resource/js/jquery.min.js"></script><script src="../jscommon/umychart.resource/js/webfont.js"></script><script src='../jscommon/umychart.console.js'></script>     <!-- 日志输出 --><script src="../jscommon/umychart.network.js"></script>     <!-- 网络请求分装 --><script src="../jscommon/umychart.js"></script>             <!-- K线图形 --><script src="../jscommon/umychart.complier.js"></script>    <!-- 麦语言解析执行器 --><script src="../jscommon/umychart.index.data.js"></script>  <!-- 基础指标库 --><script src="../jscommon/umychart.style.js"></script>       <!-- 白色风格和黑色风格配置信息 --><script src="../jscommon/umychart.popMenu.js"></script><script src="../jscommon/umychart.DialogDrawTool.js"></script><script src="../jscommon/umychart.PopMinuteChart.js"></script><script src="../jscommon/umychart.report.js"></script><script src="../jscommon/umychart.keyboard.js"></script><script src="../jscommon/umychart.PopKeyboard.js"></script><script src="../jscommon/umychart.version.js"></script><script src="../jscommon/umychart.NetworkFilterTest.js"></script><script src="../jscommon/umychart.testdata/symbollist_shsz.js"></script><script>//简单的把K线控件封装下function KLineChart(divKLine){this.DivKLine=divKLine;this.Chart=JSChart.Init(divKLine);   //把K线图绑定到一个Div上//K线配置信息this.Option= {Type:'历史K线图',   //创建图形类型Windows: //窗口指标[{Index:"MA"},{Index:"MACD"},{Index:"RSI"},], EnableYDrag:{Right:true,Left:true,},Symbol:"600000.sh",IsAutoUpdate:true,       //是自动更新数据AutoUpdateFrequency:30000,   //数据更新频率EnablePopMenuV2:true,IsShowRightMenu:true,          //右键菜单CorssCursorInfo: { Right:2, DateFormatType:3, HPenType:1, VPenType:1 ,VLineType:0,RightButton:{ Enable:true }, IsShowCorss:true, PriceFormatType:0, DataFormatType:0 },EnableZoomIndexWindow:true,KLine:  //K线设置{DragMode:1,                 //拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择Right:0,                    //复权 0 不复权 1 前复权 2 后复权Period:0,                   //周期 0 日线 1 周线 2 月线 3 年线 MaxRequestDataCount:600,   //数据个数MaxRequestMinuteDayCount:5, //分钟数据获取几天数据  默认取5天数据PageSize:50,               //一屏显示多少数据IsShowTooltip:true,                 //是否显示K线提示信息DrawType:0,      //K线类型 0=实心K线柱子 1=收盘价线 2=美国线 3=空心K线柱子 4=收盘价面积图KLineDoubleClick:false, //禁止双击弹框RightSpaceCount:3,ZoomType:0,//DataWidth:5},EnableIndexChartDrag:true,KLineTitle: //标题设置{IsShowName:true,       //不显示股票名称IsShowSettingInfo:true //不显示周期/复权},Border: //边框{Left:0,         //左边间距Right:90,       //右边间距Bottom:25,      //底部间距Top:25,         //顶部间距//AutoLeft:{ Blank:10, MinWidth:30 },AutoRight:{ Blank:5, MinWidth:60 },},Frame:  //子框架设置[]};this.Create=function()  //创建图形{var self=this;$(window).resize(function() { self.OnSize( ); });    //绑定窗口大小变化事件var blackStyle=HQChartStyle.GetStyleConfig(STYLE_TYPE_ID.BLACK_ID); //读取黑色风格配置blackStyle.DisableLogo=true;JSChart.SetStyle(blackStyle);this.DivKLine.style.backgroundColor=blackStyle.BGColor; //设置最外面的div背景JSChart.GetResource().ToolbarButtonStyle=1;this.OnSize();  //让K线全屏this.Option.NetworkFilter=(data, callback)=>{ HQData.NetworkFilter(data, callback); }this.Chart.SetOption(this.Option);  //设置K线配置}this.OnSize=function(option)  //自适应大小调整{var height= $(window).height();var width = $(window).width();//width=50000;this.DivKLine.style.top='0px';this.DivKLine.style.left='0px';this.DivKLine.style.width=width+'px';this.DivKLine.style.height=height+'px';this.Chart.OnSize(option);}this.ChangeSymbol=function(symbol){this.Chart.ChangeSymbol(symbol);}}$(function () {WebFont.load({ custom: { families: ['iconfont'] } });   //预加载下iconfont资源var klineControl=new KLineChart(document.getElementById('kline'));klineControl.Create();var hqKeyboard=new JSPopKeyboard();hqKeyboard.Keyboard.Option.EventCallback=[{event:JSCHART_EVENT_ID.ON_KEYBOARD_SELECTED,    //切换股票callback:(event, data, obj)=>{ console.log("[JSCHART_EVENT_ID.ON_KEYBOARD_SELECTED] data", data)hqKeyboard.Hide();if (!data || !data.RowData) return;var selItem=data.RowData;if (selItem.Data.Type===0){klineControl.Chart.Focus();klineControl.ChangeSymbol(selItem.Data.Symbol);}else if (selItem.Data.Type===1){klineControl.Chart.Focus();klineControl.Chart.ChangeIndex(0,selItem.Data.Index);}else if (selItem.Data.Type===2){alert(`跳转'${selItem.Data.PageName}'页面`);}}},]hqKeyboard.Inital();hqKeyboard.Create();HQData.Keyboard_RequestSymbolList(null, (data)=>{ hqKeyboard.SetSymbolData(data); });   //请求码表数据document.addEventListener('keydown', (event) =>{var div=document.getElementById('kline'); if (div.contains(event.target)) //在K线上才出来键盘精灵{hqKeyboard.OnGlobalKeydown(event) }});document.addEventListener("mousedown", (event)=>{  hqKeyboard.OnGlobalMouseDown(event) })klineControl.Chart.Focus(); //设置焦点在K线上})</script>  
</body>  
</html><style>.kline
{position: relative
}</style>

相关文章：

HQChart使用教程101-创建内置键盘精灵

HQChart使用教程101-创建内置键盘精灵 键盘精灵步骤1. 创建键盘精灵实例2. 设置事件回调3. 初始化键盘精灵4. 设置码表数据5. 监听"keydown","mousedown" 交流QQ群HQChart代码地址键盘精灵源码 完整实例 键盘精灵 键盘精灵是一种便捷操作软件的功能工具&a…...

编程日记 2024/8/20 2:30:29

nginx基础配置

1. https配置 首先在nginx.conf中配置https 2. 重定向 rewrite ^/(.*)$ https://www.sxl1.com/$1 permanent;3. 自动索引 autoindex on;4. 缓存 Nginx expire缓存配置: 缓存可以降低网站带宽&#xff0c;加速用户访问location ~ .*\.(gif|jpg|png)$ {expires 365d;roo…...

编程日记 2024/8/20 2:23:22

怿星科技与您相约——2024 Testing Expo

汽车测试及质量监控博览会(中国)Testing Expo China-Automotive 怿星科技展位路线 届时欢迎莅临2057号展台&#xff01;...

编程日记 2024/8/20 2:22:20

mac本地搭建docker+k8s步骤

概览&#xff1a; * kubectl安装 * minikube安装 * dashboard安装 主机配置&#xff1a; * mac M2 &#xff08;arm架构&#xff09; 服务及版本概览&#xff1a; 服务名称版本 kubectl v1.29.2 Kubernetes v1.30.0 kicbase v0.0.44 dashboard v2.7.0 docker 26.…...

编程日记 2024/8/20 2:21:19

JS DOM、点击事件

JS DOM 加载事件onload js代码执行的时候&#xff0c;需要html&css的支持 onload在页面加载完之后执行 dom&#xff1a;用JS对html标签进行增删改查 元素节点获取 var name document.getElementById("userName"); var inputs document.getElementsByTagNam…...

编程日记 2024/8/20 2:19:17

长短期记忆网络（LSTM）预测模型及其Python和MATLAB实现

## 一、背景 长短期记忆&#xff08;Long Short-Term Memory, LSTM&#xff09;网络是由 Sepp Hochreiter 和 Jrgen Schmidhuber 在 1997 年提出的一种特殊的循环神经网络&#xff08;RNN&#xff09;结构。LSTM 旨在解决传统 RNN 在处理长序列数据时常见的梯度消失和梯度爆炸…...

编程日记 2024/8/20 2:18:16

C语言——操作符详解

目录 1.操作符的分类 2.原码、反码和补码 3.移位操作符 3.1 左移操作符 3.2 右移操作符 4.位操作符 4.1 按位与& 4.2 按位或| 4.3 按位异或^ ​编辑 4.4 按位取反~ 4.5 应用题 4.5.1 题目&#xff1a;不能创建临时变量&#xff0c;实现两个整数的交换 4.5.2 …...

编程日记 2024/8/20 2:17:15

【Linux】内核全量函数添加日志打印摸索

1、操作系统在空载时要把函数调用次数非常多的注释掉&#xff0c;这里打印时不能带进程名称&#xff0c;高执行概率函数不同进程执行到的概率也很高&#xff0c;不然操作业务会增加卡死的概率&#xff1b; 2、卡死一般是调用次数太多导致&#xff0c;会卡住操作系统十多秒&…...

编程日记 2024/8/20 2:16:14

24/8/17算法笔记 CQL算法离线学习

离线学习&#xff1a;不需要更新数据 CQL&#xff08;Conservative Q-Learning&#xff09;算法是一种用于离线强化学习的方法&#xff0c;它通过学习一个保守的Q函数来解决标准离线RL方法可能由于数据集和学习到的策略之间的分布偏移而导致的过高估计问题 。CQL算法的核心思想…...

编程日记 2024/8/20 2:15:12

C++第十一弹 -- STL之List的剖析与使用

文章索引 前言1. list的介绍2 list的使用2.1 list的构造函数2.2 iterator的使用2.3 list capacity2.4 list element access2.5 list modifiers 3. list的迭代器失效4. list与vector的对比总结 前言 本篇我们旨在探讨对于STL中list的使用, 下一篇我们将会对list进行底层剖析以及…...

编程日记 2024/8/20 2:10:06

物流快递外卖管理平台系统-计算机毕设Java|springboot实战项目

&#x1f34a;作者&#xff1a;计算机毕设匠心工作室 &#x1f34a;简介&#xff1a;毕业后就一直专业从事计算机软件程序开发&#xff0c;至今也有8年工作经验。擅长Java、Python、微信小程序、安卓、大数据、PHP、.NET|C#、Golang等。 擅长&#xff1a;按照需求定制化开发项目…...

编程日记 2024/8/20 2:09:05

开源BaaS 平台介绍

以下是几款常见的开源后端平台&#xff0c;它们提供了用户管理、权限验证、文件存储、API 管理等类似的后端功能。 1. Parse Server 简介: Parse 是一个非常流行的开源后端服务平台&#xff0c;它最初由 Facebook 开发&#xff0c;后来开源。它支持用户管理、数据存储、文件存…...

编程日记 2024/8/20 2:08:04

分享一个基于python爬虫的“今日头条”新闻数据分析可视化系统（源码、调试、LW、开题、PPT）

&#x1f495;&#x1f495;作者&#xff1a;计算机源码社 &#x1f495;&#x1f495;个人简介&#xff1a;本人 八年开发经验&#xff0c;擅长Java、Python、PHP、.NET、Node.js、Android、微信小程序、爬虫、大数据、机器学习等&#xff0c;大家有这一块的问题可以一起交流&…...

编程日记 2024/8/20 2:07:03

QT自定义信号槽

1.自定义信号槽 使用connect()可以让我们连接系统提供的信号和槽&#xff0c;同时也可以自定义信号槽。 例如以学生和老师构建类同时当老师触发信号下课同学收到信号执行“吃饭”这一动作代码示例 #include "SignalAndSlot.h" //Teacher Student 总框架…...

编程日记 2024/8/20 2:06:02

one-shot 序列图像红外小目标分割

one-shot 序列图像红外小目标分割 IEEE TRANSACTIONS ON GEOSCIENCE AND REMOTE SENSING 代码还未开源 GitHub - D-IceIce/one-shot-IRSTS few-shot&#xff1a;利用少量标注样本进行学习 one-shot: 属于few-shot的特殊情况&#xff0c;只用一个样本进行学习 zero-shot&am…...

编程日记 2024/8/20 2:05:01

JavaScript 单线程防阻塞的原理

JavaScript 是一种单线程语言,这意味着它一次只能执行一个任务。这种设计可能会导致一些问题,比如当遇到耗时的操作时,整个程序可能会被阻塞。为了解决这个问题,JavaScript 使用了事件循环和回调函数的机制,实现了非阻塞式的异步操作。 事件循环 JavaScript 有一个事件队列,用…...

编程日记 2024/8/20 2:04:00

Shell脚本发送邮件的详细步骤与配置方法？

Shell脚本发送邮件的进阶技巧&#xff1f;怎么配置Shell脚本发信&#xff1f; 使用Shell脚本发送邮件是一种高效的自动化手段&#xff0c;特别是在需要定期发送报告、通知或警告信息时。AokSend将详细介绍Shell脚本发送邮件的步骤与配置方法&#xff0c;帮助您更好地掌握这一技…...

编程日记 2024/8/20 2:02:58

如何把Phalcon 集成到PhpStorm里面

一 背景 按照上一篇文章里面写的Phalcon 创建项目过程中的一些坑， 最终我们在终端可以基于Phalcon命令创建对应的开发项目。但在这个过程中，存在一个问题：那就是写代码的时候，发现Phalcon对应的依赖提示都没有，如下： 从上面这个截图来看，就能发现，Phalcon的啥…...

编程日记 2024/8/20 2:00:55

python从入门到精通：循环语句

目录 前言 1、while循环的基础语法 2、while循环的嵌套 3、for循环的基础语法 range语句&#xff1a; for循环临时变量作用域&#xff1a; 4、for循环的嵌套 5、循环中断&#xff1a;break和continue 前言 循环普遍存在于日常生活中&#xff0c;同样&#xff0c;在程序中…...

编程日记 2024/8/20 1:58:53

Codeforces Round 965 (Div. 2)

前言 有人在过七夕&#xff0c;我在打 cf &#xff0c;还有某人独自一人在学校机房&#xff0c;凌晨一点骑上共享单车回宿舍欣赏沿途的秋风扫落叶。 Standings&#xff1a;2166 题目链接&#xff1a;Dashboard - Codeforces Round 965 (Div. 2) - Codeforces A. Find K Distin…...

编程日记 2024/8/20 1:54:49

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

编程新知 2025/7/15 4:08:23

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2025/7/15 8:02:22

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

编程新知 2025/7/15 13:16:15

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

编程新知 2025/7/15 4:45:57

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

编程新知 2025/7/14 0:25:39

Zustand 状态管理库：极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

编程新知 2025/7/14 18:50:35

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2025/7/14 18:25:26

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/7/5 23:14:36

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2025/7/15 21:09:05

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

编程新知 2025/7/16 0:34:29