HQChart使用教程3- 如何把指標上鎖顯示在K線圖頁面

時間 2021-01-13 標籤 K線圖指標 canvas h5 javascript

如何把指標上鎖顯示在K線圖頁面

我們需要對上一章寫的BS指標進行上鎖
效果圖

指標上鎖字段

Windows 字段下Lock 是指標上鎖字段

Lock:
    {
          IsLocked: true,             //是否上鎖
          Callback: this.UnlockIndex, //點擊上鎖區域回調函數
          BG: 'rgb(245,245,220)',     //鎖區域背景色
          TextColor: 'rgb(255,165,79)',   //鎖區域輸出文字顏色
          Text: '\ue611',                  //鎖區域輸出文字內容
          Font: '40px js-iconfont',           //鎖區域輸出文字字體 支持iconfont
          Count: 12,                      //上鎖主右邊幾條數據 
      }

點擊鎖區域回調函數入參說明

Data：指標信息字段 {ID：指標ID , Name:指標名字， }
HQChart: 圖形控件實例
指標解鎖/上鎖函數 HQChart.LockIndex（ { IndexName：指標名字, IsLocked：是否上鎖} )

this.UnlockIndex=function(e) //解鎖指標回調事件
 {
       console.log('[KLineChart::UnlockIndex] ',e);
       var lockData = { IndexName: e.Data.IndexName, IsLocked: false };    //解鎖指標
       e.HQChart.LockIndex(lockData);
 }

demo頁面代碼

<!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>頁面行情(K線圖)</title>  
    <!-- 加載資源 -->
    <link rel="stylesheet" href="content/css/tools.css" />
    <link rel="stylesheet" href="../jscommon/umychart.resource/font/iconfont.css" />
    <!-- 上鎖的iconfont圖片資源 -->
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1196214_ny3l0dbclr.css" />
    
</head>  
<body>
    <div id="kline" style="width: 900px;height:400px;position: relative;"></div>

    <script src="content/js/jquery.min.js"></script>
    <script src="content/js/webfont.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>

        //簡單的把K線控件封裝下
        function KLineChart(divKLine)
        {
            this.DivKLine=divKLine;
            this.Chart=JSChart.Init(divKLine);   //把K線圖綁定到一個Div上

            this.UnlockIndex=function(e) //解鎖指標事件
            {
                console.log('[KLineChart::UnlockIndex] ',e);
                var lockData = { IndexName: e.Data.IndexName, IsLocked: false };    //解鎖指標
                e.HQChart.LockIndex(lockData);
            }

            //K線配置信息
            this.Option= {
                Type:'歷史K線圖',   //創建圖形類型
                
                Windows: //窗口指標
                [
                    {
                        Script: 'B1:=WEEK==N;\n\ S1:=WEEK==N2;\n\ MA10:MA(C,10);\n\ DRAWICON(B1,L*0.97,13);\n\ DRAWICON(S1,H*1.03,14);',
                        Args:[ { Name:'N', Value:1} ,  { Name:'N2', Value:5} ],
                        Name: "我的指標", Modify:false,Change:false,
                        Lock:
                        {
                            IsLocked: true,             //是否上鎖
                            Callback: this.UnlockIndex, //點擊上鎖區域回調函數
                            BG: 'rgb(245,245,220)',     //鎖區域背景色
                            TextColor: 'rgb(255,165,79)',   //鎖區域輸出文字顏色
                            Text: '\ue611',                  //鎖區域輸出文字內容
                            Font: '40px js-iconfont',           //鎖區域輸出文字字體 支持iconfont
                            Count: 12,                      //上鎖主右邊幾條數據 
                        } 
                    },
                    {Index:"VOL", Modify:false,Change:false},
                    {Index:"RSI", Modify:false,Change:false}, 
                ], 
                
                Symbol:'600000.sh',
                IsAutoUpdate:true,       //是自動更新數據
                //TradeIndex: {Index:'交易系統-BIAS'}, //交易系統
    
                IsShowRightMenu:true,          //右鍵菜單
                IsShowCorssCursorInfo:true,    //是否顯示十字光標的刻度信息
    
                KLine:  //K線設置
                {
                    DragMode:1,                 //拖拽模式 0 禁止拖拽 1 數據拖拽 2 區間選擇
                    Right:1,                    //復權 0 不復權 1 前復權 2 後復權
                    Period:0,                   //週期 0 日線 1 周線 2 月線 3 年線 
                    MaxReqeustDataCount:1000,   //數據個數
                    PageSize:50,               //一屏顯示多少數據
                    //Info:["互動易","大宗交易",'龍虎榜',"調研","業績預告","公告"], //信息地雷
                    IsShowTooltip:true,                 //是否顯示K線提示信息
                },
    
                KLineTitle: //標題設置
                {
                    IsShowName:true,       //不顯示股票名稱
                    IsShowSettingInfo:true //不顯示週期/復權
                },
    
                Border: //邊框
                {
                    Left:1,         //左邊間距
                    Right:50,       //右邊間距
                    Bottom:25,      //底部間距
                    Top:25          //頂部間距
                },
                
                Frame:  //子框架設置
                [
                    {SplitCount:3,StringFormat:0, IsShowLeftText:false},
                    {SplitCount:2,StringFormat:0, IsShowLeftText:false},
                    {SplitCount:2,StringFormat:0, IsShowLeftText:false}
                ]
            };
                 
            this.Create=function()  //創建圖形
            {
                var self=this;
                $(window).resize(function() { self.OnSize(); });    //綁定窗口大小變化事件

                this.OnSize();  //讓K線全屏
                this.Chart.SetOption(this.Option);  //設置K線配置
            }

            this.OnSize=function()  //自適應大小調整
            {
                var height= $(window).height();
                var width = $(window).width();
                this.DivKLine.style.top='px';
                this.DivKLine.style.left='px';
                this.DivKLine.style.width=width+'px';
                this.DivKLine.style.height=height+'px';
                this.Chart.OnSize();
            }
        }

        $(function () 
        {
            WebFont.load({ custom: { families: ['iconfont', 'js-iconfont'] } });   //預加載下iconfont資源
            var klineControl=new KLineChart(document.getElementById('kline'));
            klineControl.Create();
        })

    </script>  
</body>  
</html>

這樣一個上鎖的指標就完成了

如果還又問題可以加交流QQ羣: 950092318

HQChart代碼地址

地址：https://github.com/jones2000/HQChart