hqchart 1.1.14965 → 1.1.14975

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

@@ -1292,7 +1292,7 @@ LONG := SUM(RC,0);\n\
 DIFF := SMA(LONG,10,1);\n\
 DEA := SMA(LONG,20,1);\n\
 LON : DIFF-DEA;\n\
-LONMA : MA(LON,10);\n\
+LONMA : MA(LON,N);\n\
 LONT : LON, COLORSTICK;'
 
     };
@@ -6972,7 +6972,9 @@ var JSCHART_EVENT_ID=
     ON_RELOAD_RESOURCE:173,
 
     ON_REPORT_DATA_FILTER:174,                  //数据筛选
-    ON_REPORT_SHOW_TOOLTIP:175,                 //报价列表 提示信息
+    ON_REPORT_SHOW_TOOLTIP:175,                 //报价列表 提示信息\
+
+    ON_FORMAT_TVLONGPOSITION_LABEL:176,
 }
 
 var JSCHART_OPERATOR_ID=
@@ -9135,9 +9137,14 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
             {
                 drawPicture.PointStatus=drawPicture.Status;
                 if (this.FinishChartDrawPicturePoint())
+                {
+                    if (drawPicture.IsDrawMain) this.Draw();
                     this.DrawDynamicInfo();
+                }
                 else
+                {
                     bClearDrawPicture=false;
+                }
             }
             else if (drawPicture.Status==20)
             {
@@ -10692,7 +10699,12 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
         {
             var item=this.ChartDrawPicture[i];
             if (item.IsDrawFirst) continue;
-            if (item.IsDrawMain && item.IsDrawMain()) continue;
+            if (item.IsDrawMain && item.IsDrawMain()) 
+            {
+                if (item.MainPartDraw) item.MainPartDraw();
+                continue;
+            }
+
             if (this.SelectChartDrawPicture && this.SelectChartDrawPicture.Guid==item.Guid) continue;   //当前选中在最后画
 
             item.Draw();
@@ -11256,7 +11268,11 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
         {
             var item=this.ChartDrawPicture[i];
             if (item.IsDrawFirst) continue;
-            if (item.IsDrawMain && item.IsDrawMain()) continue;
+            if (item.IsDrawMain && item.IsDrawMain()) 
+            {
+                if (item.MainPartDraw) item.MainPartDraw();
+                continue;
+            }
             if (this.SelectChartDrawPicture &&item.Guid==this.SelectChartDrawPicture.Guid) continue;    //选中画图最后画 确保显示在最外面
 
             item.Draw(moveonPoint, this.LastMouseStatus);
@@ -69275,6 +69291,17 @@ function IChartDrawPicture()
             yText+=labelInfo.LineHeight;
         }
     }
+
+    this.IsActive=function()
+    {
+        if (!this.GetActiveDrawPicture) return false;
+
+        var active=this.GetActiveDrawPicture();
+        if (active.Move.Guid!=this.Guid && active.Select.Guid!=this.Guid && active.MoveOn.Guid!=this.Guid) 
+            return false;
+
+        return true;
+    }
 }
 
 IChartDrawPicture.ColorToRGBA=function(color,opacity)
@@ -69422,6 +69449,8 @@ IChartDrawPicture.ArrayDrawPricture=
     { Name:"TrendAngle", ClassName:"ChartTrendAngle", Create:function() { return new ChartTrendAngle(); }},
     { Name:"ArrowMarker", ClassName:"ChartArrowMarker", Create:function() { return new ChartArrowMarker(); } },
     { Name:"BarsPattern", ClassName:"ChartBarsPattern", Create:function() { return new ChartBarsPattern(); } },
+    { Name:"TVLongPosition", ClassName:"ChartDrawTVLongPosition", Create:function() { return new ChartDrawTVLongPosition(); } },
+    { Name:"TVShortPosition", ClassName:"ChartDrawTVShortPositionn", Create:function() { return new ChartDrawTVShortPosition(); } },
 ];
 
 IChartDrawPicture.MapIonFont=new Map(
@@ -79392,6 +79421,500 @@ function ChartBarsPattern()
     }
 }
 
+function ChartDrawTVLongPosition()
+{
+    this.newMethod=IChartDrawPicture;   //派生
+    this.newMethod();
+    delete this.newMethod;
+
+    this.ClassName='ChartDrawTVLongPosition';
+    this.PointCount=2;  //起始2个点 画完4个点
+   
+    this.TopAreaConfig=CloneData(g_JSChartResource.ChartDrawTVLongPosition.TopArea);
+    this.BottomAreaConfig=CloneData(g_JSChartResource.ChartDrawTVLongPosition.BottomArea);
+    this.LabelConfig=CloneData(g_JSChartResource.ChartDrawTVLongPosition.Label);
+    
+    //内部变量
+    this.AryRectArea=[];
+    
+    this.GetXYCoordinate=this.GetXYCoordinate_default;
+    this.SetOption_Backup=this.SetOption;
+    this.PointToValue_Backup=this.PointToValue;
+
+    this.SetOption=function(option)
+    {
+        this.SetOption_Backup();
+
+        if (option)
+        {
+           
+        }
+    }
+    
+    this.PointToValue=function()
+    {
+        //拖拽完成 把点移动到线段头尾
+        if (this.Frame.IsHScreen)
+        {
+            this.Point[1].X=this.Point[0].X;
+        }
+        else
+        {
+            this.Point[1].Y=this.Point[0].Y;
+        }
+        
+        this.PointToValue_Backup();
+    }
+
+    //0-10 鼠标对应的点索引   100=鼠标在正个图形上  -1 鼠标不在图形上
+    this.IsPointIn=function(x,y, option)
+    {
+        if (this.Status!=10) return -1;
+
+        var value=this.IsPointInXYValue(x,y,option);
+        if (value>=0) return value;
+
+        for(var i=0;i<this.AryRectArea.length;++i)
+        {
+            var item=this.AryRectArea[i];
+            if (!item) continue;
+
+            if (Path2DHelper.PtInRect(x, y, item.Rect))
+            {
+                return item.ID;
+            }
+        }
+
+        return -1;
+    }
+
+    this.OnFinish=function()
+    {
+        if (!IFrameSplitOperator.IsNonEmptyArray(this.Value)) return false;
+
+        if (!this.Frame) return false;
+        var data=this.Frame.Data;
+        if (!data) return false;
+
+        var firstPoint=this.Point[0];
+        var firstValue=this.Value[0];
+        var entryPrice=firstValue.YValue;
+        
+        var topPrice=entryPrice*(1+0.05);
+        var bottomPrice=entryPrice*(1-0.05);
+
+        this.Value[2]={ XValue:firstValue.XValue, YValue:topPrice };
+        this.Value[3]={ XValue:firstValue.XValue, YValue:bottomPrice };
+        if (firstValue.DateTime)
+        {
+            var item=firstValue.DateTime;
+            this.Value[2].DateTime={ Date:item.Date, Time:item.Time };
+            this.Value[3].DateTime={ Date:item.Date, Time:item.Time };
+        }
+
+        this.Point[2]={ X:firstPoint.X, Y:this.Frame.GetYFromData(topPrice,false)};
+        this.Point[3]={ X:firstPoint.X, Y:this.Frame.GetYFromData(bottomPrice,false)};
+        
+        this.PointCount=4;
+    }
+
+    this.IsDrawMain=function()  //选中绘制在动态绘图上， 没有选中绘制在背景上
+    {
+        if (!this.GetActiveDrawPicture) return true;
+
+        var active=this.GetActiveDrawPicture();
+        if (active.Select.Guid==this.Guid) return false;
+
+        return true;
+    }
+
+    this.IsSelected=function()
+    {
+        if (!this.GetActiveDrawPicture) return false;
+
+        var active=this.GetActiveDrawPicture();
+        //console.log(`[IsSelected] Select=${active.Select.Guid} MoveOn=${active.MoveOn.Guid}`);
+        if (active.Select.Guid==this.Guid || active.MoveOn.Guid==this.Guid) return true;
+
+        return false;
+    }
+
+    //未选中 作为背景色绘制
+    this.MainDraw=function()
+    {
+        this.AryRectArea=[]
+        if (this.IsFrameMinSize()) return;
+
+        //0=开始画 1=完成第1个点  2=完成第2个点 3=完成第3个点  10=完成 20=移动)
+        if (this.Status!=10 && this.Status!=20) return;
+
+        var drawPoint=this.CalculateDrawPoint( {IsCheckX:true, IsCheckY:true} );
+        if (!drawPoint) return;
+        if (drawPoint.length<2) return;
+        this.IsHScreen=this.Frame.IsHScreen;
+        if (this.IsHScreen) return;
+
+        this.ClipFrame();
+
+        this.ChartBorder=this.Frame.ChartBorder;
+        this.DrawArea(drawPoint);
+
+        this.Canvas.restore();
+    }
+
+    //鼠标在上面 动态绘制点和文字信息
+    this.MainPartDraw=function()
+    {
+        if (this.IsFrameMinSize()) return;
+        if (this.Status!=10 && this.Status!=20) return;
+
+        var drawPoint=this.CalculateDrawPoint( {IsCheckX:true, IsCheckY:true} );
+        if (!drawPoint) return;
+        if (drawPoint.length<2) return;
+        this.IsHScreen=this.Frame.IsHScreen;
+        if (this.IsHScreen) return;
+
+        this.ClipFrame();
+
+        this.ChartBorder=this.Frame.ChartBorder;
+        this.DrawLabel(drawPoint);
+        this.DrawPoint(drawPoint);
+
+        this.Canvas.restore();
+    }
+
+    this.Draw=function()
+    {
+        this.AryRectArea=[]
+        if (this.IsFrameMinSize()) return;
+
+        var drawPoint=this.CalculateDrawPoint( {IsCheckX:true, IsCheckY:true} );
+        if (!drawPoint) return;
+        if (drawPoint.length<2) return;
+        this.IsHScreen=this.Frame.IsHScreen;
+        if (this.IsHScreen) return;
+
+        this.ClipFrame();
+        this.ChartBorder=this.Frame.ChartBorder;
+
+        if (this.Status==10 || this.Status==20)    //0=开始画 1=完成第1个点  2=完成第2个点 3=完成第3个点  10=完成 20=移动)
+        {
+            this.DrawArea(drawPoint);
+            this.DrawLabel(drawPoint);
+            this.DrawPoint(drawPoint);
+        }
+        else
+        {
+            var ptStart=drawPoint[0];
+            var ptEnd=drawPoint[1];
+            this.Canvas.strokeStyle=this.LineColor;
+            this.DrawVerticalLine(ptStart,ptEnd);
+        }
+
+        this.Canvas.restore();
+    }
+
+    this.DrawVerticalLine=function(ptStart, ptEnd)
+    {
+        var data=this.Frame.Data;
+        if (this.IsHScreen)
+        {
+            var left=this.ChartBorder.GetLeft();
+            var right=this.ChartBorder.GetRight();
+            var xValue=Math.round(this.Frame.GetXData(ptStart.Y,false))+data.DataOffset;
+            if (xValue<0) xValue=0;
+            else if (xValue>=data.Data.length) xValue=data.Data.length-1;
+            var yStart=this.Frame.GetXFromIndex(xValue-data.DataOffset,false);
+
+            xValue=Math.round(this.Frame.GetXData(ptEnd.Y,false))+data.DataOffset;
+            if (xValue<0) xValue=0;
+            else if (xValue>=data.Data.length) xValue=data.Data.length-1;
+            var yEnd=this.Frame.GetXFromIndex(xValue-data.DataOffset,false);
+
+            this.Canvas.beginPath();
+            this.Canvas.moveTo(left,yStart);
+            this.Canvas.lineTo(right,yStart);
+    
+            this.Canvas.moveTo(left,yEnd);
+            this.Canvas.lineTo(right,yEnd);
+            this.Canvas.stroke();
+
+            this.Canvas.beginPath();
+            this.Canvas.moveTo(ptStart.X,yStart);
+            this.Canvas.lineTo(ptStart.X,yEnd);
+            this.Canvas.stroke();
+        }
+        else
+        {
+            var top=this.ChartBorder.GetTopEx();
+            var bottom=this.ChartBorder.GetBottomEx();
+            
+            var xValue=Math.round(this.Frame.GetXData(ptStart.X,false))+data.DataOffset;
+            if (xValue<0) xValue=0;
+            else if (xValue>=data.Data.length) xValue=data.Data.length-1;
+            var xStart=this.Frame.GetXFromIndex(xValue-data.DataOffset,false);
+    
+            xValue=Math.round(this.Frame.GetXData(ptEnd.X,false))+data.DataOffset;
+            if (xValue<0) xValue=0;
+            else if (xValue>=data.Data.length) xValue=data.Data.length-1;
+            var xEnd=this.Frame.GetXFromIndex(xValue-data.DataOffset,false);
+    
+            this.Canvas.beginPath();
+            this.Canvas.moveTo(xStart,top);
+            this.Canvas.lineTo(xStart,bottom);
+    
+            this.Canvas.moveTo(xEnd,top);
+            this.Canvas.lineTo(xEnd,bottom);
+            this.Canvas.stroke();
+    
+            this.Canvas.beginPath();
+            this.Canvas.moveTo(xStart,ptStart.Y);
+            this.Canvas.lineTo(xEnd,ptStart.Y);
+            this.Canvas.stroke();
+        }
+    }
+
+    this.GetCursorType=function(ptIndex)
+    {
+        if (ptIndex==100) return "pointer";
+        else if (ptIndex==0) return "move";
+        else if (ptIndex==1) return "ew-resize";
+        else if (ptIndex==2 || ptIndex==3) return "ns-resize";
+
+        return null;
+    }
+
+    this.DrawArea=function(drawPoint)
+    {
+        var ptCenter=drawPoint[0];
+        var ptRight=drawPoint[1]
+        var ptTop=drawPoint[2];
+        var ptBottom=drawPoint[3];
+        var bSelected=this.IsSelected();
+
+        var rtTopArea={ Left:ptCenter.X, Top: ptTop.Y, Right:ptRight.X, Bottom:ptCenter.Y};
+        rtTopArea.Width=rtTopArea.Right-rtTopArea.Left;
+        rtTopArea.Height=rtTopArea.Bottom-rtTopArea.Top;
+        
+        this.Canvas.fillStyle=bSelected ? this.TopAreaConfig.SelectedAreaColor: this.TopAreaConfig.AreaColor;
+        this.Canvas.beginPath();
+        this.Canvas.fillRect(rtTopArea.Left,rtTopArea.Top,rtTopArea.Width,rtTopArea.Height);
+        this.AryRectArea[0]={ ID:100, Rect:rtTopArea };
+
+        var rtBottomArea={Left:ptCenter.X, Top: ptCenter.Y, Right:ptRight.X, Bottom:ptBottom.Y};
+        rtBottomArea.Width=rtBottomArea.Right-rtBottomArea.Left;
+        rtBottomArea.Height=rtBottomArea.Bottom-rtBottomArea.Top;
+        this.Canvas.fillStyle=bSelected? this.BottomAreaConfig.SelectedAreaColor:this.BottomAreaConfig.AreaColor;
+        this.Canvas.beginPath();
+        this.Canvas.fillRect(rtBottomArea.Left,rtBottomArea.Top,rtBottomArea.Width,rtBottomArea.Height);
+        this.AryRectArea[1]={ ID:100, Rect:rtBottomArea };
+
+        //线段
+        this.Canvas.strokeStyle=this.LineColor;
+        this.Canvas.beginPath();
+        this.Canvas.moveTo(ptCenter.X,ToFixedPoint(ptCenter.Y));
+        this.Canvas.lineTo(ptRight.X,ToFixedPoint(ptRight.Y));
+        this.Canvas.stroke();
+    }
+
+    this.DrawLabel=function(drawPoint)
+    {
+        if (!this.IsActive()) return;   //激活状态下才显示
+
+        var aryLabel=this.FormatLabelText(drawPoint);
+        if (!IFrameSplitOperator.IsNonEmptyArray(aryLabel)) return;
+
+        this.TextFontHeight=this.GetFontHeight(this.LabelConfig.Font,"擎");
+
+        for(var i=0;i<aryLabel.length;++i)
+        {
+            var item=aryLabel[i];
+            if (!IFrameSplitOperator.IsNonEmptyArray(item.AryText)) continue;
+
+            this.CalculateLabelSize(item);
+            this.DrawLabelItem(item, drawPoint);
+        }
+    }
+
+    this.DrawLabelItem=function(lableItem, drawPoint)
+    {
+        var ptCenter=drawPoint[0];
+        var ptRight=drawPoint[1];
+        var ptTop=drawPoint[2];
+        var ptBottom=drawPoint[3];
+        var clientWidth=ptRight.X-ptCenter.X;
+        var config=this.LabelConfig;
+        var margin=config.Margin;
+
+        var rtText={ Width:lableItem.Width+margin.Left+margin.Right, Height:lableItem.Height+margin.Top+margin.Bottom };
+        if (lableItem.Type==0)  //中间
+        {
+            rtText.Left=ptCenter.X+clientWidth/2-rtText.Width/2;
+            rtText.Right=rtText.Left+rtText.Width;
+            rtText.Top=ptCenter.Y-rtText.Height/2;
+            rtText.Bottom=rtText.Top+rtText.Height;
+        }
+        else if (lableItem.Type==1) //顶部
+        {
+            rtText.Left=ptCenter.X+clientWidth/2-rtText.Width/2;
+            rtText.Right=rtText.Left+rtText.Width;
+            rtText.Top=ptTop.Y-rtText.Height;
+            rtText.Bottom=rtText.Top+rtText.Height;
+        }
+        else if (lableItem.Type==2)
+        {
+            rtText.Left=ptCenter.X+clientWidth/2-rtText.Width/2;
+            rtText.Right=rtText.Left+rtText.Width;
+            rtText.Top=ptBottom.Y;
+            rtText.Bottom=rtText.Top+rtText.Height;
+        }
+        else
+        {
+            return;
+        }
+        
+        this.Canvas.fillStyle=lableItem.BGColor;
+        this.Canvas.fillRect(rtText.Left, rtText.Top, rtText.Width, rtText.Height);
+
+        this.Canvas.textAlign = 'left';
+        this.Canvas.textBaseline = 'bottom';
+        this.Canvas.fillStyle=lableItem.TextColor;
+        var x=rtText.Left+margin.Left;
+        var y=rtText.Top+margin.Top+this.TextFontHeight;
+        for(var i=0;i<lableItem.AryText.length;++i)
+        {
+            var item=lableItem.AryText[i];
+            var xText=x;
+            var yText=y;
+            if (IFrameSplitOperator.IsNumber(item.YOffset)) yText+=item.YOffset;
+           
+            this.Canvas.fillText(item.Text, xText, yText);
+
+            y+=this.TextFontHeight;
+        }
+    }
+
+    this.FormatLabelText=function(drawPoint)
+    {
+        if (this.HQChart)
+        {
+            var event=this.HQChart.GetEventCallback(JSCHART_EVENT_ID.ON_FORMAT_TVLONGPOSITION_LABEL);
+            if (event && event.Callback)
+            {
+                var sendData={ Frame:this.Frame, AryLabel:null, AryPoint:drawPoint, PreventDefault:false };
+                event.Callback(event, sendData, this);
+                if (sendData.PreventDefault) return sendData.AryLabel;
+            }
+        }
+
+        var ptCenter=drawPoint[0];
+        var ptTop=drawPoint[2];
+        var ptBottom=drawPoint[3];
+        var aryData=[];
+        var yValue=this.Frame.GetYData(ptCenter.Y,false);
+        aryData.push(
+        { 
+            Type:0, 
+            AryText:
+            [
+                { Text:`Open: ${yValue.toFixed(2)}`}, 
+                //{ Text:"第2行:xxx"} 
+            ], 
+            BGColor:"rgb(112,128,144)", TextColor:"rgb(255,255,255)" 
+        });
+
+        var yValue=this.Frame.GetYData(ptTop.Y,false);
+        aryData.push({ Type:1, AryText:[{ Text:`Target: ${yValue.toFixed(2)}`, YOffset:-1 } ], BGColor:this.TopAreaConfig.TextBGColor, TextColor:this.TopAreaConfig.TextColor });
+
+        var yValue=this.Frame.GetYData(ptBottom.Y,false);
+        aryData.push({ Type:2, AryText:[{ Text:`Stop: ${yValue.toFixed(2)}`, YOffset:-1 } ], BGColor:this.BottomAreaConfig.TextBGColor, TextColor:this.BottomAreaConfig.TextColor });
+
+        return aryData;
+    }
+
+    this.CalculateLabelSize=function(lableItem)
+    {
+        lableItem.Width=0;
+        lableItem.Height=0;
+        for(var i=0;i<lableItem.AryText.length;++i)
+        {
+            var item=lableItem.AryText[i];
+            var textWidth=this.Canvas.measureText(item.Text).width;
+
+            item.TextWidth=textWidth;
+            if (lableItem.Width<textWidth) lableItem.Width=textWidth;
+            lableItem.Height+=this.TextFontHeight;
+        }
+    }
+
+    this.Move=function(xStep,yStep)
+    {
+        if (this.Status!=20) return false;
+        if (!this.Frame) return false;
+        var data=this.Frame.Data;
+        if (!data) return false;
+
+        if (this.MovePointIndex==100)    //整体移动
+        {
+            for(var i=0; i<this.Point.length;++i)
+            {
+                var item= this.Point[i];
+                item.X+=xStep;
+                item.Y+=yStep;
+            }
+        }
+        else if (this.MovePointIndex===0)
+        {
+            for(var i=0;i<this.Point.length;++i)
+            {
+                var item=this.Point[i];
+                if (i==0)
+                {
+                    item.X+=xStep;
+                    item.Y+=yStep;
+                }
+                else if (i==1)
+                {
+                    item.Y+=yStep;
+                }
+                else if (i==2 || i==3)
+                {
+                    item.X+=xStep;
+                }
+            }
+        }
+        else if (this.MovePointIndex==1)
+        {
+            this.Point[1].X+=xStep;
+        }
+        else if (this.MovePointIndex==2)
+        {
+            var ptCenter=this.Point[0];
+            var item=this.Point[2];
+            if (item.Y+yStep<ptCenter.Y) item.Y+=yStep;
+        }
+        else if (this.MovePointIndex==3)
+        {
+            var ptCenter=this.Point[0];
+            var item=this.Point[3];
+            if (item.Y+yStep>ptCenter.Y) item.Y+=yStep;
+        }
+
+    }
+}
+
+
+function ChartDrawTVShortPosition()
+{
+    this.newMethod=ChartDrawTVLongPosition;   //派生
+    this.newMethod();
+    delete this.newMethod;
+
+    this.ClassName='ChartDrawTVShortPosition';
+    this.TopAreaConfig=CloneData(g_JSChartResource.ChartDrawTVLongPosition.BottomArea);
+    this.BottomAreaConfig=CloneData(g_JSChartResource.ChartDrawTVLongPosition.TopArea);
+}
+
 
 function ChartDrawStorage()
 {
@@ -80461,6 +80984,31 @@ function JSChartResource()
         DownColor:"rgb(25,158,0)"
     }
 
+    this.ChartDrawTVLongPosition=
+    {
+        TopArea:
+        {
+            AreaColor:"rgba(214, 234, 230,0.8)",
+            SelectedAreaColor:"rgba(214, 234, 230,0.55)",
+            TextBGColor:"rgb(80, 150, 130)",
+            TextColor:"rgb(255,255,255)"
+        },
+
+        BottomArea:
+        {
+            AreaColor:"rgb(243, 217, 218,0.8)",
+            SelectedAreaColor:"rgba(243, 217, 218,0.55)",
+            TextBGColor:"rgb(214, 75, 75)",
+            TextColor:"rgb(255,255,255)"
+        },
+
+        Label:
+        {
+            Font:`${12*GetDevicePixelRatio()}px 微软雅黑`,
+            Margin:{ Left:2, Top:2, Bottom:2, Right:2 },
+        }
+    }
+
     //手机端tooltip
     this.TooltipPaint = {
         BGColor:'rgba(250,250,250,0.8)',    //背景色
@@ -82288,6 +82836,42 @@ function JSChartResource()
 
         if (style.IndexLock) this.SetIndexLock(style.IndexLock);
         if (style.ChartScatterPlotV2) this.SetChartScatterPlotV2(style.ChartScatterPlotV2);
+
+        if (style.ChartDrawTVLongPosition) this.SetChartDrawTVLongPosition(style.ChartDrawTVLongPosition);
+    }
+
+
+    this.SetChartDrawTVLongPosition=function(style)
+    {
+        if (style.TopArea)
+        {
+            var item=style.TopArea;
+            var dest=this.ChartDrawTVLongPosition.TopArea;
+
+            if (item.AreaColor) dest.AreaColor=item.AreaColor;
+            if (item.SelectedAreaColor) dest.SelectedAreaColor=item.SelectedAreaColor;
+            if (item.TextBGColor) dest.TextBGColor=item.TextBGColor;
+            if (item.TextColor) dest.BorderColor=item.TextColor;
+        }
+
+        if (style.BottomArea)
+        {
+            var item=style.BottomArea;
+            var dest=this.ChartDrawTVLongPosition.BottomArea;
+
+            if (item.AreaColor) dest.AreaColor=item.AreaColor;
+            if (item.SelectedAreaColor) dest.SelectedAreaColor=item.SelectedAreaColor;
+            if (item.TextBGColor) dest.TextBGColor=item.TextBGColor;
+            if (item.TextColor) dest.BorderColor=item.TextColor;
+        }
+
+        if (style.Label)
+        {
+            var item=style.Label;
+            var dest=this.ChartDrawTVLongPosition.Label;
+            if (item.Font) dest.Font=item.Font;
+            CopyMarginConfig(dest.Margin, item.Margin);
+        }
     }
 
 
@@ -90044,7 +90628,7 @@ function KLineChartContainer(uielement,OffscreenElement, cacheElement)
         if (item)
         {
             drawPicture=item.Create();
-            if (drawPicture.ClassName=='ChartDrawPictureText' || drawPicture.ClassName=="ChartDrawVolProfile") drawPicture.HQChart=this;
+            drawPicture.HQChart=this;
         }
 
         if (!drawPicture)    //iconfont图标
@@ -108007,6 +108591,15 @@ Path2DHelper.FormatRadian=function(angle)
 }
 
 
+Path2DHelper.PtInRect=function(x, y, rect)
+{
+    if (x>=rect.Left && x<=rect.Right && y>=rect.Top && y<=rect.Bottom) return true;
+
+    return false;
+}
+
+
+
 
 
 
@@ -135394,6 +135987,31 @@ function GetBlackStyle()
     
             Text:{ Color: "rgb(0,0,0)" , Family:'Arial', FontMaxSize:18, FontMinSize:6 },  //文字
         },
+
+        ChartDrawTVLongPosition:
+        {
+            TopArea:
+            {
+                AreaColor:"rgba(34, 52, 48,0.8)",
+                SelectedAreaColor:"rgba(34, 52, 48,0.55)",
+                TextBGColor:"rgb(80, 150, 130)",
+                TextColor:"rgb(255,255,255)"
+            },
+
+            BottomArea:
+            {
+                AreaColor:"rgb(63, 35, 37,0.8)",
+                SelectedAreaColor:"rgba(63, 35, 37,0.55)",
+                TextBGColor:"rgb(214, 75, 75)",
+                TextColor:"rgb(255,255,255)"
+            },
+
+            Label:
+            {
+                Font:`${12*GetDevicePixelRatio()}px 微软雅黑`,
+                Margin:{ Left:2, Top:2, Bottom:2, Right:2 },
+            }
+        },
     
         //区间选择
         RectSelect:
@@ -155320,6 +155938,9 @@ function JSDialogDrawTool()
                 { Title: "线形回归线", ClassName:'hqchart_drawtool icon-linear_3',  Type:0, Data:{ ID:"线形回归线" }  },
                 { Title: "线形回归带", ClassName:'hqchart_drawtool icon-linear_1',  Type:0, Data:{ ID:"线形回归带" }  },
                 { Title: "延长线形回归带", ClassName:'hqchart_drawtool icon-linear_2',  Type:0, Data:{ ID:"延长线形回归带" }  },
+
+                { Title: "Long Position", ClassName:'hqchart_drawtool icon-chart-long-position',  Type:0, Data:{ ID:"TVLongPosition" }  },
+                { Title: "Short Position", ClassName:'hqchart_drawtool icon-chart-short-position',  Type:0, Data:{ ID:"TVShortPosition" }  },
             ]
         },
         { 
@@ -162918,7 +163539,7 @@ function HQChartScriptWorker()
 
 
 
-var HQCHART_VERSION="1.1.14964";
+var HQCHART_VERSION="1.1.14974";
 
 function PrintHQChartVersion()
 {