hqchart 1.1.13976 → 1.1.13983

package/src/jscommon/umychart.vue/umychart.vue.js

@@ -4855,10 +4855,6 @@ function JSChart(divElement, bOffscreen, bCacheCanvas)
             if (IFrameSplitOperator.IsNumber(item.DelayTime)) chart.DrawDynamicInfoOption.DelayTime=item.DelayTime;
         }
         
-
-        chart.SelectRectDialog=new MinuteSelectRectDialog(this.DivElement);
-        
-
         if (option.Minute)   //分钟走势图属性设置
         {
             if (option.Minute.IsShowTooltip==false) chart.IsShowTooltip=false;
@@ -5699,6 +5695,11 @@ function JSChart(divElement, bOffscreen, bCacheCanvas)
         if (option.TooltipDialog && option.TooltipDialog.Enable)
             chart.InitalTooltipDialog(option.TooltipDialog);
 
+        if (option.SelectRectDialog && option.SelectRectDialog.Enable)
+        {
+            chart.InitalSelectRectDialog(option.SelectRectDialog);
+        }
+
         //注册事件
         if (option.EventCallback)
         {
@@ -7007,6 +7008,7 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
     this.DialogModifyDraw;  //画图修改
 
     this.DialogTooltip;     //tooltip信息 
+    this.DialogSelectRect;  //区间统计
 
 
     this.ClearStockCache=function()
@@ -7049,6 +7051,27 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
         this.DialogModifyDraw.Create();
     }
 
+    this.InitalSelectRectDialog=function(option)
+    {
+        if (this.DialogSelectRect) return;
+
+        this.DialogSelectRect=new JSDialogSelectRect();
+        this.DialogSelectRect.Inital(this, option);
+        this.DialogSelectRect.Create();
+    }
+
+    this.DrawSelectRectDialog=function()
+    {
+        
+    }
+
+    this.IsShowSelectRectDialog=function()
+    {
+        if (!this.DialogSelectRect) return false;
+
+        return this.DialogSelectRect.IsShow();
+    }
+
     this.ShowDrawToolDialog=function(x,y)
     {
         if (!this.DialogDrawTool) return;
@@ -7570,8 +7593,11 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
                 }
             }
         }
-        
-        if (!this.RectSelectDrag && this.ClearRectSelect(false)) this.Draw();
+
+        if (!this.IsShowSelectRectDialog()) //区间统计框存在，不清空区间背景色
+        {
+            if (!this.RectSelectDrag && this.ClearRectSelect(false)) this.Draw();
+        }
 
         if (this.EnableBorderDrag && this.Frame)
         {
@@ -12048,6 +12074,7 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
 
         if (this.PopMinuteChart) this.PopMinuteChart.ReloadResource(option);
         if (this.DialogTooltip) this.DialogTooltip.ReloadResource(option);
+        if (this.DialogSelectRect) this.DialogSelectRect.ReloadResource(option);
     }
 
     this.ReloadBorder=function(option)  //根据页面缩放调整对应边框的尺长
@@ -12798,6 +12825,20 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
             event.Callback(event,data,this);
         }
 
+        if (this.IsShowSelectRectDialog())  //区间统计
+        {
+            var selectData=paint.GetSelectRectData();
+            
+            var data=
+            {
+                Chart:this, X:obj.X, Y:obj.Y,
+                SelectData:selectData,          //区间选择的数据
+                RectSelectPaint:paint           //区间选择背景
+            };
+            var e={ data:data }
+            this.DrawSelectRectDialog(e);
+        }
+
         return true;
     }
 
@@ -13623,10 +13664,8 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
                 if (this.ShowSelectData && srcParam) this.ShowSelectData(srcParam);
                 break;
             case JSCHART_MENU_ID.CMD_SELECTED_SUMMARY_ID:
-                var dlg=new KLineSelectRectDialog(this.DivElement);
-                dlg.DoModal(srcParam);
+                if (this.DialogSelectRect && srcParam) this.DrawSelectRectDialog(srcParam);
                 break;
-
             case JSCHART_MENU_ID.CMD_SHOW_INDEX_ID:        //显示隐藏指标   [0]=windowIndex [1]=0=自动 1=隐藏 2=显示
                 if (param==null || !IFrameSplitOperator.IsNumber(aryArgs[1])) return false;
                 var windowIndex=param, showType=aryArgs[1];
@@ -73147,6 +73186,21 @@ function JSChartResource()
         DateTimeColor:'rgb(60,60,60)',
         TurnoverRateColor:'rgb(43,54,69)',       //换手率
         PositionColor:"rgb(255,0,255)"            //持仓
+    },
+
+    //区间统计
+    this.DialogSelectRect=
+    {
+        BGColor:'rgb(250,250,250)',         //背景色
+        BorderColor:'rgb(20,20,20)',        //边框颜色
+        TitleColor:'rgb(0,0,0)',            //对话框标题颜色
+
+        TextColor:"rgb(0,0,0)",             //数值名称
+        ValueColor:"rgb(0,0,0)",            //数值
+        VolColor:"rgb(255, 185, 15)",       //标题成交量
+        AmountColor:"rgb(79, 79, 79)",      //成交金额
+        TurnoverRateColor:'rgb(43,54,69)',  //换手率
+        PositionColor:"rgb(255,0,255)"      //持仓
     }
 
     //弹幕
@@ -74156,6 +74210,22 @@ function JSChartResource()
 
         }
 
+        if (style.DialogSelectRect)
+        {
+            var item=style.DialogSelectRect;
+            if (item.BGColor) this.DialogSelectRect.BGColor=item.BGColor;
+            if (item.BorderColor) this.DialogSelectRect.BorderColor=item.BorderColor;
+            if (item.TitleColor) this.DialogSelectRect.TitleColor=item.TitleColor;
+
+            if (item.TextColor) this.DialogSelectRect.TextColor=item.TextColor;
+            if (item.ValueColor) this.DialogSelectRect.ValueColor=item.ValueColor;
+            if (item.VolColor) this.DialogSelectRect.VolColor=item.VolColor;
+            if (item.AmountColor) this.DialogSelectRect.AmountColor=item.AmountColor;
+            if (item.TurnoverRateColor) this.DialogSelectRect.TurnoverRateColor=item.TurnoverRateColor;
+            if (item.PositionColor) this.DialogSelectRect.PositionColor=item.PositionColor;
+
+        }
+
         if (style.MinuteInfo)
         {
             var item=style.MinuteInfo;
@@ -75134,13 +75204,28 @@ function JSChartLocalization()
         ['DialogTooltip-Price', {CN:'价格', EN:'Price', TC:'價格'}],
         ['DialogTooltip-AvPrice', {CN:'均价', EN:'AVPrice:', TC:'均價'}],
         ['DialogTooltip-FClose', {CN:"结算价", EN:'Settlement', TC:'結算價'}],
-        ['DialogTooltip-Amplitude', {CN:'振幅', EN:'amplitude', TC:'價格'}],
+        ['DialogTooltip-Amplitude', {CN:'振幅', EN:'amplitude', TC:'振幅'}],
         ['DialogTooltip-AC-Price', {CN:'匹配价', EN:'Price', TC:'匹配價'}],
         ['DialogTooltip-AC-AvPrice', {CN:'匹配均价', EN:'AVPrice', TC:'匹配均價'}],
         ['DialogTooltip-AC-Increase', {CN:'竞价涨幅', EN:'Increase', TC:'競價漲幅'}],
         ['DialogTooltip-AC-Vol', {CN:'匹配量', EN:'Vol', TC:'匹配量'}],
         ['DialogTooltip-Value', {CN:'数值', EN:'Value', TC:'数值'}],
 
+
+        ['DialogSelectRect-StartPrice', {CN:'起始价:', EN:'Start Price:', TC:'起始價'}],
+        ['DialogSelectRect-EndPrice', {CN:'最终价:', EN:"End Price:", TC:'最终價'}],
+        ['DialogSelectRect-High', {CN:'最高价:', EN:'High:', TC:'最高價'}],
+        ['DialogSelectRect-Low', {CN:'最低价:', EN:"Low:", TC:'最低價'}],
+        ['DialogSelectRect-Increase', {CN:'区间涨幅:', EN:'Increase', TC:'漲幅'}],
+        ['DialogSelectRect-Amplitude', {CN:'区间振幅:', EN:'amplitude', TC:'振幅'}],
+        ['DialogSelectRect-Vol', {CN:'成交量:', EN:'Volume', TC:'數量'}],
+        ['DialogSelectRect-Amount', {CN:'成交额:', EN:'Amount', TC:'金額'}],
+        ['DialogSelectRect-Up', {CN:'阳线:', EN:'Up', TC:'阳线'}],
+        ['DialogSelectRect-Down', {CN:'阴线:', EN:'Down', TC:'阴线'}],
+        ['DialogSelectRect-Unchanged', {CN:'平线:', EN:'Unchanged', TC:'平线'}],
+        ['DialogSelectRect-DataCount', {CN:'数据个数:', EN:'Data Count:', TC:'数据个数'}],
+        
+
         //走势图PC tooltip
         ['PCTooltip-Date', {CN:'日期', EN:'Date', TC:"日期"}],
         ['PCTooltip-Time', {CN:'时间', EN:'Time', TC:"時間"}],
@@ -77488,8 +77573,20 @@ function KLineChartContainer(uielement,OffscreenElement, cacheElement)
             event.Callback(event,data,this);
             isShowMenu=data.IsShowMenu;
         }
-       
-        if (isShowMenu)
+
+        if (this.IsShowSelectRectDialog())  //区间统计
+        {
+            var data=
+            {
+                Chart:this,X:x,Y:y,
+                SelectData:selectData,          //区间选择的数据
+                RectSelectPaint:paint           //区间选择背景
+            };
+            e.data=data;
+
+            this.DrawSelectRectDialog(e);
+        }
+        else if (isShowMenu)
         {
             var data=
             {
@@ -83486,6 +83583,42 @@ function KLineChartContainer(uielement,OffscreenElement, cacheElement)
 
         return true;
     }
+
+    this.DrawSelectRectDialog=function(e)
+    {
+        if (!this.DialogSelectRect) return;
+
+        this.UpdateSelectRectDialog(e);
+    }
+
+    this.UpdateSelectRectDialog=function(e)
+    {
+        if (!this.DialogSelectRect) return false;
+
+        var data=e.data;        //区间统计数据
+        var x,y;
+        if (data && IFrameSplitOperator.IsNumber(data.X) && IFrameSplitOperator.IsNumber(data.Y))  
+        {
+            var pixelRatio=GetDevicePixelRatio();
+            var rtClient=this.UIElement.getBoundingClientRect();
+            var rtScroll=GetScrollPosition();
+
+            x=data.X
+            y=data.Y;
+            x+=(rtClient.left+rtScroll.Left);
+            y+=(rtClient.top+rtScroll.Top);
+        }
+
+        var sendData=
+        {
+            Symbol:this.Symbol, Name:this.Name,
+            SelectData:data.SelectData,
+            X:x, Y:y,
+            e:e
+        }
+
+        this.DialogSelectRect.Update(sendData);
+    }
 }
 
 //API 返回数据 转化为array[]
@@ -83913,7 +84046,6 @@ function MinuteChartContainer(uielement,offscreenElement,cacheElement)
 
     this.ColorLineData;    //主图价格线颜色自定义配置
     this.EnableSelectRect=false;    //是否可以区间选择
-    this.SelectRectDialog=null;     //区间选择对话框
 
     this.CorssCursorIndex={ DayIndex:-1, DataIndex:-1, Point:{X:-1, Y:-1} ,Type:-1 };
     this.EnableNewIndex=false  //是否使用新的索引版本
@@ -84316,7 +84448,7 @@ function MinuteChartContainer(uielement,offscreenElement,cacheElement)
                 isShowDialog=false; //外部调用了区间选择事件，不弹框
             }
 
-            if (isShowDialog && this.SelectRectDialog)
+            if (isShowDialog && this.DialogSelectRect)
             {
                 e.data=
                 {
@@ -84327,7 +84459,9 @@ function MinuteChartContainer(uielement,offscreenElement,cacheElement)
                     RectSelectPaint:paint           //区间选择背景
                 };
 
-                this.SelectRectDialog.DoModal(e);
+                this.HideSelectRect();
+                this.UpdateSelectRect(selectData.Start,selectData.End);
+                this.DrawSelectRectDialog(e);
             }
             else
             {
@@ -84371,9 +84505,9 @@ function MinuteChartContainer(uielement,offscreenElement,cacheElement)
             isShowDialog=data.IsShowDialog;
         }
 
-        if (isShowDialog && this.SelectRectDialog)
+        if (isShowDialog)
         {
-            e.data=
+            var data =
             {
                 Chart:this,
                 X:x,
@@ -84381,10 +84515,10 @@ function MinuteChartContainer(uielement,offscreenElement,cacheElement)
                 SelectData:selectData,          //区间选择的数据
                 RectSelectPaint:paint           //区间选择背景
             };
+            e.data=data;
 
-            this.SelectRectDialog.DoModal(e);
+            this.UpdateSelectRectDialog(e);
         }
-            
     }
 
     this.UpdateSelectRect=function(start,end)
@@ -84441,6 +84575,14 @@ function MinuteChartContainer(uielement,offscreenElement,cacheElement)
             event.Callback(event,data,this);
         }
 
+        if (this.IsShowSelectRectDialog()) //区间统计
+        {
+            var selectData=paint.GetSelectRectData();
+            var data={ X:obj.X, Y:obj.Y, SelectData:selectData, RectSelectPaint:paint };
+            var e={ data:data };
+            this.DrawSelectRectDialog(e);
+        }
+
         return true;
     }
 
@@ -85389,7 +85531,7 @@ function MinuteChartContainer(uielement,offscreenElement,cacheElement)
                 event.Callback(event,data,this);
             }
 
-            if (this.SelectRectDialog)
+            if (this.DialogSelectRect)
             {
                 e.data=
                 {
@@ -85399,7 +85541,7 @@ function MinuteChartContainer(uielement,offscreenElement,cacheElement)
                     SelectData:selectData,          //区间选择的数据
                     RectSelectPaint:paint           //区间选择背景
                 };
-                this.SelectRectDialog.DoModal(e);
+                this.DrawSelectRectDialog(e);
             }
         }
         
@@ -89339,6 +89481,42 @@ function MinuteChartContainer(uielement,offscreenElement,cacheElement)
 
         return true;
     }
+
+    this.DrawSelectRectDialog=function(e)
+    {
+        if (!this.DialogSelectRect) return;
+
+        this.UpdateSelectRectDialog(e);
+    }
+
+    this.UpdateSelectRectDialog=function(e)
+    {
+        if (!this.DialogSelectRect) return false;
+
+        var data=e.data;        //区间统计数据
+        var x,y;
+        if (data && IFrameSplitOperator.IsNumber(data.X) && IFrameSplitOperator.IsNumber(data.Y))  
+        {
+            var pixelRatio=GetDevicePixelRatio();
+            var rtClient=this.UIElement.getBoundingClientRect();
+            var rtScroll=GetScrollPosition();
+
+            x=data.X
+            y=data.Y;
+            x+=(rtClient.left+rtScroll.Left);
+            y+=(rtClient.top+rtScroll.Top);
+        }
+
+        var sendData=
+        {
+            Symbol:this.Symbol, Name:this.Name,
+            SelectData:data.SelectData,
+            X:x, Y:y,
+            e:e
+        }
+
+        this.DialogSelectRect.Update(sendData);
+    }
 }
 
 //盘前数据
@@ -94504,441 +94682,6 @@ function ChangeIndexDialog(divElement)
     }
 }
 
-function MinuteSelectRectDialog(divElement)
-{
-    this.newMethod=IDivDialog;   //派生
-    this.newMethod(divElement);
-    delete this.newMethod;
-
-    this.SelectData;
-    this.Dialog;
-    this.HQChart;
-    this.RectSelectPaint;
-
-    //隐藏窗口
-    this.Close=function()
-    {
-        if (this.Dialog) 
-        {
-            this.DivElement.removeChild(this.Dialog);
-            this.Dialog=null;
-            this.ID=null;
-        }
-
-        if (this.RectSelectPaint) this.RectSelectPaint.PreventClose=false;
-    }
-
-    //创建
-    this.Create=function()
-    {
-        this.ID=Guid();
-        var div=document.createElement('div');
-        div.className='jchart-select-statistics-box';
-        div.id=this.ID;
-        div.innerHTML=
-        "<div class='parameter jchart-select-section'>\
-            <div class='parameter-header'>\
-                <span>分时图区间统计</span>\
-                <strong id='close' class='icon iconfont icon-close'></strong>\
-            </div>\
-            <div class='parameter-content'>统计数据</div>\
-        <div class='parameter-footer'>\
-            <button id='close' class='submit' >确定</button>\
-        </div>\
-        </div>";
-
-        this.DivElement.appendChild(div);
-        this.Dialog=div;
-
-        //关闭按钮
-        $("#"+this.ID+" #close").click(
-            {
-                divBox:this,
-            },
-            function(event)
-            {
-                event.data.divBox.Close();
-            });
-    }
-
-    this.BindData=function()
-    {
-        var hqData=this.SelectData.Data;
-        var start=this.SelectData.Start;
-        var end=this.SelectData.End;
-        this.HQChart.UpdateSelectRect(start,end);
-        if (this.RectSelectPaint) this.RectSelectPaint.PreventClose=true;
-
-        var showData=
-        { 
-            Open:0,Close:0,High:0,Low:0,  //起始价格, 结束价格, 最高, 最低
-            Vol:0, Amount:0, 
-            Date:
-            { 
-                Start:{Time:null, Date:null },
-                End:{ Time:null, Date:null }
-            }, 
-            Count:0,
-        }
-
-        for(var i=start; i<=end && i<hqData.Data.length; ++i)
-        {
-            var item=hqData.Data[i];
-            if (i==start) 
-            {
-                showData.Date.Start.Date=item.Date;
-                showData.Date.Start.Time=item.Time;
-                showData.Open=item.Close;
-                showData.High=item.High;
-                showData.Low=item.Low;
-            }
-
-            showData.Date.End.Date=item.Date;
-            showData.Date.End.Time=item.Time;
-            showData.Close=item.Close;
-            showData.Vol+=item.Vol;
-            showData.Amount+=item.Amount;
-            ++showData.Count;
-            if (showData.High<item.High) showData.High=item.High;
-            if(showData.Low>item.Low) showData.Low=item.Low;
-        }
-
-        if (showData.Count<=0) return false;
-
-        if (showData.Vol>0) showData.AvPrice=showData.Amount/showData.Vol;  //均价
-        if (showData.Open>0)
-        {
-            showData.Increase = (showData.Close - showData.Open) / showData.Open *100;   //区间涨幅
-            showData.Amplitude = (showData.High - showData.Low) / showData.Open * 100;   //区间振幅
-        }
-
-        // JSConsole.Chart.Log('[KLineSelectRectDialog::BindData]', showData);
-        var defaultfloatPrecision=GetfloatPrecision(this.SelectData.Symbol);
-        var startDate=IFrameSplitOperator.FormatDateString(showData.Date.Start.Date);
-        var endDate=IFrameSplitOperator.FormatDateString(showData.Date.End.Date);
-        startDate+=' '+IFrameSplitOperator.FormatTimeString(showData.Date.Start.Time,"HH:MM");
-        endDate+=" "+IFrameSplitOperator.FormatTimeString(showData.Date.End.Time,"HH:MM");
-       
-        var startLeftClass="",startRightClass="",endLeftClass="",endRightClass="";
-        if(start<=0) startLeftClass = "BtnBackground";
-        if(start >= end) {
-            startRightClass = "BtnBackground";
-            endLeftClass = "BtnBackground";
-        }
-        if(end >= hqData.Data.length - 1) endRightClass = "BtnBackground";
-
-        var div=document.createElement('div');
-        div.className='jchart-select-table-right';
-        div.innerHTML=
-            '<div class="jchart-select-date">\n' +
-            '            <span>开始: '+ startDate +'<i class="start-date-left '+ startLeftClass +'"><</i><i class="start-date-right '+ startRightClass +'">></i></span>\n' +
-            '            <span>结束: '+ endDate +'<i class="end-date-left '+ endLeftClass +'"><</i><i class="end-date-right '+ endRightClass +'">></i></span>\n' +
-            '            <span>总个数: '+ showData.Count +'</span>\n' +
-            '        </div>\n' +
-            '        <table>\n' +
-            '            <tr><td><strong>起始价: </strong><span>'+ showData.Open.toFixed(defaultfloatPrecision) +'</span></td>' +
-            '               <td><strong>终止价: </strong><span>'+ showData.Close.toFixed(defaultfloatPrecision) +'</span></td>' +
-            '               <td><strong>均价: </strong><span>'+ (IFrameSplitOperator.IsNumber(showData.AvPrice) ? showData.AvPrice.toFixed(defaultfloatPrecision):"--.--") +'</span></td></tr>\n' +
-            '            <tr><td><strong>最低价: </strong><span>'+ showData.Low.toFixed(defaultfloatPrecision) +'</span></td>' +
-            '               <td><strong>最高价: </strong><span>'+ showData.High.toFixed(defaultfloatPrecision) +'</span></td>' +
-            '               <td><strong>涨跌幅: </strong><span class="'+ IFrameSplitOperator.FormatValueColor(showData.Increase) +'">'+ showData.Increase.toFixed(2) +'%</span></td></tr>\n' +
-            '            <tr><td><strong>振幅: </strong><span>'+ showData.Amplitude.toFixed(2) +'%</span></td>' +
-            '               <td><strong>成交量: </strong><span>'+ IFrameSplitOperator.FormatValueString(showData.Vol,2) +'股</span></td>' +
-            '               <td><strong>金额: </strong><span>'+ IFrameSplitOperator.FormatValueString(showData.Amount,2) +'元</span></td></tr>\n' +
-            '        </table>';
-
-        $(".parameter-content").html(div);
-        this.BindEvent();
-
-        return true;
-    }
-
-    this.BindEvent = function () 
-    {
-        var _self = this;
-        if(_self.SelectData.Start > 0){
-            $(".jchart-select-date .start-date-left").click(function () {
-                _self.SelectData.Start--;
-                _self.BindData();
-                _self.HQChart.UpdateSelectRect(_self.SelectData.Start,_self.SelectData.End);
-            })
-        }
-        if(_self.SelectData.Start < _self.SelectData.End){
-            $(".jchart-select-date .start-date-right").click(function () {
-                _self.SelectData.Start++;
-                _self.BindData();
-                _self.HQChart.UpdateSelectRect(_self.SelectData.Start,_self.SelectData.End);
-            })
-            $(".jchart-select-date .end-date-left").click(function () {
-                _self.SelectData.End--;
-                _self.BindData();
-                _self.HQChart.UpdateSelectRect(_self.SelectData.Start,_self.SelectData.End);
-            })
-        }
-        if(_self.SelectData.End < _self.SelectData.Data.Data.length - 1){
-            $(".jchart-select-date .end-date-right").click(function () {
-                _self.SelectData.End++;
-                _self.BindData();
-                _self.HQChart.UpdateSelectRect(_self.SelectData.Start,_self.SelectData.End);
-            })
-        }
-    }
-
-
-    //显示
-    this.DoModal=function(event)
-    {
-        var chart=event.data.Chart;
-        if (this.ID==null) this.Create();   //第1次 需要创建div
-        this.SelectData=event.data.SelectData;
-        this.RectSelectPaint=event.data.RectSelectPaint;
-        this.HQChart=chart;
-        this.HQChart.HideSelectRect();
-        if (!this.BindData()) return;
-
-        this.Show();      //通过CSS居中显示
-    }
-
-
-}
-
-//区间统计
-function KLineSelectRectDialog(divElement)
-{
-    this.newMethod=IDivDialog;   //派生
-    this.newMethod(divElement);
-    delete this.newMethod;
-
-    this.SelectData;
-    this.Dialog;
-    this.HQChart;
-    this.RectSelectPaint;
-
-    //隐藏窗口
-    this.Close=function()
-    {
-        if (this.Dialog) 
-        {
-            this.DivElement.removeChild(this.Dialog);
-            this.Dialog=null;
-        }
-
-        if (this.RectSelectPaint) this.RectSelectPaint.PreventClose=false;
-    }
-
-    //创建
-    this.Create=function()
-    {
-        this.ID=Guid();
-        var div=document.createElement('div');
-        div.className='jchart-select-statistics-box';
-        div.id=this.ID;
-        div.innerHTML=
-        "<div class='parameter jchart-select-section'>\
-            <div class='parameter-header'>\
-                <span>区间统计</span>\
-                <strong id='close' class='icon iconfont icon-close'></strong>\
-            </div>\
-            <div class='parameter-content'>统计数据</div>\
-        <div class='parameter-footer'>\
-            <button id='close' class='submit' >确定</button>\
-            <button id='match' class='submit' >形态匹配</button>\
-        </div>\
-        </div>";
-
-        this.DivElement.appendChild(div);
-        this.Dialog=div;
-
-        //关闭按钮
-        $("#"+this.ID+" #close").click(
-            {
-                divBox:this,
-            },
-            function(event)
-            {
-                event.data.divBox.Close();
-            });
-        
-        //形态匹配
-        $("#"+this.ID+" #match").click(
-            {
-                divBox:this,
-            },
-            function(event)
-            {
-                event.data.divBox.KLineMatch();
-            });   
-    }
-
-    this.BindData=function()
-    {
-        var hqData=this.SelectData.Data;
-        var start=this.SelectData.Start;
-        var end=this.SelectData.End;
-        this.HQChart.UpdateSelectRect(start,end);
-        if (this.RectSelectPaint) this.RectSelectPaint.PreventClose=true;
-
-        var showData=
-        { 
-            Open:0,Close:0,High:0,Low:0, YClose:0,
-            Vol:0, Amount:0, 
-            Date:
-            { 
-                Start:{Time:null, Date:null },
-                End:{ Time:null, Date:null }
-            }, 
-            Count:0,
-            KLine:{ Up:0,Down:0,Unchanged:0 }    //阳线|阴线|平线
-        }
-
-        for(var i=start; i<=end && i<hqData.Data.length; ++i)
-        {
-            var item=hqData.Data[i];
-            if (i==start) 
-            {
-                showData.Date.Start.Date=item.Date;
-                showData.Date.Start.Time=item.Time;
-                showData.Open=item.Open;
-                showData.High=item.High;
-                showData.Low=item.Low;
-                showData.YClose=item.YClose;
-            }
-
-            showData.Date.End.Date=item.Date;
-            showData.Date.End.Time=item.Time;
-            showData.Close=item.Close;
-            showData.Vol+=item.Vol;
-            showData.Amount+=item.Amount;
-            ++showData.Count;
-            if (showData.High<item.High) showData.High=item.High;
-            if(showData.Low>item.Low) showData.Low=item.Low;
-            if (item.Close>item.Open) ++showData.KLine.Up;
-            else if (item.Close<item.Open) ++showData.KLine.Down;
-            else ++showData.KLine.Unchanged;
-        }
-
-        if (showData.Vol>0) showData.AvPrice=showData.Amount/showData.Vol;  //均价
-        if (item.YClose>0)
-        {
-            showData.Increase = (showData.Close - showData.YClose) / showData.YClose *100;   //涨幅
-            showData.Amplitude = (showData.High - showData.Low) / showData.YClose * 100;     //振幅
-        }
-
-        // JSConsole.Chart.Log('[KLineSelectRectDialog::BindData]', showData);
-        var defaultfloatPrecision=GetfloatPrecision(this.SelectData.Symbol);
-        var startDate=IFrameSplitOperator.FormatDateString(showData.Date.Start.Date);
-        var endDate=IFrameSplitOperator.FormatDateString(showData.Date.End.Date);
-        if (ChartData.IsMinutePeriod(this.HQChart.Period))
-        {
-            startDate+=' '+IFrameSplitOperator.FormatTimeString(showData.Date.Start.Time,"HH:MM");
-            endDate+=" "+IFrameSplitOperator.FormatTimeString(showData.Date.End.Time,"HH:MM");
-        }
-        else if (ChartData.IsSecondPeriod(this.HQChart.Period) || ChartData.IsTickPeriod(this.HQChart.Period))
-        {
-            startDate+=' '+IFrameSplitOperator.FormatTimeString(showData.Date.Start.Time,"HH:MM:SS");
-            endDate+=" "+IFrameSplitOperator.FormatTimeString(showData.Date.End.Time,"HH:MM:SS");
-        }
-       
-        var startLeftClass="",startRightClass="",endLeftClass="",endRightClass="";
-        if(start<=0) startLeftClass = "BtnBackground";
-        if(start >= end) {
-            startRightClass = "BtnBackground";
-            endLeftClass = "BtnBackground";
-        }
-        if(end >= hqData.Data.length - 1) endRightClass = "BtnBackground";
-
-        var div=document.createElement('div');
-        div.className='jchart-select-table-right';
-        div.innerHTML=
-            '<div class="jchart-select-date">\n' +
-            '            <span>开始: '+ startDate +'<i class="start-date-left '+ startLeftClass +'"><</i><i class="start-date-right '+ startRightClass +'">></i></span>\n' +
-            '            <span>结束: '+ endDate +'<i class="end-date-left '+ endLeftClass +'"><</i><i class="end-date-right '+ endRightClass +'">></i></span>\n' +
-            '            <span>总个数: '+ showData.Count +'</span>\n' +
-            '        </div>\n' +
-            '        <table>\n' +
-            '            <tr><td><strong>起始价: </strong><span>'+ showData.YClose.toFixed(defaultfloatPrecision) +'</span></td>' +
-            '               <td><strong>最终价: </strong><span>'+ showData.Close.toFixed(defaultfloatPrecision) +'</span></td>' +
-            '               <td><strong>均价: </strong><span>'+ (IFrameSplitOperator.IsNumber(showData.AvPrice) ? showData.AvPrice.toFixed(defaultfloatPrecision):"--.--") +'</span></td></tr>\n' +
-            '            <tr><td><strong>最低价: </strong><span>'+ showData.Low.toFixed(defaultfloatPrecision) +'</span></td>' +
-            '               <td><strong>最高价: </strong><span>'+ showData.High.toFixed(defaultfloatPrecision) +'</span></td>' +
-            '               <td><strong>涨跌幅: </strong><span class="'+ IFrameSplitOperator.FormatValueColor(showData.Increase) +'">'+ showData.Increase.toFixed(2) +'%</span></td></tr>\n' +
-            '            <tr><td><strong>振幅: </strong><span>'+ showData.Amplitude.toFixed(2) +'%</span></td>' +
-            '               <td><strong>成交量: </strong><span>'+ IFrameSplitOperator.FormatValueString(showData.Vol,2) +'股</span></td>' +
-            '               <td><strong>金额: </strong><span>'+ IFrameSplitOperator.FormatValueString(showData.Amount,2) +'元</span></td></tr>\n' +
-            '            <tr><td><strong>阴线: </strong><span>'+ showData.KLine.Up +'</span></td>' +
-            '               <td><strong>阳线: </strong><span>'+ showData.KLine.Down +'</span></td>' +
-            '               <td><strong>平线: </strong><span>'+ showData.KLine.Unchanged +'</span></td></tr>\n' +
-            '        </table>';
-
-        $(".parameter-content").html(div);
-        this.BindEvent();
-    }
-
-    this.BindEvent = function () {
-        var _self = this;
-        if(_self.SelectData.Start > 0){
-            $(".jchart-select-date .start-date-left").click(function () {
-                _self.SelectData.Start--;
-                _self.BindData();
-                _self.HQChart.UpdateSelectRect(_self.SelectData.Start,_self.SelectData.End);
-            })
-        }
-        if(_self.SelectData.Start < _self.SelectData.End){
-            $(".jchart-select-date .start-date-right").click(function () {
-                _self.SelectData.Start++;
-                _self.BindData();
-                _self.HQChart.UpdateSelectRect(_self.SelectData.Start,_self.SelectData.End);
-            })
-            $(".jchart-select-date .end-date-left").click(function () {
-                _self.SelectData.End--;
-                _self.BindData();
-                _self.HQChart.UpdateSelectRect(_self.SelectData.Start,_self.SelectData.End);
-            })
-        }
-        if(_self.SelectData.End < _self.SelectData.Data.Data.length - 1){
-            $(".jchart-select-date .end-date-right").click(function () {
-                _self.SelectData.End++;
-                _self.BindData();
-                _self.HQChart.UpdateSelectRect(_self.SelectData.Start,_self.SelectData.End);
-            })
-        }
-    }
-
-    //显示
-    this.DoModal=function(event)
-    {
-        var chart=event.data.Chart;
-        if (this.ID==null) this.Create();   //第1次 需要创建div
-        this.SelectData=event.data.SelectData;
-        this.RectSelectPaint=event.data.RectSelectPaint;
-        this.HQChart=chart;
-        this.HQChart.HideSelectRect();
-        this.BindData();
-
-        this.Show();      //通过CSS居中显示
-    }
-
-    //形态匹配
-    this.KLineMatch=function(data)
-    {
-        var waitDialog=new WaitDialog(this.DivElement);
-        waitDialog.DoModal(
-            {
-                data:
-                { 
-                    Title:'计算中......', 
-                    Chart:this.HQChart
-                } 
-            });
-
-        this.Close();   //关闭窗口
-
-        var hqChart=this.HQChart;
-        var param= { Scope: { Plate:["CNA.ci"],Minsimilar:0.90 }, WaitDialog:waitDialog }  //沪深A股, 相似度>=90%
-        hqChart.RequestKLineMatch(this.SelectData, param);
-    }
-}
-
 //形态选股
 function KLineMatchDialog(divElement)
 {
@@ -125671,6 +125414,19 @@ function GetBlackStyle()
             TurnoverRateColor:'rgb(43,54,69)',       //换手率
             PositionColor:"rgb(255,0,255)"            //持仓
         },
+
+        DialogSelectRect:
+        {
+            BGColor:'rgb(20,20,20)',            //背景色
+            BorderColor:'rgb(170,170,170)',     //边框颜色
+            TitleColor:'rgb(210,210,210)',       //标题颜色
+            VolColor:"rgb(255, 185, 15)",       //标题成交量
+            AmountColor:"rgb(210,210,210)",      //成交金额
+            TextColor:"rgb(210,210,210)",             //数值名称
+            ValueColor:"rgb(210,210,210)",            //数值
+            TurnoverRateColor:'rgb(43,54,69)',       //换手率
+            PositionColor:"rgb(255,0,255)"            //持仓
+        },
         
         //走势图 信息地雷
         MinuteInfo:
@@ -136619,10 +136375,11 @@ function JSTReportChartContainer(uielement)
 
     this.RecvStockListData=function(data)
     {
+        this.MapExePriceData=new Map();
+        this.MapStockData=new Map();
+
         if (IFrameSplitOperator.IsNonEmptyArray(data.data))
         {
-            this.MapExePriceData=new Map();
-            this.MapStockData=new Map();
             //0=行权价格 1=左边期权代码 2=右侧期权代码 3=左侧期权名称 4=右侧期权名称
             for(var i=0;i<data.data.length;++i)
             {
@@ -143577,6 +143334,7 @@ function JSPopKeyboard()
     this.Title="HQChart 键盘精灵"
     this.ID=Guid();
     this.ActiveDOM=null;    //启动键盘精灵是的控件
+    this.InputStatus=0;     //0=空闲  1=输入中 
 
     this.Keyboard=
     {
@@ -143633,6 +143391,10 @@ function JSPopKeyboard()
         input.addEventListener("keydown", (event)=>{ this.OnKeydown(event); });
         input.addEventListener("keyup", (event)=>{ this.OnKeyup(event); });
 
+        input.addEventListener("compositionstart", (event)=>{ this.OnCompositionStart(event); });
+        input.addEventListener("compositionupdate", (event)=>{ this.OnCompositionUpdate(event);} );
+        input.addEventListener("compositionend", (event)=>{ this.OnCompositionEnd(event);} );
+
         divInput.appendChild(input);
        
         var divChart=document.createElement("div");
@@ -143663,8 +143425,26 @@ function JSPopKeyboard()
 
     }
 
+
+    this.OnCompositionStart=function(event)
+    {
+        this.InputStatus=1;
+    }
+
+    this.OnCompositionUpdate=function(event)
+    {
+
+    }
+
+    this.OnCompositionEnd=function(event)
+    {
+        this.InputStatus=0;
+    }
+
     this.OnKeydown=function(event)
     {
+        if (this.InputStatus!=0) return;
+
         var aryKey=new Set([
             40, 
             38, 
@@ -143686,20 +143466,26 @@ function JSPopKeyboard()
 
     this.OnKeyup=function(event)
     {
+        if (this.InputStatus!=0) return;
+        
         var code=event.keyCode;
-        if ((code>=48 && code<=57) || (code>=65 && code<=90) || (code>=97 && code<=122) || code==8)
+
+        if (code==8)   //删除
         {
             var strText=this.InputDOM.value;
-            strText=strText.toUpperCase();
-            if (strText.length==0)
+            if (strText.length==0)  
             {
-                this.Hide();
-            }
-            else
-            {
-                this.Keyboard.JSChart.Search(strText);
+                this.Hide();    //只有按了删除 才能隐藏
+                return;
             }
         }
+    
+        if ((code>=48 && code<=57) || (code>=65 && code<=90) || (code>=97 && code<=122) || code==8)
+        {
+            var strText=this.InputDOM.value;
+            strText=strText.toUpperCase();
+            this.Keyboard.JSChart.Search(strText);
+        }
     }
 
 
@@ -144198,22 +143984,23 @@ function JSDialogTooltip()
         this.onmouseup = null;
     }
 
-    this.Show=function()
+    this.Show=function(x, y)
     {
+        if (this.IsShow()) return;
+
         if (!this.DivDialog) return;
         if (!this.HQChart) return;
 
-        if (!this.DivDialog.style.top || !this.DivDialog.style.left)    //上一次显示的位置
-        {
-            var top=this.HQChart.Frame.ChartBorder.GetTop();
-            var left=this.HQChart.Frame.ChartBorder.GetLeft();
-            var rtClient=this.HQChart.UIElement.getBoundingClientRect();
-    
-            var x=left+rtClient.left+5;
-            var y=top+rtClient.top+10;
-            this.DivDialog.style.top = y + "px";
-            this.DivDialog.style.left = x + "px";
-        }
+       
+        var top=this.HQChart.Frame.ChartBorder.GetTop();
+        var left=this.HQChart.Frame.ChartBorder.GetLeft();
+        var rtClient=this.HQChart.UIElement.getBoundingClientRect();
+
+        var x=left+rtClient.left+5;
+        var y=top+rtClient.top+10;
+        this.DivDialog.style.top = y + "px";
+        this.DivDialog.style.left = x + "px";
+        
 
         this.DivDialog.style.visibility='visible';
     }
@@ -144674,7 +144461,871 @@ function JSDialogTooltip()
     }
 
 
-}///////////////////////////////////////////////////////////////////////////////////
+}
+/*
+   Copyright (c) 2018 jones
+ 
+   http://www.apache.org/licenses/LICENSE-2.0
+
+   开源项目 https://github.com/jones2000/HQChart
+ 
+   jones_2000@163.com
+
+   内置区间统计框 设置框
+*/
+
+
+
+function JSDialogSelectRect()
+{
+    this.DivDialog=null;
+    this.DragTitle=null;
+    this.HQChart=null;
+
+    this.UpColor=g_JSChartResource.UpTextColor;
+    this.DownColor=g_JSChartResource.DownTextColor;
+    this.UnchangeColor=g_JSChartResource.UnchagneTextColor;
+
+    this.TitleColor=g_JSChartResource.DialogSelectRect.TitleColor;
+    this.TitleBGColor=g_JSChartResource.DialogSelectRect.TitleBGColor;
+    this.BGColor=g_JSChartResource.DialogSelectRect.BGColor;
+
+    this.TextColor=g_JSChartResource.DialogSelectRect.TextColor;
+    this.ValueColor=g_JSChartResource.DialogSelectRect.ValueColor;
+
+    this.VolColor=g_JSChartResource.DialogSelectRect.VolColor;
+    this.AmountColor=g_JSChartResource.DialogSelectRect.AmountColor;
+    this.TurnoverRateColor=g_JSChartResource.DialogSelectRect.TurnoverRateColor;
+    this.PositionColor=g_JSChartResource.DialogSelectRect.PositionColor;
+    
+
+    this.MaxRowCount=10;
+    this.AryData=[];
+    this.DateTimeBox={ Start:{ SpanText:null, SpanValue:null }, End:{ SpanText:null, SpanValue:null } };
+    this.ShowData;
+    this.SelectData;
+
+    this.Inital=function(hqchart, option)
+    {
+        this.HQChart=hqchart;
+        if (option)
+        {
+            
+        }
+    }
+
+    this.Destroy=function()
+    {
+        this.AryData=[];
+        this.ShowData=null;
+        this.DateTimeBox={ Start:{ SpanText:null, SpanValue:null }, End:{ SpanText:null, SpanValue:null } };
+
+        if (this.DivDialog) 
+        {
+            document.body.removeChild(this.DivDialog);
+            this.DivDialog=null;
+        }
+    }
+
+    this.Create=function()
+    {
+        var divDom=document.createElement("div");
+        divDom.className='UMyChart_SelectRect_Dialog_Div';
+
+        var divTitle=document.createElement("div");
+        divTitle.className='UMyChart_SelectRect_Title_Div';
+        divTitle.onmousedown=(e)=>{   this.OnMouseDownTitle(e);}
+
+        var divName=document.createElement("div");
+        divName.className='UMyChart_SelectRect_Name_Div';
+        divName.innerText="区间统计";
+        divTitle.appendChild(divName);
+
+        var divClose=document.createElement("div");
+        divClose.className='UMyChart_SelectRect_Close_Div';
+        divClose.innerText="x";
+        divClose.onmousedown=(e)=>{ this.Close(e); }
+        divTitle.appendChild(divClose);
+
+        divDom.appendChild(divTitle);
+
+        var divDateTime=document.createElement("div");
+        divDateTime.className='UMyChart_SelectRect_DateTime_Div';
+
+        //起始日期
+        var divStartDate=document.createElement("div");
+        divDateTime.append(divStartDate);
+        var spanText=document.createElement("span");
+        spanText.className="UMyChart_SelectRect_DateTitle_Span";
+        spanText.innerText="开始:";
+        divStartDate.appendChild(spanText);
+        this.DateTimeBox.Start.SpanText=spanText;
+
+        var spanDate=document.createElement("span");
+        spanDate.className="UMyChart_SelectRect_DateValue_Span";
+        spanDate.innerText="--/--";
+        divStartDate.appendChild(spanDate);
+        this.DateTimeBox.Start.SpanValue=spanDate;
+
+        var spanArrow=document.createElement("span");
+        spanArrow.className="UMyChart_SelectRect_ArrowButton_Span";
+        spanArrow.innerText="<";
+        spanArrow.onmousedown=(e)=>{ this.MoveStartDate(-1); }
+        divStartDate.appendChild(spanArrow);
+
+        var spanArrow=document.createElement("span");
+        spanArrow.className="UMyChart_SelectRect_ArrowButton_Span";
+        spanArrow.innerText=">";
+        spanArrow.onmousedown=(e)=>{ this.MoveStartDate(1); }
+        divStartDate.appendChild(spanArrow);
+
+        //结束日期
+        var divEndDate=document.createElement("div");
+        divDateTime.append(divEndDate);
+        var spanText=document.createElement("span");
+        spanText.className="UMyChart_SelectRect_DateTitle_Span";
+        spanText.innerText="结束:";
+        divEndDate.appendChild(spanText);
+        this.DateTimeBox.End.SpanText=spanText;
+
+        var spanDate=document.createElement("span");
+        spanDate.className="UMyChart_SelectRect_DateValue_Span";
+        spanDate.innerText="--/--";
+        divEndDate.appendChild(spanDate);
+        this.DateTimeBox.SpanEnd=spanDate;
+        this.DateTimeBox.End.SpanValue=spanDate;
+
+        var spanArrow=document.createElement("span");
+        spanArrow.className="UMyChart_SelectRect_ArrowButton_Span";
+        spanArrow.innerText="<";
+        spanArrow.onmousedown=(e)=>{ this.MoveEndDate(-1); }
+        divEndDate.appendChild(spanArrow);
+
+        var spanArrow=document.createElement("span");
+        spanArrow.className="UMyChart_SelectRect_ArrowButton_Span";
+        spanArrow.innerText=">";
+        spanArrow.onmousedown=(e)=>{ this.MoveEndDate(1); }
+        divEndDate.appendChild(spanArrow);
+
+        divDom.appendChild(divDateTime);
+
+
+        var table=document.createElement("table");
+        table.className="UMyChart_SelectRect_Table";
+        divDom.appendChild(table);
+
+        var tbody=document.createElement("tbody");
+        tbody.className="UMyChart_SelectRect_Tbody";
+        table.appendChild(tbody);
+
+
+        for(var i=0;i<this.MaxRowCount;++i)
+        {
+            var rowItem={ Tr:null, AryItem:[] };
+
+            var trDom=document.createElement("tr");
+            trDom.className='UMyChart_SelectRect_Tr';
+            tbody.appendChild(trDom);
+            rowItem.Tr=trDom;
+
+            for(var j=0;j<3;++j)
+            {
+                var item={ Td:null, LeftSpan:null, RightSpan:null };
+                var tdDom=document.createElement("td");
+                tdDom.className="UMyChart_SelectRect_Td";   //标题+数值
+                item.Td=tdDom;
+                trDom.appendChild(tdDom);
+
+                var spanDom=document.createElement("span");
+                spanDom.className='UMyChart_SelectRect_Item_Left_Span';
+                spanDom.innerText='数值';
+                item.LeftSpan=spanDom;
+                tdDom.appendChild(spanDom);
+                
+
+                var spanDom=document.createElement("span");
+                spanDom.className='UMyChart_SelectRect_Item_Right_Span';
+                spanDom.innerText='--';
+                item.RightSpan=spanDom;
+                tdDom.appendChild(spanDom);
+
+                rowItem.AryItem.push(item);
+            }
+                
+            this.AryData.push(rowItem);
+        }
+
+        document.body.appendChild(divDom);
+
+        this.DivDialog=divDom;
+
+        this.UpdateStyle();
+    }
+
+    this.Close=function(e)
+    {
+        if (!this.DivDialog) return;
+
+        this.DivDialog.style.visibility='hidden';
+        this.ShowData=null;
+        this.SelectData=null;
+    }
+
+    this.MoveStartDate=function(step)
+    {
+        if (!this.DivDialog || !this.HQChart) return;
+        if (step==0) return;
+        if (!this.SelectData) return;
+
+        var selectData=this.SelectData;
+        var bUpdate=false;
+        if (step>0)
+        {
+            var index=selectData.Start;
+            var endIndex=selectData.End;
+            for(i=0; i<step && index<endIndex; ++i)
+            {
+                ++index;
+            }
+
+            if (selectData.Start!=index)
+            {
+                selectData.Start=index;
+                bUpdate=true;
+            }
+        }
+        else
+        {
+            step=Math.abs(step);
+            var index=selectData.Start
+            var endIndex=selectData.End;
+            for(var i=0;i<step && index>0;++i)
+            {
+                --index;
+            }
+
+            if (selectData.Start!=index)
+            {
+                selectData.Start=index;
+                bUpdate=true;
+            }
+        }
+
+        if (bUpdate) this.UpdateSelectRect(selectData);
+    }
+
+    this.MoveEndDate=function(step)
+    {
+        if (!this.DivDialog) return;
+        if (step==0) return;
+        if (!this.SelectData) return;
+
+        var selectData=this.SelectData;
+        var bUpdate=false;
+
+        if (step>0)
+        {
+            var index=selectData.End;
+            var startIndex=selectData.Start;
+            for(i=0; i<step && index<this.ShowData.DataCount; ++i)
+            {
+                ++index;
+            }
+
+            if (selectData.End!=index)
+            {
+                selectData.End=index;
+                bUpdate=true;
+            }
+        }
+        else
+        {
+            step=Math.abs(step);
+            var index=selectData.End;
+            var startIndex=selectData.Start;
+            for(var i=0;i<step && index>startIndex;++i)
+            {
+                --index;
+            }
+
+            if (selectData.End!=index)
+            {
+                selectData.End=index;
+                bUpdate=true;
+            }
+        }
+
+        if (bUpdate) this.UpdateSelectRect(selectData);
+    }
+
+    this.Show=function(x,y)
+    {
+        if (!this.DivDialog) return;
+        if (!this.HQChart) return;
+
+        /*
+        if (!this.DivDialog.style.top || !this.DivDialog.style.left)    //上一次显示的位置
+        {
+            var top=this.HQChart.Frame.ChartBorder.GetTop();
+            var left=this.HQChart.Frame.ChartBorder.GetLeft();
+           
+    
+            var x=left+rtClient.left+5;
+            var y=top+rtClient.top+10;
+            this.DivDialog.style.top = y + "px";
+            this.DivDialog.style.left = x + "px";
+        }
+        */
+
+        var top=this.HQChart.Frame.ChartBorder.GetTop();
+        var left=this.HQChart.Frame.ChartBorder.GetLeft();
+        var rtClient=this.HQChart.UIElement.getBoundingClientRect();
+
+        left=left+rtClient.left+5;
+        top=top+rtClient.top+10;
+        if (IFrameSplitOperator.IsNumber(x) && IFrameSplitOperator.IsNumber(y))
+        {
+            left=x;
+            top=y;
+        }
+
+        var right=x+this.DivDialog.offsetWidth;
+        var bottom=y+ this.DivDialog.offsetHeight;
+
+        if ((right+5)>=window.innerWidth) left=window.innerWidth-this.DivDialog.offsetWidth-5;
+        if ((bottom+5)>=window.innerHeight) top=window.innerHeight-this.DivDialog.offsetHeight-5;
+
+        this.DivDialog.style.top = top + "px";
+        this.DivDialog.style.left = left + "px";
+        this.DivDialog.style.visibility='visible';
+    }
+
+    this.IsShow=function()
+    {
+        if (!this.DivDialog) return false;
+        
+        return this.DivDialog.style.visibility==='visible';
+    }
+
+    this.OnMouseDownTitle=function(e)
+    {
+        if (!this.DivDialog) return;
+
+        var dragData={ X:e.clientX, Y:e.clientY };
+        dragData.YOffset=e.clientX - this.DivDialog.offsetLeft;
+        dragData.XOffset=e.clientY - this.DivDialog.offsetTop;
+        this.DragTitle=dragData;
+
+        document.onmousemove=(e)=>{ this.DocOnMouseMoveTitle(e); }
+        document.onmouseup=(e)=>{ this.DocOnMouseUpTitle(e); }
+    }
+
+    this.DocOnMouseMoveTitle=function(e)
+    {
+        if (!this.DragTitle) return;
+
+        var left = e.clientX - this.DragTitle.YOffset;
+        var top = e.clientY - this.DragTitle.XOffset;
+
+        var right=left+this.DivDialog.offsetWidth;
+        var bottom=top+ this.DivDialog.offsetHeight;
+        
+        if ((right+5)>=window.innerWidth) left=window.innerWidth-this.DivDialog.offsetWidth-5;
+        if ((bottom+5)>=window.innerHeight) top=window.innerHeight-this.DivDialog.offsetHeight-5;
+
+        this.DivDialog.style.left = left + 'px';
+        this.DivDialog.style.top = top + 'px';
+
+        if(e.preventDefault) e.preventDefault();
+    }
+
+    this.DocOnMouseUpTitle=function(e)
+    {
+        this.DragTitle=null;
+        this.onmousemove = null;
+        this.onmouseup = null;
+    }
+
+
+    //配色修改
+    this.ReloadResource=function(option)
+    {
+        this.UpColor=g_JSChartResource.UpTextColor;
+        this.DownColor=g_JSChartResource.DownTextColor;
+        this.UnchangeColor=g_JSChartResource.UnchagneTextColor;
+
+        this.TitleColor=g_JSChartResource.DialogSelectRect.TitleColor;
+        this.TitleBGColor=g_JSChartResource.DialogSelectRect.TitleBGColor;
+        this.BGColor=g_JSChartResource.DialogSelectRect.BGColor;
+        this.BorderColor=g_JSChartResource.DialogSelectRect.BorderColor;
+
+        this.TextColor=g_JSChartResource.DialogSelectRect.TextColor;
+        this.ValueColor=g_JSChartResource.DialogSelectRect.ValueColor;
+
+        this.VolColor=g_JSChartResource.DialogSelectRect.VolColor;
+        this.AmountColor=g_JSChartResource.DialogSelectRect.AmountColor;
+        this.TurnoverRateColor=g_JSChartResource.DialogSelectRect.TurnoverRateColor;
+        this.PositionColor=g_JSChartResource.DialogSelectRect.PositionColor;
+
+        if (!this.DivDialog) return;
+
+        this.UpdateStyle();
+
+        if (this.SelectData)
+        {
+            var selectData=this.SelectData;
+            this.HQChart.UpdateSelectRect(selectData.Start,selectData.End);
+            var showData=this.CalculateKLineData({ SelectData:selectData });
+            this.FormatKLineText(showData);
+            this.ShowData=showData;
+            this.UpdateTableDOM(showData);
+        }
+        
+    }
+
+    this.UpdateStyle=function()
+    {
+        if (!this.DivDialog) return;
+
+        if (this.BGColor) this.DivDialog.style['background-color']=this.BGColor;
+        if (this.BorderColor) this.DivDialog.style['border-color']=this.BorderColor;
+
+        if (this.DateTimeBox.Start)
+        {
+            var item=this.DateTimeBox.Start;
+            item.SpanText.style["color"]=this.TextColor;
+            item.SpanValue.style["color"]=this.ValueColor;
+        }
+
+        if (this.DateTimeBox.End)
+        {
+            var item=this.DateTimeBox.End;
+            item.SpanText.style["color"]=this.TextColor;
+            item.SpanValue.style["color"]=this.ValueColor;
+        }
+
+        //if (this.TitleBGColor) this.TitleBox.DivTitle.style['background-color']=this.TitleBGColor;
+    }
+
+
+    this.UpdateTableDOM=function(showData)
+    {
+        var index=0;
+        for(var index=0,j=0, dataIndex=0;index<this.AryData.length && dataIndex<showData.AryText.length;++index)
+        {
+            var rowItem=this.AryData[index];
+            for(j=0;j<rowItem.AryItem.length;++j, ++dataIndex)
+            {
+                if (dataIndex>=showData.AryText.length) break;
+
+                var item=rowItem.AryItem[j]
+                var outItem=showData.AryText[dataIndex];
+
+                item.LeftSpan.innerText=outItem.Title;
+                item.LeftSpan.style.color=this.TextColor;
+
+                item.RightSpan.innerText=outItem.Text;
+                item.RightSpan.style.color=outItem.Color;
+            }
+            rowItem.Tr.style.display="";
+        }
+
+        for(; index<this.AryData.length;++index)
+        {
+            var rowItem=this.AryData[index];
+            rowItem.Tr.style.display="none";
+        }
+
+        if (this.DateTimeBox.Start.SpanValue) this.DateTimeBox.Start.SpanValue.innerText=showData.Date.Start.Text;
+        if (this.DateTimeBox.End.SpanValue) this.DateTimeBox.End.SpanValue.innerText=showData.Date.End.Text;
+    }
+
+    this.UpdateSelectRect=function(selectData)
+    {
+        this.HQChart.UpdateSelectRect(selectData.Start,selectData.End);
+        var showData=null;
+        if (this.HQChart.ClassName=='KLineChartContainer')
+        {
+            showData=this.CalculateKLineData({ SelectData:selectData });
+            this.FormatKLineText(showData);
+        }
+        else if (this.HQChart.ClassName=='MinuteChartContainer')
+        {
+            showData=this.CalculateMinuteData({ SelectData:selectData });
+            this.FormatMinuteText(showData);
+        }
+        
+        if (showData)
+        {
+            this.ShowData=showData;
+            this.UpdateTableDOM(showData);
+        }
+    }
+
+
+    this.Update=function(data)
+    {
+        if (!this.DivDialog) return;
+
+        var showData;
+        if (this.HQChart.ClassName=='KLineChartContainer')
+        {
+            showData=this.CalculateKLineData(data);
+            this.FormatKLineText(showData);
+        }
+        else if (this.HQChart.ClassName=='MinuteChartContainer')
+        {
+            showData=this.CalculateMinuteData(data);
+            this.FormatMinuteText(showData);
+        }
+
+        if (!showData) return;
+
+        this.ShowData=showData;
+        this.SelectData=data.SelectData;
+        this.UpdateTableDOM(showData);
+
+        if (!this.IsShow()) this.Show(data.X, data.Y);
+    }
+
+    this.CreateEmptyShowData=function()
+    {
+        var showData=
+        {
+            Open:null,Close:null,High:null,Low:null, YClose:null,
+            Vol:0, Amount:0, 
+            Date:
+            { 
+                Start:{ Time:null, Date:null, Text:"" },
+                End:{ Time:null, Date:null, Text:"" }
+            }, 
+            Count:0,
+            KLine:{ Up:0,Down:0,Unchanged:0 },    //阳线|阴线|平线
+
+            AryText:[],
+
+            DataCount:0,
+        };
+
+        return showData;
+    }
+
+    this.CalculateKLineData=function(data)
+    {
+        var selectData=data.SelectData;
+        var hisData=selectData.Data;
+        var start=selectData.Start;
+        var end=selectData.End;
+
+        var showData=this.CreateEmptyShowData();
+        showData.DataCount=hisData.Data.length;
+
+        for(var i=start;i<hisData.Data.length && i<=end;++i)
+        {
+            var item=hisData.Data[i];
+            ++showData.Count;
+
+            if (!IFrameSplitOperator.IsNumber(showData.Open) && IFrameSplitOperator.IsNumber(item.Open)) showData.Open=item.Open;
+            if (IFrameSplitOperator.IsNumber(item.Close)) showData.Close=item.Close;
+
+            if (IFrameSplitOperator.IsNumber(item.Vol)) showData.Vol+=item.Vol;
+            if (IFrameSplitOperator.IsNumber(item.Amount)) showData.Amount+=item.Amount;
+
+            if (IFrameSplitOperator.IsNumber(item.High))
+            {
+                if (!IFrameSplitOperator.IsNumber(showData.High) || showData.High<item.High) 
+                    showData.High=item.High;
+            }
+                
+            if (IFrameSplitOperator.IsNumber(item.Low))
+            {
+                if (!IFrameSplitOperator.IsNumber(showData.Low) || showData.Low>item.Low) 
+                    showData.Low=item.Low;
+            } 
+
+            if (IFrameSplitOperator.IsNumber(item.Open) && IFrameSplitOperator.IsNumber(item.Close))
+            {
+                if (item.Close>item.Open) ++showData.KLine.Up;
+                else if (item.Close<item.Open) ++showData.KLine.Down;
+                else ++showData.KLine.Unchanged;
+            }
+
+            if (IFrameSplitOperator.IsNumber(item.Date))
+            {
+                showData.Date.End.Date=item.Date;
+                if (!IFrameSplitOperator.IsNumber(showData.Date.Start.Date)) showData.Date.Start.Date=item.Date;
+            }
+
+            if (IFrameSplitOperator.IsNumber(item.Time))
+            {
+                showData.Date.End.Time=item.Time;
+                if (!IFrameSplitOperator.IsNumber(showData.Date.Start.Time)) showData.Date.Start.Time=item.Time;
+            }
+        }
+
+        return showData;
+    }
+
+    //格式化K线数据
+    this.FormatKLineText=function(showData)
+    {
+        if (!showData) return;
+
+        var defaultfloatPrecision=GetfloatPrecision(this.HQChart.Symbol);
+
+        if (ChartData.IsMinutePeriod(this.HQChart.Period,true))
+        {
+            showData.Date.Start.Text=`${IFrameSplitOperator.FormatDateString(showData.Date.Start.Date)} ${IFrameSplitOperator.FormatTimeString(showData.Date.Start.Time,"HH:MM")}`;
+            showData.Date.End.Text=`${IFrameSplitOperator.FormatDateString(showData.Date.End.Date)} ${IFrameSplitOperator.FormatTimeString(showData.Date.End.Time,"HH:MM")}`;
+        }
+        else if (ChartData.IsSecondPeriod(this.HQChart.Period) || ChartData.IsTickPeriod(this.HQChart.Period))
+        {
+            showData.Date.Start.Text=`${IFrameSplitOperator.FormatDateString(showData.Date.Start.Date)} ${IFrameSplitOperator.FormatTimeString(showData.Date.Start.Time,"HH:MM:SS")}`;
+            showData.Date.End.Text=`${IFrameSplitOperator.FormatDateString(showData.Date.End.Date)} ${IFrameSplitOperator.FormatTimeString(showData.Date.End.Time,"HH:MM:SS")}`;
+        }
+        else
+        {
+            showData.Date.Start.Text=IFrameSplitOperator.FormatDateString(showData.Date.Start.Date);
+            showData.Date.End.Text=IFrameSplitOperator.FormatDateString(showData.Date.End.Date);
+        }
+
+        showData.AryText.push(this.ForamtPrice(showData.Open, showData.Open,defaultfloatPrecision, 'DialogSelectRect-StartPrice'));
+        showData.AryText.push(this.ForamtPrice(showData.Close, showData.Open,defaultfloatPrecision, 'DialogSelectRect-EndPrice'));
+        showData.AryText.push(this.FormatIncrease(showData.Close, showData.Open, 'DialogSelectRect-Increase'));
+
+        showData.AryText.push(this.ForamtPrice(showData.High, showData.Open,defaultfloatPrecision, 'DialogSelectRect-High'));
+        showData.AryText.push(this.ForamtPrice(showData.Low, showData.Open,defaultfloatPrecision, 'DialogSelectRect-Low'));
+        showData.AryText.push(this.FormatAmplitude(showData.High, showData.Low, showData.Open, 'DialogSelectRect-Amplitude'));
+
+        showData.AryText.push(this.FormatVol(showData.Vol, 'DialogSelectRect-Vol'));
+        showData.AryText.push(this.FormatAmount(showData.Amount, 'DialogSelectRect-Amount'));
+        showData.AryText.push(this.FormatNumber(showData.Count, null, 0, "DialogSelectRect-DataCount"));
+
+        showData.AryText.push(this.FormatNumber(showData.KLine.Up, this.UpColor, 0, 'DialogSelectRect-Up'));
+        showData.AryText.push(this.FormatNumber(showData.KLine.Down, this.DownColor, 0, 'DialogSelectRect-Down'));
+        showData.AryText.push(this.FormatNumber(showData.KLine.Unchanged, this.UnchangeColor, 0, 'DialogSelectRect-Unchanged'));
+    }
+
+
+    this.CalculateMinuteData=function(data)
+    {
+        var selectData=data.SelectData;
+        var hisData=selectData.Data;
+        var start=selectData.Start;
+        var end=selectData.End;
+
+        var showData=this.CreateEmptyShowData();
+        showData.DataCount=hisData.Data.length;
+
+        for(var i=start;i<hisData.Data.length && i<=end;++i)
+        {
+            var item=hisData.Data[i];
+            ++showData.Count;
+
+            if (!IFrameSplitOperator.IsNumber(showData.Open) && IFrameSplitOperator.IsNumber(item.Open)) showData.Open=item.Open;
+            if (IFrameSplitOperator.IsNumber(item.Close)) showData.Close=item.Close;
+
+            if (IFrameSplitOperator.IsNumber(item.Vol)) showData.Vol+=item.Vol;
+            if (IFrameSplitOperator.IsNumber(item.Amount)) showData.Amount+=item.Amount;
+
+            if (IFrameSplitOperator.IsNumber(item.High))
+            {
+                if (!IFrameSplitOperator.IsNumber(showData.High) || showData.High<item.High) 
+                    showData.High=item.High;
+            }
+                
+            if (IFrameSplitOperator.IsNumber(item.Low))
+            {
+                if (!IFrameSplitOperator.IsNumber(showData.Low) || showData.Low>item.Low) 
+                    showData.Low=item.Low;
+            } 
+
+            if (IFrameSplitOperator.IsNumber(item.Open) && IFrameSplitOperator.IsNumber(item.Close))
+            {
+                if (item.Close>item.Open) ++showData.KLine.Up;
+                else if (item.Close<item.Open) ++showData.KLine.Down;
+                else ++showData.KLine.Unchanged;
+            }
+
+            if (IFrameSplitOperator.IsNumber(item.Date))
+            {
+                showData.Date.End.Date=item.Date;
+                if (!IFrameSplitOperator.IsNumber(showData.Date.Start.Date)) showData.Date.Start.Date=item.Date;
+            }
+
+            if (IFrameSplitOperator.IsNumber(item.Time))
+            {
+                showData.Date.End.Time=item.Time;
+                if (!IFrameSplitOperator.IsNumber(showData.Date.Start.Time)) showData.Date.Start.Time=item.Time;
+            }
+        }
+        
+        return showData;      
+    }
+
+    this.FormatMinuteText=function(showData)
+    {
+        if (!showData) return;
+
+        var defaultfloatPrecision=GetfloatPrecision(this.HQChart.Symbol);
+        
+        showData.Date.Start.Text=`${IFrameSplitOperator.FormatDateString(showData.Date.Start.Date)} ${IFrameSplitOperator.FormatTimeString(showData.Date.Start.Time,"HH:MM")}`;
+        showData.Date.End.Text=`${IFrameSplitOperator.FormatDateString(showData.Date.End.Date)} ${IFrameSplitOperator.FormatTimeString(showData.Date.End.Time,"HH:MM")}`;
+        
+        showData.AryText.push(this.ForamtPrice(showData.Open, showData.Open,defaultfloatPrecision, 'DialogSelectRect-StartPrice'));
+        showData.AryText.push(this.ForamtPrice(showData.Close, showData.Open,defaultfloatPrecision, 'DialogSelectRect-EndPrice'));
+        showData.AryText.push(this.FormatIncrease(showData.Close, showData.Open, 'DialogSelectRect-Increase'));
+
+        showData.AryText.push(this.ForamtPrice(showData.High, showData.Open,defaultfloatPrecision, 'DialogSelectRect-High'));
+        showData.AryText.push(this.ForamtPrice(showData.Low, showData.Open,defaultfloatPrecision, 'DialogSelectRect-Low'));
+        showData.AryText.push(this.FormatAmplitude(showData.High, showData.Low, showData.Open, 'DialogSelectRect-Amplitude'));
+
+        showData.AryText.push(this.FormatVol(showData.Vol, 'DialogSelectRect-Vol'));
+        showData.AryText.push(this.FormatAmount(showData.Amount, 'DialogSelectRect-Amount'));
+        showData.AryText.push(this.FormatNumber(showData.Count, null, 0, "DialogSelectRect-DataCount"));
+    }
+
+
+    this.GetColor=function(price,yClose)
+    {
+        if(price>yClose) return this.UpColor;
+        else if (price<yClose) return this.DownColor;
+        else return this.UnchangeColor;
+    }
+
+    this.GetPriceColor=function(price, yClose)
+    {
+        var color=this.GetColor(price, yClose);
+        return color;
+    }
+
+    this.FormatEmpty=function()
+    {
+        var item=
+        { 
+            Title:"",
+            Text:"",
+            Color:this.ValueColor
+        };
+
+        return item;
+    }
+
+    this.FormatNumber=function(value, color, defaultfloatPrecision, TitleID, format)
+    {
+        var item=
+        { 
+            Title:g_JSChartLocalization.GetText(TitleID, this.LanguageID),
+            Text:"----",
+            Color:this.ValueColor
+        };
+
+        if (!IFrameSplitOperator.IsNumber(value)) return item;
+
+        item.Text=value.toFixed(defaultfloatPrecision);
+        if (color) item.Color=color;
+
+        return item;
+    }
+
+    
+    this.ForamtPrice=function(price, yClose, defaultfloatPrecision, TitleID)
+    {
+        var item=
+        { 
+            Title:g_JSChartLocalization.GetText(TitleID, this.LanguageID),
+            Text:"--.--",
+            Color:this.ValueColor
+        };
+
+        if (!IFrameSplitOperator.IsNumber(price)) return item;
+
+        item.Text=price.toFixed(defaultfloatPrecision);
+        item.Color=this.GetColor(price, yClose);
+
+        return item;
+    }
+
+    this.FormatIncrease=function(price, yClose, TitleID,)
+    {
+        //涨幅
+        var item=
+        {
+            Title:g_JSChartLocalization.GetText(TitleID,this.LanguageID), 
+            Text:"--.--",
+            Color:this.ValueColor
+        };
+
+        if (!IFrameSplitOperator.IsNumber(price) || !IFrameSplitOperator.IsNumber(yClose)) return item;
+
+        var diffValue=price-yClose;
+        var value=(diffValue)/yClose;
+        item.Text=`${(value*100).toFixed(2)}%`;
+       
+        item.Color=this.GetColor(value,0);
+
+        return item;
+    }
+
+    this.FormatAmplitude=function(high, low, yClose, TitleID)
+    {
+        //振幅
+        var item=
+        {
+            Title:g_JSChartLocalization.GetText(TitleID,this.LanguageID), 
+            Text:"--.--",
+            Color:this.ValueColor
+        };
+
+
+        if (!IFrameSplitOperator.IsNumber(high) || !IFrameSplitOperator.IsNumber(low) || !IFrameSplitOperator.IsNumber(yClose)) return item;
+
+        var diffValue=high-low;
+        var value=(diffValue)/yClose;
+        item.Text=`${(value*100).toFixed(2)}%`;
+        item.Color=this.GetColor(value,0);
+        
+        return item;
+    }
+
+    this.FormatVol=function(vol, TitleID)
+    {
+        var item=
+        {
+            Title:g_JSChartLocalization.GetText(TitleID,this.LanguageID),
+            Text:'--',
+            Color:this.VolColor
+        };
+
+        if (!IFrameSplitOperator.IsNumber(vol)) return item;
+
+        item.Text=IFrameSplitOperator.FormatValueStringV2(vol,0,2,this.LanguageID);
+        
+        return item;
+    }
+
+    this.FormatAmount=function(amount, TitleID)
+    {
+        var item=
+        {
+            Title:g_JSChartLocalization.GetText(TitleID,this.LanguageID),
+            Text:'--',
+            Color:this.AmountColor
+        };
+
+        if (!IFrameSplitOperator.IsNumber(amount)) return item;
+
+        item.Text=IFrameSplitOperator.FormatValueString(amount,2,this.LanguageID);
+        
+        return item;
+    }
+
+}
+
+
+
+
+///////////////////////////////////////////////////////////////////////////////////
 //  工作线程计算指标示例
 //
 //
@@ -144795,7 +145446,7 @@ function HQChartScriptWorker()
 
 
 
-var HQCHART_VERSION="1.1.13975";
+var HQCHART_VERSION="1.1.13982";
 
 function PrintHQChartVersion()
 {