网盘爬虫源码是做网站来用的,义乌多语言网站建设,网站图标 代码,标签云wordpressHQChart使用教程101-创建内置键盘精灵 键盘精灵步骤1. 创建键盘精灵实例2. 设置事件回调3. 初始化键盘精灵4. 设置码表数据5. 监听keydown,mousedown 交流QQ群HQChart代码地址键盘精灵源码 完整实例 键盘精灵
键盘精灵是一种便捷操作软件的功能工具keydown,mousedown 交流QQ群HQChart代码地址键盘精灵源码 完整实例 键盘精灵
键盘精灵是一种便捷操作软件的功能工具通过按键实现快速功能操作。 目前内置1.0版本只支持切换股票 后续会增加快捷键切换指标等功能
测试页面地址https://jones2000.github.io/HQChart/webhqchart.demo/samples/keyboard_demo.html
步骤
1. 创建键盘精灵实例 var hqKeyboardnew 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 divdocument.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.jsumychart.PopKeyboard.js
完整实例
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlnshttp://www.w3.org/1999/xhtml
head
meta http-equivContent-Type contenttext/html; charsetutf-8 /
meta nameviewport contentwidthdevice-width, initial-scale1.0, minimum-scale1.0, maximum-scale1.0, user-scalableno /title键盘精灵/title link relstylesheet href../jscommon/umychart.resource/css/tools.css /link relstylesheet href../jscommon/umychart.resource/font/iconfont.css /
/head
bodydiv idkline/divscript src../jscommon/umychart.resource/js/jquery.min.js/scriptscript src../jscommon/umychart.resource/js/webfont.js/scriptscript 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/scriptscript src../jscommon/umychart.DialogDrawTool.js/scriptscript src../jscommon/umychart.PopMinuteChart.js/scriptscript src../jscommon/umychart.report.js/scriptscript src../jscommon/umychart.keyboard.js/scriptscript src../jscommon/umychart.PopKeyboard.js/scriptscript src../jscommon/umychart.version.js/scriptscript src../jscommon/umychart.NetworkFilterTest.js/scriptscript src../jscommon/umychart.testdata/symbollist_shsz.js/scriptscript//简单的把K线控件封装下function KLineChart(divKLine){this.DivKLinedivKLine;this.ChartJSChart.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.Createfunction() //创建图形{var selfthis;$(window).resize(function() { self.OnSize( ); }); //绑定窗口大小变化事件var blackStyleHQChartStyle.GetStyleConfig(STYLE_TYPE_ID.BLACK_ID); //读取黑色风格配置blackStyle.DisableLogotrue;JSChart.SetStyle(blackStyle);this.DivKLine.style.backgroundColorblackStyle.BGColor; //设置最外面的div背景JSChart.GetResource().ToolbarButtonStyle1;this.OnSize(); //让K线全屏this.Option.NetworkFilter(data, callback){ HQData.NetworkFilter(data, callback); }this.Chart.SetOption(this.Option); //设置K线配置}this.OnSizefunction(option) //自适应大小调整{var height $(window).height();var width $(window).width();//width50000;this.DivKLine.style.top0px;this.DivKLine.style.left0px;this.DivKLine.style.widthwidthpx;this.DivKLine.style.heightheightpx;this.Chart.OnSize(option);}this.ChangeSymbolfunction(symbol){this.Chart.ChangeSymbol(symbol);}}$(function () {WebFont.load({ custom: { families: [iconfont] } }); //预加载下iconfont资源var klineControlnew KLineChart(document.getElementById(kline));klineControl.Create();var hqKeyboardnew 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 selItemdata.RowData;if (selItem.Data.Type0){klineControl.Chart.Focus();klineControl.ChangeSymbol(selItem.Data.Symbol);}else if (selItem.Data.Type1){klineControl.Chart.Focus();klineControl.Chart.ChangeIndex(0,selItem.Data.Index);}else if (selItem.Data.Type2){alert(跳转${selItem.Data.PageName}页面);}}},]hqKeyboard.Inital();hqKeyboard.Create();HQData.Keyboard_RequestSymbolList(null, (data){ hqKeyboard.SetSymbolData(data); }); //请求码表数据document.addEventListener(keydown, (event) {var divdocument.getElementById(kline); if (div.contains(event.target)) //在K线上才出来键盘精灵{hqKeyboard.OnGlobalKeydown(event) }});document.addEventListener(mousedown, (event){ hqKeyboard.OnGlobalMouseDown(event) })klineControl.Chart.Focus(); //设置焦点在K线上})/script
/body
/htmlstyle.kline
{position: relative
}/style
