hqchart 1.1.12685 → 1.1.12693

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

@@ -4821,7 +4821,7 @@ function JSChart(divElement, bOffscreen, bCacheCanvas)
         }
         
         //叠加指标宽度
-        if (option.OverlayIndexFrameWidth>40) chart.OverlayIndexFrameWidth=option.OverlayIndexFrameWidth;
+        if (option.OverlayIndexFrameWidth>40) chart.Frame.FixedRightWidth.Overlay=option.OverlayIndexFrameWidth;
 
         //叠加指标
         if (IFrameSplitOperator.IsNonEmptyArray(option.OverlayIndex))
@@ -6705,7 +6705,9 @@ var JSCHART_EVENT_ID=
     ON_CUSTOM_DRAG_DOC_MOUSE_UP:115,
     ON_CUSTOM_DRAG_MOUSE_MOVE:116,
 
-    ON_KEYDOWN:117
+    ON_KEYDOWN:117,
+
+    ON_CREATE_OVERLAY_FRAME:118,        //创建叠加框架回调
 }
 
 var JSCHART_OPERATOR_ID=
@@ -8818,6 +8820,7 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
                 this.UpdatePointByCursorIndex();
                 this.UpdataDataoffset();
                 this.UpdateFrameMaxMin();
+                //this.ResetFrameXSplit();
                 this.Draw();
                 this.ShowTooltipByKeyDown();
                 this.StopDragTimer();
@@ -8832,6 +8835,7 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
                 this.UpdataDataoffset();
                 this.UpdatePointByCursorIndex();
                 this.UpdateFrameMaxMin();
+                //this.ResetFrameXSplit();
                 this.Draw();
                 this.ShowTooltipByKeyDown();
                 this.StopDragTimer();
@@ -10978,6 +10982,10 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
                 frame.HorizontalMax=max;
                 frame.HorizontalMin=min;  
             }
+            else
+            {
+                frame.XSplit=true;
+            }
 
             //共享Y轴叠加指标同步下坐标
             for(var j=0;j<item.OverlayFrame.length;++j)
@@ -12540,7 +12548,6 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
         else
         {
             var subFrame=this.Frame.SubFrame[dest.WindowIndex];
-            subFrame.Interval=this.OverlayIndexFrameWidth;
             var overlayFrame=new OverlayIndexItem();
             var frame=this.CreateOverlayFrame();
             frame.Canvas=this.Canvas;
@@ -12557,6 +12564,15 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
             frame.YSplitOperator.GetEventCallback=(id)=> { return this.GetEventCallback(id); };
     
             overlayFrame.Frame=frame;
+
+            var event=this.GetEventCallback(JSCHART_EVENT_ID.ON_CREATE_OVERLAY_FRAME);
+            if (event && event.Callback)
+            {
+                var sendData={ OverlayFrame:overlayFrame, WindowIndex:dest.WindowIndex, SubFrame:subFrame };
+                event.Callback(event, sendData, this);
+            }
+
+
             var scriptIndex;
             if (findItem) 
             {
@@ -13047,7 +13063,7 @@ function CoordinateInfo()
     this.Font=g_JSChartResource.FrameSplitTextFont;             //字体
     this.LineColor=g_JSChartResource.FrameSplitPen;             //线段颜色
     this.LineDash=null;                                         //当线段类型==2时 可以设置虚线样式
-    this.LineType=1;                                            //线段类型 -1 不画线段 2 虚线 8,9=集合竞价坐标
+    this.LineType=1;                                            //线段类型 -1=不画线段 2=虚线, 8,9=集合竞价坐标
     this.LineWidth;                                             //线段宽度
     this.ExtendData;                                            //扩展属性
                                                                 //百分比 { PriceColor:, PercentageColor:, SplitColor:, Font: }
@@ -13407,6 +13423,9 @@ function IChartFramePainting()
     this.LogoBGColor=g_JSChartResource.FrameLogo.BGColor;
     this.GlobalOption;
 
+    //this.IsDrawLeftBorder;
+    this.IsDrawRightBorder=false;   //是否绘制右侧刻度空白的边框
+
     this.PtInButtons=function(x,y) //坐标是否在按钮上
     {
         for(var i=0;i<this.Buttons.length;++i)
@@ -13486,8 +13505,22 @@ function IChartFramePainting()
         //JSConsole.Chart.Log(`[IChartFramePainting.DrawBorder] left=${left} `);
         if (this.BorderLine==null)
         {
-            this.Canvas.strokeStyle=this.PenBorder;
-            this.Canvas.strokeRect(left,top,width,height);
+            if (this.IsDrawRightBorder)
+            {
+                var xRight=ToFixedPoint(border.ChartWidth);
+                this.Canvas.strokeStyle=this.PenBorder;
+                this.Canvas.strokeRect(left,top,xRight-left,height);
+
+                this.Canvas.beginPath();
+                this.Canvas.moveTo(right,top);
+                this.Canvas.lineTo(right,bottom);
+                this.Canvas.stroke();
+            }
+            else
+            {
+                this.Canvas.strokeStyle=this.PenBorder;
+                this.Canvas.strokeRect(left,top,width,height);
+            }
         }
         else if (IFrameSplitOperator.IsPlusNumber(this.BorderLine)) //单独绘制每个边框
         {
@@ -13521,7 +13554,20 @@ function IChartFramePainting()
             this.Canvas.stroke();
         }
 
-        
+        /*
+        if (this.IsDrawRightBorder)
+        {
+            var xRight=ToFixedPoint(border.ChartWidth);
+            var xLeft=right;
+            this.Canvas.beginPath();
+            this.Canvas.moveTo(xLeft,top);
+            this.Canvas.lineTo(xRight,top);
+            this.Canvas.lineTo(xRight,bottom);
+            this.Canvas.lineTo(xLeft,bottom);
+
+            this.Canvas.stroke();
+        }
+        */
     }
 
     //画标题背景色
@@ -13766,6 +13812,11 @@ function AverageWidthFrame()
 
     this.ButtonTooltip=CloneData(g_JSChartResource.Buttons.Tooltip);
 
+    //Y轴刻度长线
+    this.YLineExtend;    //[0]=左 [1]=右     { Width:5, Color:颜色,  }
+    this.YTextExtend;    //[0]=左 [1]=右     { Align:0=默认  1=左对齐 2=右对齐 }
+    this.YRightTextInfo;
+
     //画图工具刻度
     
     this.DrawPicture={ 
@@ -14004,6 +14055,18 @@ function AverageWidthFrame()
         var isDrawLeft=borderLeft>10 && this.IsShowYText[0]===true && this.YTextPosition[0]!=2;
         var isDrawRight=borderRight>10 && this.IsShowYText[1]===true && this.YTextPosition[1]!=2;
 
+        var rightExtendLine=null;   //右侧延长线
+        if (IFrameSplitOperator.IsNonEmptyArray(this.YLineExtend)) 
+        {
+            rightExtendLine=this.YLineExtend[1];
+        }
+
+        var rightExtendText=null;   //右侧文字设置
+        if (IFrameSplitOperator.IsNonEmptyArray(this.YTextExtend))
+        {
+            rightExtendText=this.YTextExtend[1];
+        }
+
         var yPrev=null; //上一个坐标y的值
         var pixelRatio=GetDevicePixelRatio();
         var itemHeight=(border.BottomEx-border.TopEx)/this.HorizontalInfo.length;
@@ -14017,6 +14080,7 @@ function AverageWidthFrame()
             if (y!=null && yPrev!=null && Math.abs(y-yPrev)<this.MinYDistance) continue;  //两个坐标在近了 就不画了
             
             var yFixed=ToFixedPoint(y);
+            //绘制刻度线
             if (y!=bottom && this.IsShowYLine)
             {
                 var bChangeLineWidth=false;
@@ -14093,7 +14157,7 @@ function AverageWidthFrame()
                 textBaseline=1;
             }
 
-            //坐标信息 左边 间距小于10 不画坐标
+            //左边 坐标信息  间距小于10 不画坐标
             this.Canvas.strokeStyle=item.TextColor;
             this.Canvas.fillStyle=item.TextColor;
 
@@ -14110,7 +14174,7 @@ function AverageWidthFrame()
                 }
             }
 
-            //坐标信息 右边 间距小于10 不画坐标
+            //右边 坐标信息  间距小于10 不画坐标
             if (item.Message[1]!=null && isDrawRight)
             {
                 if (item.Font!=null) this.Canvas.font=item.Font;
@@ -14127,6 +14191,21 @@ function AverageWidthFrame()
                     xText+=lineLength;
                 }
 
+                //右侧延长线
+                if (rightExtendLine && rightExtendLine.Width>1)
+                {
+                    var lineLength=rightExtendLine.Width;
+                    if (rightExtendLine.Color) this.Canvas.strokeStyle=rightExtendLine.Color;
+                    else this.Canvas.strokeStyle=item.LineColor;
+                    this.Canvas.beginPath();
+                    this.Canvas.moveTo(xText,yFixed);
+                    this.Canvas.lineTo(xText+lineLength,yFixed);
+                    this.Canvas.stroke();
+
+                    xText+=lineLength+2;
+                }
+                
+
                 this.Canvas.textAlign="left";
                 if (Array.isArray(item.Message[1]))
                 {
@@ -14169,7 +14248,17 @@ function AverageWidthFrame()
                     if (!rtPreRight || (rtRight && !this.IsTextTopBottomOverlap(rtRight,rtPreRight)))
                     {
                         if (item.TextColor2) this.Canvas.fillStyle=item.TextColor2;
-                        this.Canvas.fillText(item.Message[1],xText+this.YTextPadding[1],yText);
+                        if (rightExtendText && rightExtendText.Align && this.YRightTextInfo)
+                        {
+                            this.Canvas.textAlign="right";
+                            var xRight=this.YRightTextInfo.MainTextWidth+right-this.YTextPadding[1];
+                            this.Canvas.fillText(item.Message[1],xRight,yText);
+                        }
+                        else
+                        {
+                            this.Canvas.fillText(item.Message[1],xText+this.YTextPadding[1],yText);
+                        }
+                        
                         rtPreRight=rtRight;
                     }
                 }
@@ -14178,7 +14267,33 @@ function AverageWidthFrame()
             yPrev=y;
         }
 
-        if (IFrameSplitOperator.IsNonEmptyArray(aryMultiText) && this.MultiTextFormat==1) this.DrawHorizontalMuText(aryMultiText)
+        if (IFrameSplitOperator.IsNonEmptyArray(aryMultiText) && this.MultiTextFormat==1) this.DrawHorizontalMuText(aryMultiText);
+
+        if (isDrawRight && this.IsDrawRightBorder && this.YRightTextInfo)
+        {  
+            var xRight=this.YRightTextInfo.MainTextWidth+right; 
+            xLine=ToFixedPoint(xRight);
+            this.Canvas.strokeStyle=this.PenBorder;
+            this.Canvas.beginPath();
+            this.Canvas.moveTo(xLine,top);
+            this.Canvas.lineTo(xLine,bottom);
+            this.Canvas.stroke();
+
+            if (IFrameSplitOperator.IsNonEmptyArray(this.YRightTextInfo.AryOverlayWidth))
+            {
+                this.Canvas.beginPath();
+                for(var i=0;i<this.YRightTextInfo.AryOverlayWidth.length;++i)
+                {
+                    var width=this.YRightTextInfo.AryOverlayWidth[i];
+                    xRight+=width;
+                    xLine=ToFixedPoint(xRight);
+                    this.Canvas.moveTo(xLine,top);
+                    this.Canvas.lineTo(xLine,bottom);
+                }
+                this.Canvas.stroke();
+
+            }
+        }
     }
 
     //上下区域是否重叠
@@ -14842,7 +14957,9 @@ function AverageWidthFrame()
                 {
                     var value=this.Canvas.measureText(text[i].Text).width;
                     if (value>width) width=value;
-                    aryText.push({Text:text[i].Text, Width:value+2*pixelTatio});
+                    var outItem={ Text:text[i].Text, Width:value+2*pixelTatio };
+                    if (item.TextColor) outItem.TextColor=item.TextColor;
+                    aryText.push(outItem);
                 }
             }
 
@@ -15067,7 +15184,8 @@ function AverageWidthFrame()
                             var textLeft=right-itemText.Width;
                             this.Canvas.fillStyle=bgColor;
                             this.Canvas.fillRect(textLeft,bgTop,itemText.Width,textHeight);  //文本背景区域
-                            this.Canvas.fillStyle = item.TextColor;
+                            if (itemText.TextColor) this.Canvas.fillStyle=itemText.TextColor;
+                            else this.Canvas.fillStyle = item.TextColor;
                             this.Canvas.fillText(itemText.Text, textLeft + 1*pixelTatio, yText);
                             if (i==0) this.DrawLine(left,textLeft,yText,item.LineColor,item.LineType,item);
                             yText+=textHeight+1*pixelTatio;
@@ -15179,7 +15297,8 @@ function AverageWidthFrame()
                             {
                                 this.Canvas.fillStyle=item.LineColor;
                                 this.Canvas.fillRect(textLeft,bgTop,itemText.Width,textHeight);
-                                this.Canvas.fillStyle = item.TextColor;
+                                if (itemText.TextColor) this.Canvas.fillStyle=itemText.TextColor;
+                                else this.Canvas.fillStyle = item.TextColor;
                                 this.Canvas.fillText(itemText.Text, textLeft + 1*pixelTatio, yText);
                             }
                            
@@ -18773,8 +18892,13 @@ function OverlayKLineFrame()
     this.Title=null;
     this.TitleColor=g_JSChartResource.OverlayFrame.TitleColor;
     this.TitleFont=g_JSChartResource.OverlayFrame.TitleFont;
+    this.IsShowTitle=true;
 
     this.IsYDrawMainFrame=false;  //Y轴自定刻度绘制在主图框架上
+    this.BlankWidth=0;
+    this.Style=0;       //0=Y轴在BlankWidth 1=Y轴在左边
+
+    this.YLineExtend=[ { Width:2 }, null];    //[0]=左 [1]=右     { Width:5, Color:颜色,  }
 
     this.Buttons=[];
 
@@ -18814,21 +18938,69 @@ function OverlayKLineFrame()
         this.XSplit=false;
     }
 
+
+    //Y轴刻度线 x坐标
+    this.GetXHorizontal=function()
+    {
+        var border=this.ChartBorder.GetBorder();
+        var x=border.Right;
+        x+=this.RightOffset;
+
+        if (this.Style==1)
+        {
+
+        }
+        else
+        {
+            x+=this.BlankWidth;
+        }
+
+        return x;
+    }
+
+    this.GetHorizontalWidth=function()
+    {
+        var width=null;
+        if (this.YRightTextInfo && IFrameSplitOperator.IsNumber(this.TextWidthIndex))
+            width=this.YRightTextInfo.AryOverlayWidth[this.TextWidthIndex];
+
+        return width;
+    }
+
     this.DrawTitle=function()   //画标题
     {
+        if (!this.IsShowTitle) return;
         if (!this.Title) return;
         var border=this.ChartBorder.GetBorder();
         var top = this.ChartBorder.GetTopTitle();
         var bottom = border.Bottom;
-        var right=border.Right;
-        right+=this.RightOffset;
-
+        
+        var xText=this.GetXHorizontal();
+        var leftLine=null, rightLine=null;
+        if (IFrameSplitOperator.IsNonEmptyArray(this.YLineExtend))
+        {
+            rightLine=this.YLineExtend[1];
+            leftLine=this.YLineExtend[0];
+        }
+        
+        if (this.Style==1)
+        {
+            this.Canvas.textBaseline="bottom";
+            if (rightLine && rightLine.Width>0) xText+=rightLine.Width+1;
+            else xText+=1;
+        }
+        else
+        {
+            this.Canvas.textBaseline="top";
+            if (leftLine && leftLine.Width>0) xText-=leftLine.Width;
+            else xText-=2;
+        }
+        
+        var yText=top+(bottom-top)/2;
         this.Canvas.fillStyle=this.TitleColor;
         this.Canvas.font=this.TitleFont;
         this.Canvas.textAlign="center";
-        this.Canvas.textBaseline="top";
-
-        var xText=right-2,yText=top+(bottom-top)/2;
+       
         this.Canvas.save();
         this.Canvas.translate(xText, yText);
         this.Canvas.rotate(90 * Math.PI / 180);
@@ -18867,10 +19039,18 @@ function OverlayKLineFrame()
                 if (item.Font!=null) this.Canvas.font=item.Font;
 
                 textWidth=this.Canvas.measureText(item.Message[1]).width;
+                if (this.YTextPadding && IFrameSplitOperator.IsNumber(this.YTextPadding[1]))
+                    textWidth+=this.YTextPadding[1];
                 if (width.Right<textWidth) width.Right=textWidth;
             }
         }
 
+        if (IFrameSplitOperator.IsNonEmptyArray(this.YLineExtend))
+        {
+            var line=this.YLineExtend[1];
+            if (line && line.Width>0) width.Right+=line.Width;
+        }
+
         return { TextWidth:width };
     }
 
@@ -18910,7 +19090,23 @@ function OverlayKLineFrame()
         var top = this.ChartBorder.GetTopTitle();
         var borderRight=this.ChartBorder.Right;
         right+=this.RightOffset;
+        var xLine=this.GetXHorizontal();
+        if (IFrameSplitOperator.IsNumber(this.BlankWidth)) right+=this.BlankWidth;
+
+        var rightExtendText=null;   //右侧文字设置
+        if (IFrameSplitOperator.IsNonEmptyArray(this.YTextExtend))
+        {
+            rightExtendText=this.YTextExtend[1];
+        }
+
+        var leftLine=null, rightLine=null;
+        if (IFrameSplitOperator.IsNonEmptyArray(this.YLineExtend))
+        {
+            rightLine=this.YLineExtend[1];
+            leftLine=this.YLineExtend[0];
+        }
 
+        var rightWidth=this.GetHorizontalWidth();  //右侧宽度
         var yPrev=null; //上一个坐标y的值
         for(var i=this.HorizontalInfo.length-1; i>=0; --i)  //从上往下画分割线
         {
@@ -18922,11 +19118,24 @@ function OverlayKLineFrame()
             else if (y <= top + 2) this.Canvas.textBaseline = 'top';
             else this.Canvas.textBaseline = "middle";
 
-            this.Canvas.strokeStyle=this.PenBorder;
-            this.Canvas.beginPath();
-            this.Canvas.moveTo(right-2,ToFixedPoint(y));
-            this.Canvas.lineTo(right,ToFixedPoint(y));
-            this.Canvas.stroke();
+        
+            if (leftLine && leftLine.Width>0)   //左边
+            {
+                this.Canvas.strokeStyle=this.PenBorder;
+                this.Canvas.beginPath();
+                this.Canvas.moveTo(xLine-leftLine.Width,ToFixedPoint(y));
+                this.Canvas.lineTo(xLine,ToFixedPoint(y));
+                this.Canvas.stroke();
+            }
+               
+            if (rightLine && rightLine.Width>0)
+            {
+                this.Canvas.strokeStyle=this.PenBorder;
+                this.Canvas.beginPath();
+                this.Canvas.moveTo(xLine+rightLine.Width,ToFixedPoint(y));
+                this.Canvas.lineTo(xLine,ToFixedPoint(y));
+                this.Canvas.stroke();
+            }
 
             //坐标信息 右边 间距小于10 不画坐标
             if (item.Message[1]!=null && borderRight>10)
@@ -18935,10 +19144,22 @@ function OverlayKLineFrame()
 
                 var text=item.Message[1];
                 if (Array.isArray(item.Message[1])) text=item.Message[1][0];
-               
-                this.Canvas.fillStyle=item.TextColor;
-                this.Canvas.textAlign="left";
-                this.Canvas.fillText(text,right+2,y);
+
+                if (rightExtendText && rightExtendText.Align)
+                {
+                    var textWidth=rightWidth;
+                    this.Canvas.textAlign="right";
+                    var xRight=border.Right+this.RightOffset+textWidth-this.YTextPadding[1];
+                    this.Canvas.fillText(text,xRight,y);
+                }
+                else
+                {
+                    var xText=right+2;
+                    if (rightLine && rightLine.Width>0) xText+=rightLine.Width;
+                    this.Canvas.fillStyle=item.TextColor;
+                    this.Canvas.textAlign="left";
+                    this.Canvas.fillText(text,xText,y);
+                }
             }
 
             yPrev=y;
@@ -18950,10 +19171,8 @@ function OverlayKLineFrame()
     {
         var border=this.ChartBorder.GetBorder();
         var top=border.TopEx;
-        //var left=this.ChartBorder.GetLeft();
-        var right=border.Right;
         var bottom=border.BottomEx;
-        right+=this.RightOffset;
+        var right=this.GetXHorizontal();
 
         this.Canvas.strokeStyle=this.PenBorder;
         this.Canvas.beginPath();
@@ -18999,14 +19218,15 @@ function OverlayKLineFrame()
 
         var border=this.ChartBorder.GetBorder();
         var yButton=border.Top+this.ChartBorder.TitleHeight/2;
-        var xBotton=border.Right+this.RightOffset+this.CloseButton.MerginLeft;
+        var rightWidth=this.GetHorizontalWidth();
+        var xBotton=border.Right+this.RightOffset+rightWidth-this.CloseButton.MerginLeft;
 
-        for(var i=0;i<aryButton.length;++i)
+        for(var i=aryButton.length-1;i>=0;--i)
         {
             var item=aryButton[i];
             var size=item.Style.Size;
             var font=`${size}px ${item.Style.Family}`;
-            var rtButton={ Left:xBotton, Top:yButton-size/2, Right:xBotton+size+item.Style.MerginLeft, Bottom:yButton+size/2, Width:size+item.Style.MerginLeft, Height:size };
+            var rtButton={ Left:xBotton-size-item.Style.MerginLeft, Top:yButton-size/2, Right:xBotton, Bottom:yButton+size/2, Width:size+item.Style.MerginLeft, Height:size };
             var color=this.CloseButton.Color;
             if (moveonPoint && (moveonPoint.X>=rtButton.Left && moveonPoint.X<rtButton.Right && moveonPoint.Y>=rtButton.Top && moveonPoint.Y<=rtButton.Bottom))
             {
@@ -19017,13 +19237,13 @@ function OverlayKLineFrame()
 
             this.Canvas.fillStyle=color;
             this.Canvas.font=font;
-            this.Canvas.textAlign="left";
+            this.Canvas.textAlign="right";
             this.Canvas.textBaseline="middle";
             this.Canvas.fillText(item.Style.Text, xBotton, yButton);
 
             this.Buttons.push({ ID:item.ID, Rect:rtButton });
 
-            xBotton=rtButton.Right;
+            xBotton=rtButton.Left;
         }
     }
 
@@ -20100,7 +20320,7 @@ function SubFrameItem()
     this.Frame;
     this.Height;
     this.OverlayIndex=[];   //叠加指标
-    this.Interval=60;       //子坐标间间距
+    //this.Interval=60;       //子坐标间间距
 }
 
 function OverlayIndexItem()
@@ -20168,8 +20388,11 @@ function HQTradeFrame()
 
     this.AutoLeftBorder=null;       //{ Blank:10 留白宽度, MinWidth:最小宽度 }
     this.AutoRightBorder=null;      //{ Blank:10 留白宽度, MinWidth:最小宽度 } 
-    this.OverlayBlankWidth=40;
-    this.AuotRightWidth;            //右边主坐标刻度宽度
+    this.OverlayBlankWidth=30;
+    this.AuotRightWidth;            //右边主坐标刻度宽度 (自动模式)
+
+    //固定模式右侧宽度
+    this.FixedRightWidth={ Main:60, Overlay:80 };
 
     this.ZoomWindowsInfo=null;      //附图指标缩放,备份信息
     this.ZoomStartWindowIndex=1;    //允许缩放窗口起始位置
@@ -20678,7 +20901,7 @@ function HQTradeFrame()
 
                     overlayItem.Frame.YSplitOperator.Operator();
                     var value=overlayItem.Frame.GetScaleTextWidth();
-
+                    
                     overlayItem.Frame.HorizontalMax=maxValue;
                     overlayItem.Frame.HorizontalMin=minValue;
 
@@ -20735,6 +20958,8 @@ function HQTradeFrame()
             width.OverlayRight+=value;
         }
 
+        width.AryOverlayWidth=overlayWidth;
+
         return width;
     }
 
@@ -20789,59 +21014,104 @@ function HQTradeFrame()
                 }
             }
 
-            if (IFrameSplitOperator.IsNumber(textWidth.Right) && this.AutoRightBorder)
+            if (IFrameSplitOperator.IsNumber(textWidth.Right))
             {
-                var blank=0;
-                if (IFrameSplitOperator.IsNumber(this.AutoRightBorder.Blank)) blank=this.AutoRightBorder.Blank;
-                var value=textWidth.Right+blank;
-                if (IFrameSplitOperator.IsNumber(this.AutoRightBorder.MinWidth))
+                if (this.AutoRightBorder)   //自动调整右侧间距
                 {
-                    if (this.AutoRightBorder.MinWidth>value) value=this.AutoRightBorder.MinWidth;
-                }
+                    var rightTextInfo={ };
+                    var blank=0;
+                    if (IFrameSplitOperator.IsNumber(this.AutoRightBorder.Blank)) blank=this.AutoRightBorder.Blank;
+                    var value=textWidth.Right+blank;
+                    if (IFrameSplitOperator.IsNumber(this.AutoRightBorder.MinWidth))
+                    {
+                        if (this.AutoRightBorder.MinWidth>value) value=this.AutoRightBorder.MinWidth;
+                    }
 
-                this.AuotRightWidth=value;
-                if (IFrameSplitOperator.IsPlusNumber(textWidth.OverlayRight))
-                {
-                    value+=this.OverlayBlankWidth;
                     this.AuotRightWidth=value;
-                    value+=textWidth.OverlayRight;
-                }
+                    rightTextInfo.MainTextWidth=value;  //主图坐标宽度
+                    if (IFrameSplitOperator.IsNonEmptyArray(textWidth.AryOverlayWidth)) rightTextInfo.AryOverlayWidth=textWidth.AryOverlayWidth;
 
-                if (this.GetExtendChartRightWidth)
-                {
-                    var extendWidth=this.GetExtendChartRightWidth();
+                    if (IFrameSplitOperator.IsPlusNumber(textWidth.OverlayRight))
+                    {
+                        this.AuotRightWidth=value;
+                        value+=textWidth.OverlayRight;
+                    }
 
-                    if (this.GetExtendChartByClassName)
+                    if (this.GetExtendChartRightWidth)
                     {
-                        var finder=this.GetExtendChartByClassName("StockChip");
-                        if (finder && finder.Chart) 
+                        var extendWidth=this.GetExtendChartRightWidth();
+
+                        if (this.GetExtendChartByClassName)
                         {
-                            finder.Chart.Left=value;
+                            var finder=this.GetExtendChartByClassName("StockChip");
+                            if (finder && finder.Chart) 
+                            {
+                                finder.Chart.Left=value;
+                            }
                         }
+
+                        value+=extendWidth;
                     }
 
-                    value+=extendWidth;
-                }
+                    if (this.IsHScreen) 
+                    {
+                        if (this.ChartBorder.Bottom!=value) bSizeChange=true;
+                        this.ChartBorder.Bottom=value;
+                    }
+                    else  
+                    {
+                        if (this.ChartBorder.Right!=value) bSizeChange=true;
+                        this.ChartBorder.Right=value;
+                    }
 
-                if (this.IsHScreen) 
-                {
-                    if (this.ChartBorder.Bottom!=value) bSizeChange=true;
-                    this.ChartBorder.Bottom=value;
+                    for(var i=0; i<this.SubFrame.length; ++i)
+                    {
+                        var item=this.SubFrame[i];
+                        if (this.IsHScreen) item.Frame.ChartBorder.Bottom=value;
+                        else item.Frame.ChartBorder.Right=value;
+
+                        item.Frame.ReDrawToolbar=true;
+                        item.Frame.YRightTextInfo=rightTextInfo;
+
+                        for(var j=0;j<item.OverlayIndex.length;++j)
+                        {
+                            var overlayItem=item.OverlayIndex[j];
+                            overlayItem.Frame.YRightTextInfo=rightTextInfo;
+                        }
+                    }
                 }
-                else  
+                else
                 {
-                    if (this.ChartBorder.Right!=value) bSizeChange=true;
-                    this.ChartBorder.Right=value;
-                }
+                    var rightTextInfo={ };
+                    rightTextInfo.MainTextWidth=this.FixedRightWidth.Main;
+                    if (textWidth.OverlayRight==0) //无叠加直接最右边
+                    {
+                        if (this.IsHScreen)
+                            rightTextInfo.MainTextWidth=this.ChartBorder.Bottom;
+                        else 
+                            rightTextInfo.MainTextWidth=this.ChartBorder.Right;
+                    }
+                    else if (IFrameSplitOperator.IsNonEmptyArray(textWidth.AryOverlayWidth))
+                    {
+                        for(var i=0;i<textWidth.AryOverlayWidth.length;++i) 
+                            textWidth.AryOverlayWidth[i]=this.FixedRightWidth.Overlay;
 
-                for(var i=0; i<this.SubFrame.length; ++i)
-                {
-                    var item=this.SubFrame[i];
-                    if (this.IsHScreen) item.Frame.ChartBorder.Bottom=value;
-                    else item.Frame.ChartBorder.Right=value;
+                        rightTextInfo.AryOverlayWidth=textWidth.AryOverlayWidth;
+                    }
+
+                    for(var i=0; i<this.SubFrame.length; ++i)
+                    {
+                        var item=this.SubFrame[i];
+
+                        item.Frame.ReDrawToolbar=true;
+                        item.Frame.YRightTextInfo=rightTextInfo;
 
-                    item.Frame.ReDrawToolbar=true;
-                    item.Interval=this.AuotRightWidth;
+                        for(var j=0;j<item.OverlayIndex.length;++j)
+                        {
+                            var overlayItem=item.OverlayIndex[j];
+                            overlayItem.Frame.YRightTextInfo=rightTextInfo;
+                        }
+                    }
                 }
             }
 
@@ -20859,39 +21129,47 @@ function HQTradeFrame()
             {
                 var rightOffset=this.AuotRightWidth;
 
-                for(var j=0; j<item.OverlayIndex.length; ++j)
+                for(var j=0, index=0; j<item.OverlayIndex.length; ++j)
                 {
                     var overlayItem=item.OverlayIndex[j];
                     //把主坐标部分设置给子坐标下来
                     overlayItem.Frame.DataWidth=item.Frame.DataWidth;
                     overlayItem.Frame.DistanceWidth=item.Frame.DistanceWidth;
                     overlayItem.Frame.XPointCount=item.Frame.XPointCount;
-                    if (overlayItem.ChartPaint.length>0 && overlayItem.Frame) 
-                    {
-                        overlayItem.Frame.RightOffset=rightOffset;
-                        overlayItem.Frame.Draw();
-                        rightOffset+=overlayItem.RightWidth.Width;
-                    }
+                    overlayItem.Frame.RightOffset=rightOffset;
+                    overlayItem.Frame.BlankWidth=0;
+                    overlayItem.Frame.TextWidthIndex=index;
+                    if (IFrameSplitOperator.IsNumber(this.OverlayBlankWidth)) overlayItem.Frame.BlankWidth=this.OverlayBlankWidth;
+                    
+                    overlayItem.Frame.Draw();
+                    rightOffset+=overlayItem.RightWidth.Width;
+                    if (overlayItem.Frame.IsShow) ++index;
                 }
-
             }
             else
             {
-                var rightOffset=item.Interval;
+                var rightOffset=this.FixedRightWidth.Main;
                 if (item.Frame.RightTextMaxWidth>rightOffset) rightOffset=item.Frame.RightTextMaxWidth;
-                for(var j in item.OverlayIndex)
+
+                for(var j =0, index=0; j<item.OverlayIndex.length;++j)
                 {
                     var overlayItem=item.OverlayIndex[j];
                     //把主坐标部分设置给子坐标下来
                     overlayItem.Frame.DataWidth=item.Frame.DataWidth;
                     overlayItem.Frame.DistanceWidth=item.Frame.DistanceWidth;
                     overlayItem.Frame.XPointCount=item.Frame.XPointCount;
-                    if (overlayItem.ChartPaint.length>0 && overlayItem.Frame) 
+                    overlayItem.Frame.RightOffset=rightOffset;
+                    overlayItem.Frame.BlankWidth=0;
+                    overlayItem.Frame.TextWidthIndex=index;
+                    if (IFrameSplitOperator.IsNumber(this.OverlayBlankWidth)) overlayItem.Frame.BlankWidth=this.OverlayBlankWidth;
+
+                    overlayItem.Frame.Draw();
+                    if (overlayItem.Frame.IsShow) 
                     {
-                        overlayItem.Frame.RightOffset=rightOffset;
-                        overlayItem.Frame.Draw();
-                        if (overlayItem.Frame.IsShow) rightOffset+=item.Interval;
+                        rightOffset+=this.FixedRightWidth.Overlay;
+                        ++index;
                     }
+                    
                 }
             }
         }
@@ -21098,6 +21376,7 @@ function HQTradeFrame()
             {
                 var overlayItem=item.OverlayIndex[j];
                 var overlayFrame=overlayItem.Frame;
+                if (!overlayFrame.IsShow) continue;
                 if (overlayFrame.DrawToolbar) overlayFrame.DrawToolbar(moveonPoint, frame.IsMinSize, mouseStatus);
             }
         }
@@ -50583,36 +50862,35 @@ function ChartCorssCursor()
         if (yValueExtend.FrameID>=0)
         {
             var frame=this.Frame.SubFrame[yValueExtend.FrameID];
-            var isAutoRightBorder=false;
-            if (this.Frame.AutoRightBorder) isAutoRightBorder=true;
             var overlayLeft=right;
-            if (isAutoRightBorder) overlayLeft=right+this.Frame.AuotRightWidth;
             this.Canvas.font=this.Font;
-            for(var i in frame.OverlayIndex)
+            for(var i=0; i<frame.OverlayIndex.length; ++i)
             {
                 var item=frame.OverlayIndex[i];
                 if (item.Frame.IsShow===false) continue;
 
-                if (!isAutoRightBorder) overlayLeft+=frame.Interval;
+                overlayLeft=item.Frame.GetXHorizontal();
 
-                if (overlayLeft+30>chartRight) break;
+                //if (overlayLeft+30>chartRight) break;
                 var yValue=item.Frame.GetYData(y);
-
-                for(var i=2;i>=0;--i)
+                var text=IFrameSplitOperator.FormatValueString(yValue,2);
+                var textWidth=this.Canvas.measureText(text).width+4;    //前后各空2个像素
+                
+                /*
+                for(var j=2;j>=0;--j)
                 {
-                    var text=IFrameSplitOperator.FormatValueString(yValue,i);
+                    var text=IFrameSplitOperator.FormatValueString(yValue,j);
                     var textWidth=this.Canvas.measureText(text).width+4;    //前后各空2个像素
                     if (textWidth<frame.Interval) break;
                 }
+                */
 
                 this.Canvas.fillStyle=this.TextBGColor;
-                this.Canvas.fillRect(overlayLeft+2,y-this.TextHeight/2,textWidth,this.TextHeight);
+                this.Canvas.fillRect(overlayLeft+1,y-this.TextHeight/2,textWidth,this.TextHeight);
                 this.Canvas.textAlign="left";
                 this.Canvas.textBaseline="middle";
                 this.Canvas.fillStyle=this.TextColor;
                 this.Canvas.fillText(text,overlayLeft+4,y,textWidth);
-
-                if (isAutoRightBorder) overlayLeft+=item.RightWidth.Width;
             }
         }
 
@@ -66669,6 +66947,14 @@ function JSChartResource()
             if (item.EmptyBGColor) this.FrameLatestPrice.EmptyBGColor = item.EmptyBGColor;
         }
 
+        if (style.OverlayFrame)
+        {
+            var item=style.OverlayFrame;
+            if (style.OverlayFrame.BolderPen) this.OverlayFrame.BolderPen = style.OverlayFrame.BolderPen;
+            if (style.OverlayFrame.TitleColor) this.OverlayFrame.TitleColor = style.OverlayFrame.TitleColor;
+            if (style.OverlayFrame.TitleFont) this.OverlayFrame.TitleFont = style.OverlayFrame.TitleFont;
+        }
+
         if (style.CorssCursorBGColor) this.CorssCursorBGColor = style.CorssCursorBGColor;
         if (style.CorssCursorTextColor) this.CorssCursorTextColor = style.CorssCursorTextColor;
         if (style.CorssCursorTextFont) this.CorssCursorTextFont = style.CorssCursorTextFont;
@@ -68956,7 +69242,6 @@ function KLineChartContainer(uielement,OffscreenElement)
     this.CtrlMoveStep=5;                //Ctrl+(Left/Right) 移动数据个数  
 
     this.CustomShow=null;               //首先显示的K线的起始日期 { Date:日期 PageSize:}
-    this.OverlayIndexFrameWidth=60;     //叠加指标框架宽度
     this.ZoomType=0;                    //缩放模式 0=最右边固定缩放, 1=十字光标两边缩放
     this.IsZoomLockRight=false;         
     this.KLineSize=null;                //{ DataWidth:, }
@@ -69240,6 +69525,7 @@ function KLineChartContainer(uielement,OffscreenElement)
             this.UpdataDataoffset();
             this.UpdatePointByCursorIndex();
             this.UpdateFrameMaxMin();
+            this.ResetFrameXSplit();
             this.Draw();
         }
         else if (id===JSCHART_OPERATOR_ID.OP_GOTO_HOME)
@@ -69695,6 +69981,7 @@ function KLineChartContainer(uielement,OffscreenElement)
     {
         this.UpdataDataoffset();           //更新数据偏移
         this.UpdateFrameMaxMin();          //调整坐标最大 最小值
+        this.ResetFrameXSplit();
         this.Frame.SetSizeChage(true);
         this.Draw();
         this.UpdatePointByCursorIndex();   //更新十字光标位子
@@ -72565,10 +72852,10 @@ function KLineChartContainer(uielement,OffscreenElement)
         }
 
         var subFrame=this.Frame.SubFrame[windowIndex];
-        subFrame.Interval=this.OverlayIndexFrameWidth;
         var overlayFrame=new OverlayIndexItem();
         if (obj.Identify) overlayFrame.Identify=obj.Identify;   //由外部指定id
-        var frame= this.ClassName==='KLineChartHScreenContainer' ? new OverlayKLineHScreenFrame() : new OverlayKLineFrame();
+        //var frame= this.ClassName==='KLineChartHScreenContainer' ? new OverlayKLineHScreenFrame() : new OverlayKLineFrame();
+        var frame=this.CreateOverlayFrame();
         frame.Canvas=this.Canvas;
         frame.MainFrame=subFrame.Frame;
         frame.ChartBorder=subFrame.Frame.ChartBorder;
@@ -72597,11 +72884,18 @@ function KLineChartContainer(uielement,OffscreenElement)
             var item=obj.Frame;
             if (item.Custom) frame.YSplitOperator.Custom=item.Custom;
             if (IFrameSplitOperator.IsBool(item.IsYDrawMainFrame)) frame.IsYDrawMainFrame=item.IsYDrawMainFrame;    //自定义刻度绘制在主图上
-            if (IFrameSplitOperator.IsBool(item.IsShowToolbar)) frame.IsShowToolbar=item.IsShowToolbar;    //自定义刻度绘制在主图上
+            if (IFrameSplitOperator.IsBool(item.IsShowToolbar)) frame.IsShowToolbar=item.IsShowToolbar;             //是否显示工具栏
         }
         
         overlayFrame.Frame=frame;
 
+        var event=this.GetEventCallback(JSCHART_EVENT_ID.ON_CREATE_OVERLAY_FRAME);
+        if (event && event.Callback)
+        {
+            var sendData={ OverlayFrame:overlayFrame, WindowIndex:windowIndex, SubFrame:subFrame };
+            event.Callback(event, sendData, this);
+        }
+
         if (apiItem)
         {
             var apiIndex=new APIScriptIndex(apiItem.Name,apiItem.Script,apiItem.Args,obj, true);
@@ -80408,7 +80702,6 @@ function MinuteChartContainer(uielement,offscreenElement,cacheElement)
         }
 
         var subFrame=this.Frame.SubFrame[windowIndex];
-        subFrame.Interval=this.OverlayIndexFrameWidth;
         var overlayFrame=new OverlayIndexItem();
         if (obj.Identify) overlayFrame.Identify=obj.Identify;   //由外部指定id
         var frame=null;
@@ -115958,12 +116251,14 @@ function OverlayScriptIndex(name,script,args,option)
         var titleIndex=windowIndex+1;
         var titlePaint=hqChart.TitlePaint[titleIndex];
         titlePaint.OverlayIndex.set(this.OverlayIndex.Identify,titleInfo);
-        this.OverlayIndex.Frame.Frame.Title=titleInfo.Title;    //给子框架设置标题
+        
         if (this.OutName && this.OutName.length>0 && this.Arguments && this.Arguments.length>0)
         {
             titlePaint.SetDynamicTitle(this.OutName,this.Arguments, this.OverlayIndex.Identify);
         }
 
+        this.OverlayIndex.Frame.Frame.Title=this.Name;    //给子框架设置标题
+
         for(var i=0; i<this.OutVar.length; ++i)
         {
             let item=this.OutVar[i];
@@ -119834,10 +120129,10 @@ function GetBlackStyle()
             PositionColor:"rgb(101,104,112)"       //持仓
         },
     
-        FrameBorderPen: "rgba(236,236,236,0.13)",     //边框
+        FrameBorderPen: "rgb(47,51,62)",     //边框
         MultiDayBorderPen:"rgba(236,236,236,0.5)",
         FrameSplitPen: "rgba(236,236,236,0.13)",          //分割线
-        FrameSplitTextColor: "rgb(101,104,112)",     //刻度文字颜色
+        FrameSplitTextColor: "rgb(220,220,220)",     //刻度文字颜色
         FrameSplitTextFont: 12*GetDevicePixelRatio() +"px 微软雅黑",        //坐标刻度文字字体
         FrameTitleBGColor: "rgb(0,0,0)",      //标题栏背景色
         OverlayIndexTitleBGColor:'rgba(0,0,0,0.7)', //叠加指标背景色
@@ -119853,8 +120148,15 @@ function GetBlackStyle()
                 SplitColor:"rgb(101,104,112)",
                 Font:14*GetDevicePixelRatio() +"px 微软雅黑"
             }
-        },   
-    
+        }, 
+        
+        //叠加指标框架
+        OverlayFrame:
+        {
+            BolderPen:'rgb(130,130,130)',                       //指标边框线
+            TitleColor:'rgb(181,181,181)',                      //指标名字颜色
+            TitleFont:11*GetDevicePixelRatio() +'px arial',     //指标名字字体
+        },
     
         FrameLatestPrice : {
             TextColor:'rgb(255,255,255)',   //最新价格文字颜色
@@ -130724,7 +131026,7 @@ function HQChartScriptWorker()
 
 
 
-var HQCHART_VERSION="1.1.12684";
+var HQCHART_VERSION="1.1.12692";
 
 function PrintHQChartVersion()
 {