北京最大的網(wǎng)站建設(shè)有限公司cms網(wǎng)站
HQChart使用教程101-創(chuàng)建內(nèi)置鍵盤精靈
- 鍵盤精靈
- 步驟
- 1. 創(chuàng)建鍵盤精靈實(shí)例
- 2. 設(shè)置事件回調(diào)
- 3. 初始化鍵盤精靈
- 4. 設(shè)置碼表數(shù)據(jù)
- 5. 監(jiān)聽"keydown","mousedown"
- 交流QQ群
- HQChart代碼地址
- 鍵盤精靈源碼
- 完整實(shí)例
鍵盤精靈
鍵盤精靈是一種便捷操作軟件的功能工具，通過按鍵實(shí)現(xiàn)快速功能操作。
目前內(nèi)置1.0版本只支持切換股票， 后續(xù)會增加快捷鍵，切換指標(biāo)等功能
測試頁面地址：https://jones2000.github.io/HQChart/webhqchart.demo/samples/keyboard_demo.html
步驟
1. 創(chuàng)建鍵盤精靈實(shí)例
var hqKeyboard=new JSPopKeyboard();
2. 設(shè)置事件回調(diào)
設(shè)置鍵盤精靈選中事件
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. 設(shè)置碼表數(shù)據(jù)
....
//TODO 請求碼表數(shù)據(jù)
hqKeyboard.SetSymbolData(data)
碼表格式
[{ Symbol:完整的股票代碼（帶后綴的），Name:股票名稱，ShortSymbol:股票代碼（不后綴的）,Spell:拼音縮寫TypeName:類型名稱，可以自己取如“股票“，”指數(shù)“Color:單行文字顏色（可選）},]
5. 監(jiān)聽"keydown",“mousedown”
“keydown” 用來處理鍵盤輸入
“mousedown” 用來處理點(diǎn)擊其他區(qū)域隱藏鍵盤精靈
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
完整實(shí)例
<!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> <!-- 網(wǎng)絡(luò)請求分裝 --><script src="../jscommon/umychart.js"></script> <!-- K線圖形 --><script src="../jscommon/umychart.complier.js"></script> <!-- 麥語言解析執(zhí)行器 --><script src="../jscommon/umychart.index.data.js"></script> <!-- 基礎(chǔ)指標(biāo)庫 --><script src="../jscommon/umychart.style.js"></script> <!-- 白色風(fēng)格和黑色風(fēng)格配置信息 --><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線圖', //創(chuàng)建圖形類型Windows: //窗口指標(biāo)[{Index:"MA"},{Index:"MACD"},{Index:"RSI"},], EnableYDrag:{Right:true,Left:true,},Symbol:"600000.sh",IsAutoUpdate:true, //是自動更新數(shù)據(jù)AutoUpdateFrequency:30000, //數(shù)據(jù)更新頻率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線設(shè)置{DragMode:1, //拖拽模式 0 禁止拖拽 1 數(shù)據(jù)拖拽 2 區(qū)間選擇Right:0, //復(fù)權(quán) 0 不復(fù)權(quán) 1 前復(fù)權(quán) 2 后復(fù)權(quán)Period:0, //周期 0 日線 1 周線 2 月線 3 年線 MaxRequestDataCount:600, //數(shù)據(jù)個數(shù)MaxRequestMinuteDayCount:5, //分鐘數(shù)據(jù)獲取幾天數(shù)據(jù) 默認(rèn)取5天數(shù)據(jù)PageSize:50, //一屏顯示多少數(shù)據(jù)IsShowTooltip:true, //是否顯示K線提示信息DrawType:0, //K線類型 0=實(shí)心K線柱子 1=收盤價線 2=美國線 3=空心K線柱子 4=收盤價面積圖KLineDoubleClick:false, //禁止雙擊彈框RightSpaceCount:3,ZoomType:0,//DataWidth:5},EnableIndexChartDrag:true,KLineTitle: //標(biāo)題設(shè)置{IsShowName:true, //不顯示股票名稱IsShowSettingInfo:true //不顯示周期/復(fù)權(quán)},Border: //邊框{Left:0, //左邊間距Right:90, //右邊間距Bottom:25, //底部間距Top:25, //頂部間距//AutoLeft:{ Blank:10, MinWidth:30 },AutoRight:{ Blank:5, MinWidth:60 },},Frame: //子框架設(shè)置[]};this.Create=function() //創(chuàng)建圖形{var self=this;$(window).resize(function() { self.OnSize( ); }); //綁定窗口大小變化事件var blackStyle=HQChartStyle.GetStyleConfig(STYLE_TYPE_ID.BLACK_ID); //讀取黑色風(fēng)格配置blackStyle.DisableLogo=true;JSChart.SetStyle(blackStyle);this.DivKLine.style.backgroundColor=blackStyle.BGColor; //設(shè)置最外面的div背景JSChart.GetResource().ToolbarButtonStyle=1;this.OnSize(); //讓K線全屏this.Option.NetworkFilter=(data, callback)=>{ HQData.NetworkFilter(data, callback); }this.Chart.SetOption(this.Option); //設(shè)置K線配置}this.OnSize=function(option) //自適應(yīng)大小調(diào)整{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'] } }); //預(yù)加載下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(`跳轉(zhuǎn)'${selItem.Data.PageName}'頁面`);}}},]hqKeyboard.Inital();hqKeyboard.Create();HQData.Keyboard_RequestSymbolList(null, (data)=>{ hqKeyboard.SetSymbolData(data); }); //請求碼表數(shù)據(jù)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(); //設(shè)置焦點(diǎn)在K線上})</script>
</body>
</html><style>.kline
{position: relative
}</style>