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

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

news 2025/8/2 6:20:19

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

键盘精灵源码

umychart.keyboard.js
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>