hqchart 1.1.13600 → 1.1.13614

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hqchart",
-  "version": "1.1.13600",
+  "version": "1.1.13614",
   "description": "HQChart - H5, 微信小程序 沪深/港股/数字货币/期货/美股 K线图(kline),走势图,缩放,拖拽,十字光标,画图工具,截图,筹码图. 分析家语法,通达信语法,(麦语法),第3方数据对接",
   "main": "lib/main.js",
   "scripts": {

package/src/jscommon/umychart.DialogDrawTool.js

@@ -112,6 +112,7 @@ function JSDialogDrawTool()
             [
                 { Title: '价格范围', ClassName: 'hqchart_drawtool icon-shijianfanwei', Type:0, Data:{ ID:"PriceRange" }  },
                 { Title: '时间范围', ClassName: 'hqchart_drawtool icon-jiagefanwei', Type:0, Data:{ ID:"DateRange" }  },
+                { Title: "价格和时间范围", ClassName:"hqchart_drawtool icon-jiagefanwei", Type:0, Data:{ ID:"DatePriceRange" } },
                 { Title: "监测线", ClassName:"hqchart_drawtool icon-jiance", Type:0, Data:{ ID:"MonitorLine"} },
             ]
         },

package/src/jscommon/umychart.js

@@ -692,7 +692,8 @@ function JSChart(divElement, bOffscreen, bCacheCanvas)
 
             if (IFrameSplitOperator.IsNumber(item.TitleHeight)) chart.Frame.SubFrame[i].Frame.ChartBorder.TitleHeight=item.TitleHeight;
             else item.TitleHeight=chart.Frame.SubFrame[i].Frame.ChartBorder.TitleHeight;
-            if (IFrameSplitOperator.IsBool(item.IsShowTitleArrow)) chart.Frame.SubFrame[i].Frame.IsShowTitleArrow=item.IsShowTitleArrow;
+            if (IFrameSplitOperator.IsBool(item.IsShowTitleArrow)) frame.IsShowTitleArrow=item.IsShowTitleArrow;
+            if (IFrameSplitOperator.IsNumber(item.TitleArrowType)) frame.TitleArrowType=item.TitleArrowType;
             if (item.IsShowIndexName==false) chart.Frame.SubFrame[i].Frame.IsShowIndexName=false;
             if (item.IsShowOverlayIndexName==false) chart.Frame.SubFrame[i].Frame.IsShowOverlayIndexName=false;
             if (IFrameSplitOperator.IsNumber(item.IndexParamSpace)) chart.Frame.SubFrame[i].Frame.IndexParamSpace=item.IndexParamSpace;
@@ -1161,7 +1162,8 @@ function JSChart(divElement, bOffscreen, bCacheCanvas)
                 if (IFrameSplitOperator.IsBool(item.IsDrawTitleBG))  chart.Frame.SubFrame[index].Frame.IsDrawTitleBG=item.IsDrawTitleBG;
                 if (IFrameSplitOperator.IsBool(item.IsShowNameArrow))  chart.Frame.SubFrame[index].Frame.IsShowNameArrow=item.IsShowNameArrow;
 
-                if (IFrameSplitOperator.IsBool(item.IsShowTitleArrow)) chart.Frame.SubFrame[index].Frame.IsShowTitleArrow=item.IsShowTitleArrow;
+                if (IFrameSplitOperator.IsBool(item.IsShowTitleArrow)) frame.IsShowTitleArrow=item.IsShowTitleArrow;
+                if (IFrameSplitOperator.IsNumber(item.TitleArrowType)) frame.TitleArrowType=item.TitleArrowType;
                 if (item.IsShowIndexName==false) chart.Frame.SubFrame[index].Frame.IsShowIndexName=false;
                 if (item.IsShowOverlayIndexName==false) chart.Frame.SubFrame[index].Frame.IsShowOverlayIndexName=false;
                 if (!IFrameSplitOperator.IsUndefined(item.HorizontalReserved)) frame.HorizontalReserved=item.HorizontalReserved;
@@ -1572,7 +1574,6 @@ function JSChart(divElement, bOffscreen, bCacheCanvas)
                 if (IFrameSplitOperator.IsBool(item.IsShowNameArrow))  chart.Frame.SubFrame[i].Frame.IsShowNameArrow=item.IsShowNameArrow;
 
                 if (IFrameSplitOperator.IsNumber(item.TitleHeight)) chart.Frame.SubFrame[i].Frame.ChartBorder.TitleHeight=item.TitleHeight;
-
                 if (IFrameSplitOperator.IsBool(item.IsShowTitleArrow)) chart.Frame.SubFrame[i].Frame.IsShowTitleArrow=item.IsShowTitleArrow;
                 if (item.IsShowIndexName==false) chart.Frame.SubFrame[i].Frame.IsShowIndexName=false;
                 if (item.IsShowOverlayIndexName==false) chart.Frame.SubFrame[i].Frame.IsShowOverlayIndexName=false;
@@ -7101,6 +7102,10 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
             if (!subItem || !subItem.Frame) continue;
 
             var frame=subItem.Frame;
+
+            //自定义刻度每次都调用
+            frame.YCustomSplit=true;
+
             var key=frame.Identify;
             var item=
             { 
@@ -8392,6 +8397,7 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
             else windowItem.TitleHeight=frame.ChartBorder.TitleHeight;
 
             if (IFrameSplitOperator.IsBool(windowItem.IsShowTitleArrow)) frame.IsShowTitleArrow=windowItem.IsShowTitleArrow;
+            if (IFrameSplitOperator.IsNumber(windowItem.TitleArrowType)) frame.TitleArrowType=windowItem.TitleArrowType;
             if (IFrameSplitOperator.IsBool(windowItem.IsShowIndexName)) frame.IsShowIndexName=windowItem.IsShowIndexName;
             if (IFrameSplitOperator.IsNumber(windowItem.IndexParamSpace)) frame.IndexParamSpace=windowItem.IndexParamSpace;
             if (IFrameSplitOperator.IsNumber(windowItem.IndexTitleSpace)) frame.IndexTitleSpace=windowItem.IndexTitleSpace;
@@ -8454,6 +8460,7 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
         if (IFrameSplitOperator.IsNumber(option.SplitCount)) subFrame.Frame.YSplitOperator.SplitCount=option.SplitCount;
         if (IFrameSplitOperator.IsNumber(option.TitleHeight)) subFrame.Frame.ChartBorder.TitleHeight=option.TitleHeight;
         if (IFrameSplitOperator.IsBool(option.IsShowTitleArrow)) subFrame.Frame.IsShowTitleArrow=option.IsShowTitleArrow;
+        if (IFrameSplitOperator.IsNumber(option.TitleArrowType)) subFrame.Frame.TitleArrowType=option.TitleArrowType;
         if (IFrameSplitOperator.IsBool(option.IsShowIndexName)) subFrame.Frame.IsShowIndexName=option.IsShowIndexName;
         if (IFrameSplitOperator.IsBool(option.IsShowOverlayIndexName)) subFrame.Frame.IsShowOverlayIndexName=option.IsShowOverlayIndexName;
         if (IFrameSplitOperator.IsNumber(option.IndexParamSpace)) subFrame.Frame.IndexParamSpace=option.IndexParamSpace;
@@ -10272,6 +10279,7 @@ function IChartFramePainting()
     this.SizeChange=true;               //大小是否改变
     this.XYSplit=true;                  //XY轴坐标信息改变
     this.XSplit=true;                   //X轴变化
+    this.YCustomSplit=true;            //自定义Y轴分割线
 
     this.HorizontalMax;                 //Y轴最大值
     this.HorizontalMin;                 //Y轴最小值
@@ -10293,6 +10301,7 @@ function IChartFramePainting()
     this.YSpecificMaxMin=null;         //指定Y轴最大最小值
     this.IsShowBorder = true;          //是否显示边框
     this.IsShowTitleArrow=true;        //是否显示指标信息上涨下跌箭头
+    this.TitleArrowType=g_JSChartResource.IndexTitle.ArrowType;             //指标信息上涨下跌箭头类型 0=独立颜色 1=跟指标名字颜色一致
     this.IsShowIndexName=true;         //是否显示指标名字
     this.IsShowOverlayIndexName=true;  //是否显示叠加指标名字
     //this.OverlayIndexType= { Position:0, LineSpace:5 };
@@ -10353,6 +10362,7 @@ function IChartFramePainting()
         this.SizeChange=false;
         this.XYSplit=false;
         this.XSplit=false;
+        this.YCustomSplit=false;            //自定义Y轴分割线
     }
 
     this.DrawFrame=function() { }
@@ -13508,7 +13518,18 @@ function MinuteFrame()
     //分割x,y轴坐标信息
     this.SplitXYCoordinate=function()
     {
-        if (this.XYSplit==false) return;
+        if (this.XYSplit==false) 
+        {
+            //计算自定义刻度
+            if (this.YCustomSplit)
+            {
+                if (this.YSplitOperator && this.YSplitOperator.CustomCoordinate)
+                    this.YSplitOperator.CustomCoordinate();
+            }
+
+            return;
+        }
+
         if (this.XSplitOperator!=null) this.XSplitOperator.Operator();
         if (this.YSplitOperator!=null) this.YSplitOperator.Operator();
     }
@@ -14966,6 +14987,8 @@ function OverlayMinuteFrame()
 
         this.SizeChange=false;
         this.XYSplit=false;
+        this.XSplit=false;
+        this.YCustomSplit=false;            //自定义Y轴分割线
     }
 
     this.DrawToolbar=function()
@@ -15022,6 +15045,8 @@ function OverlayMinuteHScreenFrame()
 
         this.SizeChange=false;
         this.XYSplit=false;
+        this.XSplit=false;
+        this.YCustomSplit=false;            //自定义Y轴分割线
     }
 
     //分割x,y轴坐标信息
@@ -15630,7 +15655,13 @@ function KLineFrame()
             if (this.XSplit)
             {
                 if (this.XSplitOperator) this.XSplitOperator.Operator();
-                if (this.YSplitOperator && this.YSplitOperator.CustomCoordinate) this.YSplitOperator.CustomCoordinate();
+            }
+
+            if (this.YCustomSplit)
+            {
+                 //计算自定义刻度
+                if (this.YSplitOperator && this.YSplitOperator.CustomCoordinate)
+                    this.YSplitOperator.CustomCoordinate();
             }
            
             return;
@@ -16402,6 +16433,7 @@ function OverlayKLineFrame()
         this.SizeChange=false;
         this.XYSplit=false;
         this.XSplit=false;
+        this.YCustomSplit=false;            //自定义Y轴分割线
     }
 
 
@@ -17689,6 +17721,8 @@ function OverlayKLineHScreenFrame()
         
         this.SizeChange=false;
         this.XYSplit=false;
+        this.XSplit=false;
+        this.YCustomSplit=false;            //自定义Y轴分割线
     }
 
     this.DrawTitle=function()   //画标题
@@ -46400,6 +46434,22 @@ IFrameSplitOperator.IsNumber=function(value)
     return typeof(value)=='number';
 }
 
+//批量判断是否是数值类型
+IFrameSplitOperator.IsNumberV2=function(...aryValue)
+{
+    if (!aryValue) return false;
+    if (aryValue.length==0) return false;
+
+    for(const value of aryValue)
+    {
+        if (value==null) return false;
+        if (isNaN(value)) return false;
+        if (typeof(value)!='number') return false;
+    }
+   
+    return true;
+}
+
 //判断是否是正数
 IFrameSplitOperator.IsPlusNumber=function(value)
 {
@@ -48133,6 +48183,8 @@ function FrameSplitMinutePriceY()
 
     this.CustomCoordinate=function()    //自定义刻度
     {
+        this.Frame.CustomHorizontalInfo=[];
+
         var data=this.InvokeCustomYCoordinateCallback();
         if (data && data.PreventDefault==true) return;
 
@@ -53278,9 +53330,11 @@ function DynamicChartTitlePainting()
     this.ColorIndex;    //五彩K线名字 {Name:'名字'}
     this.IsShowColorIndexTitle=true;
     this.IsShowUpDownArrow=true;   //指标数据是否显示 上涨下跌箭头
+    this.TitleArrowType=0;         //指标数据上涨下跌箭头类型 0=独立颜色 1=跟指标颜色一致
     this.IsShowIndexName=true;     //是否显示指标名字
     this.IsShowIndexTitle=true;    //是否显示指标标题信息
     this.IsShowNameArrow=false;
+    this.NameArrowConfig=CloneData(g_JSChartResource.IndexTitle.NameArrow);
 
     this.TradeIndex;    //专家系统名字{Name:'名字', Param:'参数'}
     this.IsShowTradeIndexTitle=true;
@@ -53749,6 +53803,7 @@ function DynamicChartTitlePainting()
         this.IsDrawTitleBG=this.Frame.IsDrawTitleBG;
         this.IsShowNameArrow=this.Frame.IsShowNameArrow;
         this.IsShowUpDownArrow=this.Frame.IsShowTitleArrow;
+        this.TitleArrowType=this.Frame.TitleArrowType;
         this.IsShowIndexName=this.Frame.IsShowIndexName;
         this.IsShowOverlayIndexName=this.Frame.IsShowOverlayIndexName;
         this.OverlayIndexType.Position=this.Frame.OverlayIndexType.Position;
@@ -54033,6 +54088,8 @@ function DynamicChartTitlePainting()
                         if (preValue>value) arrowSuper={ Text:'↓', TextColor:this.UpDownArrowConfig.DownColor };
                         else if (preValue<value) arrowSuper={ Text:'↑', TextColor:this.UpDownArrowConfig.UpColor};
                         else arrowSuper={ Text:'→', TextColor:this.UpDownArrowConfig.UnchangeColor };
+
+                        if (this.TitleArrowType==1) arrowSuper.TextColor=item.Color;
                     }
                 }
             
@@ -54540,10 +54597,16 @@ function DynamicChartTitlePainting()
             if (this.IsDrawTitleBG)
             {
                 var title=this.Title;
-                if (this.IsShowNameArrow) title+='▼';
                 var textWidth=this.Canvas.measureText(title).width;
+                var arrowWidth=0;
+                if (this.IsShowNameArrow && this.NameArrowConfig)
+                {
+                    arrowWidth=this.Canvas.measureText(this.NameArrowConfig.Symbol).width;
+                    if (IFrameSplitOperator.IsNumber(this.NameArrowConfig.Space)) arrowWidth+=this.NameArrowConfig.Space;
+                }
+
                 var bgHeight=this.Canvas.measureText("擎").width+4*pixelRatio;
-                var bgWidth=textWidth+4*pixelRatio;
+                var bgWidth=textWidth+arrowWidth+4*pixelRatio;
                 
                 this.TitleRect= 
                 {
@@ -54563,15 +54626,24 @@ function DynamicChartTitlePainting()
                     this.Canvas.strokeRect(ToFixedPoint(drawRect.Left),ToFixedPoint(drawRect.Top),ToFixedRect(drawRect.Width),ToFixedRect(drawRect.Height));
                 }
 
+                var xText=left+2*pixelRatio;
                 this.Canvas.fillStyle=this.TitleColor;
-                this.Canvas.fillText(title,left+2*pixelRatio,bottom,textWidth);
+                this.Canvas.fillText(title,xText,bottom);
+                xText+=textWidth;
+                if (this.IsShowNameArrow && this.NameArrowConfig)
+                {
+                    if (IFrameSplitOperator.IsNumber(this.NameArrowConfig.Space)) xText+=this.NameArrowConfig.Space;
+                    this.Canvas.fillStyle=this.NameArrowConfig.Color;
+                    this.Canvas.fillText(this.NameArrowConfig.Symbol,xText,bottom);
+                }
+
                 left+=bgWidth+2*pixelRatio;
                 left+=this.TitleSpace;
             }
             else
             {
                 this.Canvas.fillStyle=this.TitleColor;
-                this.Canvas.fillText(this.Title,left,bottom,textWidth);
+                this.Canvas.fillText(this.Title,left,bottom);
                 left+=textWidth;
                 left+=this.TitleSpace;
             }
@@ -54684,11 +54756,17 @@ function DynamicChartTitlePainting()
     {
         var pixelRatio=GetDevicePixelRatio();
         var title=this.Title;
-        if (this.IsShowNameArrow) title+='▼';
         var textWidth=this.Canvas.measureText(title).width;
+        var arrowWidth=0;
+        if (this.IsShowNameArrow && this.NameArrowConfig)
+        {
+            arrowWidth=this.Canvas.measureText(this.NameArrowConfig.Symbol).width;
+            if (IFrameSplitOperator.IsNumber(this.NameArrowConfig.Space)) arrowWidth+=this.NameArrowConfig.Space;
+        }
+
         var bgHeight=this.Canvas.measureText("擎").width+4*pixelRatio;
         var roundRadius=this.BorderRoundRadius*pixelRatio;
-        var bgWidth=textWidth+4*pixelRatio+roundRadius*2;
+        var bgWidth=textWidth+arrowWidth+4*pixelRatio+roundRadius*2;
        
         rtButton.Top=rtButton.YCenter-bgHeight/2-1,
         rtButton.Width=bgWidth;
@@ -54734,8 +54812,16 @@ function DynamicChartTitlePainting()
             }
         }
         
+        var xText=rtButton.Left+roundRadius+2*pixelRatio;
         this.Canvas.fillStyle=this.TitleColor;
-        this.Canvas.fillText(title,rtButton.Left+roundRadius+2*pixelRatio,rtButton.YCenter,textWidth);
+        this.Canvas.fillText(title,xText,rtButton.YCenter);
+        xText+=textWidth;
+        if (this.IsShowNameArrow && this.NameArrowConfig)
+        {
+            if (IFrameSplitOperator.IsNumber(this.NameArrowConfig.Space)) xText+=this.NameArrowConfig.Space;
+            this.Canvas.fillStyle=this.NameArrowConfig.Color;
+            this.Canvas.fillText(this.NameArrowConfig.Symbol,xText,rtButton.YCenter);
+        }
     }
 
     //绘制按钮
@@ -56413,6 +56499,7 @@ IChartDrawPicture.ArrayDrawPricture=
     { Name:"FibSpeedResistanceFan", ClassName:"ChartFibSpeedResistanceFan", Create:function() { return new ChartFibSpeedResistanceFan(); }}, //斐波那契扇形
     { Name:"PriceRange", ClassName:"ChartPriceRange", Create:function() { return new ChartPriceRange(); }},
     { Name:"DateRange", ClassName:"ChartDateRange", Create:function() { return new ChartDateRange(); }},
+    { Name:"DatePriceRange", ClassName:"ChartDatePriceRange", Create:function() { return new ChartDatePriceRange(); }},
     { Name:"InfoLine", ClassName:"ChartInfoLine", Create:function() { return new ChartInfoLine(); }},
     { Name:"TrendAngle", ClassName:"ChartTrendAngle", Create:function() { return new ChartTrendAngle(); }},
     { Name:"ArrowMarker", ClassName:"ChartArrowMarker", Create:function() { return new ChartArrowMarker(); } },
@@ -56949,10 +57036,10 @@ function ChartArrowMarker()
     this.ClassName='ChartArrowMarker';
     this.IsPointIn=this.IsPointIn_XYValue_Line;
    
-    this.InsideAngle=25;
+    this.InsideLineConfig={ Angle:25, MaxWidth:70, WidthRate:0.3 };
     this.InsideWidth=70;
-
-    this.OutAngle=35;
+   
+    this.OutLineConfig={ Angle:35, MaxWidth:100, WidthRate:0.4 };
     this.OutWidth=100;
 
     this.GetXYCoordinate=this.GetXYCoordinate_default;
@@ -56985,6 +57072,19 @@ function ChartArrowMarker()
         return { Top:{X:topX+ptEnd.X, Y:topY+ptEnd.Y}, Bottom:{X:botX+ptEnd.X, Y:botY+ptEnd.Y} };
     }
 
+    this.CalculateLineWidth=function(ptStart, ptEnd)
+    {
+        var a=ptStart.X-ptEnd.X;
+        var b=ptStart.Y-ptEnd.Y;
+        var c=Math.sqrt(a*a+b*b);
+
+        this.InsideWidth=c*this.InsideLineConfig.WidthRate;
+        this.OutWidth=c*this.OutLineConfig.WidthRate;
+
+        if (this.InsideWidth>this.InsideLineConfig.MaxWidth) this.InsideWidth=this.InsideLineConfig.MaxWidth;
+        if (this.OutWidth>this.OutLineConfig.MaxWidth) this.OutWidth=this.OutLineConfig.MaxWidth;
+    }
+
     this.Draw=function()
     {
         this.LinePoint=[];
@@ -57000,9 +57100,11 @@ function ChartArrowMarker()
         var ptStart=drawPoint[0];
         var ptEnd=drawPoint[1];
 
+        this.CalculateLineWidth(ptStart, ptEnd);
+
         //计算箭头 的两条边线坐标
-        var outArrow=this.CalculatePoint(this.OutAngle, ptStart, ptEnd, this.OutWidth);
-        var insideArrow=this.CalculatePoint(this.InsideAngle, ptStart, ptEnd, this.InsideWidth);
+        var outArrow=this.CalculatePoint(this.OutLineConfig.Angle, ptStart, ptEnd, this.OutWidth);
+        var insideArrow=this.CalculatePoint(this.InsideLineConfig.Angle, ptStart, ptEnd, this.InsideWidth);
 
         this.Canvas.beginPath();
         this.Canvas.moveTo(ptStart.X,ptStart.Y);
@@ -65950,8 +66052,12 @@ function ChartDateRange()
         
         //文字输出
         var bottom=this.Frame.ChartBorder.GetBottomEx();
+        var top=this.Frame.ChartBorder.GetTopEx();
         var startIndex=this.Frame.GetXData(ptStart.X,false);
         var endIndex=this.Frame.GetXData(ptEnd.X,false);
+        var startValue=this.Frame.GetYData(ptStart.Y,false);
+        var endValue=this.Frame.GetYData(ptEnd.Y,false);
+        var diffValue=endValue-startValue;
         var barCount=endIndex-startIndex+1;
         var text=`${barCount} bars`;
 
@@ -65959,13 +66065,27 @@ function ChartDateRange()
         var textHeight=this.GetFontHeight();
         var textWidth=this.Canvas.measureText(text).width+4+(this.Label.LeftMargin+this.Label.RightMargin);
         var rtTextBG={ Left:xCenter-textWidth/2, Top:ptEnd.Y+4, Width:textWidth, Height:textHeight+2 };
+        if (diffValue>0) rtTextBG.Top=ptEnd.Y-rtTextBG.Height-4;
+        else rtTextBG.Top=ptEnd.Y+4;
         rtTextBG.Bottom=rtTextBG.Top+rtTextBG.Height;
 
-        if (rtTextBG.Bottom>=bottom)
+        if (diffValue>0)
+        {
+            if (rtTextBG.Top<=top)
+            {
+                rtTextBG.Top=top;
+                rtTextBG.Bottom=rtTextBG.Top+rtTextBG.Height;
+            }
+        }
+        else
         {
-            rtTextBG.Bottom=bottom;
-            rtTextBG.Top=rtTextBG.Bottom-rtTextBG.Height;
+            if (rtTextBG.Bottom>=bottom)
+            {
+                rtTextBG.Bottom=bottom;
+                rtTextBG.Top=rtTextBG.Bottom-rtTextBG.Height;
+            }
         }
+        
 
         if (this.Label.EnableBGColor)
         {
@@ -65983,6 +66103,169 @@ function ChartDateRange()
     }
 }
 
+function ChartDatePriceRange()
+{
+    this.newMethod=IChartDrawPicture;   //派生
+    this.newMethod();
+    delete this.newMethod;
+
+    this.ClassName='ChartDatePriceRange';
+    this.PointCount=2;
+    this.Font=12*GetDevicePixelRatio() +"px 微软雅黑";
+    this.TextColor=this.LineColor;
+    this.IsPointIn=this.IsPointIn_XYValue_Line;
+    this.GetXYCoordinate=this.GetXYCoordinate_default;
+    this.PointToValue_Default=this.PointToValue;
+    this.OnlyMoveXIndex=true;
+    this.IsSupportMagnet=true;
+    this.LineWidth=1;
+    this.EnableBGColor=true;
+    this.BGColor=IChartDrawPicture.ColorToRGBA(this.LineColor,0.15);
+    this.ExtendLine={ Top:false, Bottom: false }; //延长线
+
+    this.Label={ TextColor:"rgb(0,0,0)", BGColor:"rgb(211,211,211)", EnableBGColor:true, LeftMargin:5, RightMargin:5 };
+
+    this.Draw=function()
+    {
+        this.LinePoint=[];
+        if (this.IsFrameMinSize()) return;
+        if (!this.IsShow) return;
+
+        var bCheckXY=true;
+        var drawPoint=this.CalculateDrawPoint( {IsCheckX:bCheckXY, IsCheckY:bCheckXY} );
+        if (!drawPoint) return;
+        if (drawPoint.length!=2) return;
+
+        this.ClipFrame();
+
+        var ptStart=drawPoint[0];
+        var ptEnd=drawPoint[1];
+
+        this.SetLineWidth();
+        this.DrawRange(ptStart,ptEnd);
+        this.RestoreLineWidth();
+
+        this.DrawPoint(drawPoint);  //画点
+        this.Canvas.restore();
+    }
+
+    this.DrawRange=function(ptStart, ptEnd)
+    {
+        var yTop=Math.min(ptStart.Y, ptEnd.Y);
+        var yBottom=Math.max(ptStart.Y, ptEnd.Y);
+        var xLeft=Math.min(ptStart.X, ptEnd.X);
+        var xRight=Math.max(ptStart.X, ptEnd.X);
+        var height=yBottom-yTop;
+        var width=xRight-xLeft;
+        var yCenter=ptStart.Y+(ptEnd.Y-ptStart.Y)/2;
+        var xCenter=ptStart.X+(ptEnd.X-ptStart.X)/2;
+
+        if (this.ExtendLine.Top) yTop=this.Frame.ChartBorder.GetTopEx();
+        if (this.ExtendLine.Bottom) yBottom=this.Frame.ChartBorder.GetBottomEx();
+
+        if (this.EnableBGColor)
+        {
+            var rtBG={ Left:xLeft, Top:yTop, Right:xRight, Bottom:yBottom };
+            rtBG.Width=rtBG.Right-rtBG.Left;
+            rtBG.Height=rtBG.Bottom-rtBG.Top;
+            this.Canvas.fillStyle=this.BGColor;
+            this.Canvas.fillRect(rtBG.Left, rtBG.Top, rtBG.Width, rtBG.Height);
+        }
+        
+        this.Canvas.strokeStyle=this.LineColor;
+        this.Canvas.beginPath();
+        this.Canvas.moveTo(ToFixedPoint(xLeft),yTop);
+        this.Canvas.lineTo(ToFixedPoint(xLeft),yBottom);
+
+        this.Canvas.moveTo(ToFixedPoint(xRight),yTop);
+        this.Canvas.lineTo(ToFixedPoint(xRight),yBottom);
+
+        this.Canvas.moveTo(ToFixedPoint(xLeft),ToFixedPoint(yCenter));
+        this.Canvas.lineTo(ToFixedPoint(xRight),ToFixedPoint(yCenter));
+
+        this.Canvas.moveTo(ToFixedPoint(xCenter),ToFixedPoint(yTop));
+        this.Canvas.lineTo(ToFixedPoint(xCenter),ToFixedPoint(yBottom));
+
+        this.Canvas.stroke();
+
+        this.LinePoint.push({ Start:{X:xLeft, Y:yTop}, End:{X:xLeft, Y:yBottom} });
+        this.LinePoint.push({ Start:{X:xRight, Y:yTop}, End:{X:xRight, Y:yBottom} });
+        this.LinePoint.push({ Start:{X:xLeft, Y:yCenter}, End:{X:xRight, Y:yCenter} });
+
+        this.DrawArrow({X:ptStart.X, Y:ToFixedPoint(yCenter)}, {X:ptEnd.X, Y:ToFixedPoint(yCenter)});
+        this.DrawArrow({X:ToFixedPoint(xCenter), Y:ptStart.Y}, {X:ToFixedPoint(xCenter), Y:ptEnd.Y});
+        
+        //文字输出
+        var bottom=this.Frame.ChartBorder.GetBottomEx();
+        var top=this.Frame.ChartBorder.GetTopEx();
+        var startIndex=this.Frame.GetXData(ptStart.X,false);
+        var endIndex=this.Frame.GetXData(ptEnd.X,false);
+        var barCount=endIndex-startIndex+1;
+        var startValue=this.Frame.GetYData(ptStart.Y,false);
+        var endValue=this.Frame.GetYData(ptEnd.Y,false);
+        var diffValue=endValue-startValue;
+
+        var rate=(diffValue/startValue)*100;
+        var aryText=
+        [
+            `${diffValue.toFixed(2)} (${rate.toFixed(2)}%)`,
+            `${barCount} bars`
+        ];
+
+        this.Canvas.font=this.Font;
+        var textHeight=this.GetFontHeight();
+        var textWidth=0;
+        for(var i=0;i<aryText.length;++i)
+        {
+            var text=aryText[i];
+            var value=this.Canvas.measureText(text).width;
+            if (textWidth<value) textWidth=value;
+        }
+        textWidth+=(this.Label.LeftMargin+this.Label.RightMargin);
+
+        var rtTextBG={ Left:xCenter-textWidth/2, Top:ptEnd.Y+4, Width:textWidth, Height:aryText.length*textHeight+2 };
+        if (diffValue>0) rtTextBG.Top=ptEnd.Y-rtTextBG.Height-4;
+        else rtTextBG.Top=ptEnd.Y+4;
+        rtTextBG.Bottom=rtTextBG.Top+rtTextBG.Height;
+
+        if (diffValue>0)
+        {
+            if (rtTextBG.Top<=top)
+            {
+                rtTextBG.Top=top;
+                rtTextBG.Bottom=rtTextBG.Top+rtTextBG.Height;
+            }
+        }
+        else
+        {
+            if (rtTextBG.Bottom>=bottom)
+            {
+                rtTextBG.Bottom=bottom;
+                rtTextBG.Top=rtTextBG.Bottom-rtTextBG.Height;
+            }
+        }
+
+        if (this.Label.EnableBGColor)
+        {
+            var path=new Path2D();
+            path.roundRect(ToFixedPoint(rtTextBG.Left), ToFixedPoint(rtTextBG.Top), ToFixedRect(rtTextBG.Width), ToFixedRect(rtTextBG.Height), [3]);
+            this.Canvas.fillStyle=this.Label.BGColor;
+            this.Canvas.fill(path);
+        }
+
+        this.Canvas.fillStyle=this.Label.TextColor;
+        this.Canvas.textAlign="left";
+        this.Canvas.textBaseline="bottom";
+        var yText=rtTextBG.Bottom-2;
+        for(var i=0;i<aryText.length;++i)
+        {
+            var text=aryText[i];
+            this.Canvas.fillText(text,rtTextBG.Left+2+this.Label.LeftMargin,yText);
+            yText-=textHeight;
+        }
+    }
+}
+
 //线段信息统计
 function ChartInfoLine()
 {
@@ -66561,7 +66844,11 @@ function JSChartResource()
             UpColor:"rgb(238,21,21)",   //上涨
             DownColor:"rgb(25,158,0)",  //下跌
             UnchangeColor:"rgb(0,0,0)"  //不变
-        }
+        },
+
+        ArrowType:0,
+
+        NameArrow:{ Color:"rgb(43,54,69)", Space:2, Symbol:'▼' },
     }
 
     this.Title={
@@ -67859,6 +68146,16 @@ function JSChartResource()
                 if (subItem.DownColor) this.IndexTitle.UpDownArrow.DownColor = subItem.DownColor;
                 if (subItem.UnchangeColor) this.IndexTitle.UpDownArrow.UnchangeColor = subItem.UnchangeColor;
             }
+
+            if (IFrameSplitOperator.IsNumber(item.ArrowType)) this.IndexTitle.ArrowType=item.ArrowType;
+
+            if (item.NameArrow)
+            {
+                var subItem=item.NameArrow;
+                if (subItem.Color) this.IndexTitle.NameArrow.Color = subItem.Color;
+                if (subItem.Symbol) this.IndexTitle.NameArrow.Symbol = subItem.Symbol;
+                if (IFrameSplitOperator.IsNumber(subItem.Space)) this.IndexTitle.NameArrow.Space = subItem.Space;
+            }
         }
 
         if (style.Frame)
@@ -73830,7 +74127,8 @@ function KLineChartContainer(uielement,OffscreenElement, cacheElement)
 
                 if (IFrameSplitOperator.IsNumber(item.TitleHeight)) this.Frame.SubFrame[i].Frame.ChartBorder.TitleHeight=item.TitleHeight;
                 else item.TitleHeight=this.Frame.SubFrame[i].Frame.ChartBorder.TitleHeight;
-                if (IFrameSplitOperator.IsBool(item.IsShowTitleArrow)) this.Frame.SubFrame[i].Frame.IsShowTitleArrow=item.IsShowTitleArrow;
+                if (IFrameSplitOperator.IsBool(item.IsShowTitleArrow)) subFrame.Frame.IsShowTitleArrow=item.IsShowTitleArrow;
+                if (IFrameSplitOperator.IsNumber(item.TitleArrowType)) subFrame.Frame.TitleArrowType=item.TitleArrowType;
                 if (item.IsShowIndexName==false) this.Frame.SubFrame[i].Frame.IsShowIndexName=false;
                 if (item.IsShowOverlayIndexName==false) this.Frame.SubFrame[i].Frame.IsShowOverlayIndexName=false;
                 if (IFrameSplitOperator.IsNumber(item.IndexParamSpace)) this.Frame.SubFrame[i].Frame.IndexParamSpace=item.IndexParamSpace;

package/src/jscommon/umychart.style.js

@@ -105,7 +105,9 @@ function GetBlackStyle()
                 UpColor:"rgb(238,21,21)",   //上涨
                 DownColor:"rgb(25,158,0)",  //下跌
                 UnchangeColor:"rgb(190, 190 ,190)"  //不变
-            }
+            },
+
+            NameArrow:{ Color:"rgb(190, 190 ,190)", Space:2, Symbol:'▼' },
         },
     
         Title: