hqchart 1.1.13743 → 1.1.13754

package/src/jscommon/umychart.js

@@ -30665,6 +30665,7 @@ function ChartLine()
     this.LineWidth;                 //线段宽度
     this.DrawType=0;                //画图方式  0=无效数平滑  1=无效数不画断开
     this.IsDotLine=false;           //虚线
+    this.LineDash=g_JSChartResource.DOTLINE.LineDash;
     this.BreakPoint;                //断开的点索引 Set();
 
 
@@ -30710,7 +30711,7 @@ function ChartLine()
         
         this.Canvas.save();
         if (this.LineWidth>0) this.Canvas.lineWidth=this.LineWidth * GetDevicePixelRatio();
-        if (this.IsDotLine) this.Canvas.setLineDash(g_JSChartResource.DOTLINE.LineDash); //画虚线
+        if (this.IsDotLine) this.Canvas.setLineDash(this.LineDash); //画虚线
         var bFirstPoint=true;
         var drawCount=0;
         for(var i=this.Data.DataOffset,j=0;i<this.Data.Data.length && j<xPointCount;++i,++j)
@@ -30777,7 +30778,7 @@ function ChartLine()
         this.ClipClient(bHScreen);
         if (this.LineWidth>0) this.Canvas.lineWidth=this.LineWidth * GetDevicePixelRatio();
         this.Canvas.strokeStyle=this.Color;
-        if (this.IsDotLine) this.Canvas.setLineDash(g_JSChartResource.DOTLINE.LineDash); //画虚线
+        if (this.IsDotLine) this.Canvas.setLineDash(this.LineDash); //画虚线
 
         var bFirstPoint=true;
         var ptFirst=null;;    //第1个点
@@ -30874,7 +30875,7 @@ function ChartLine()
         this.ClipClient(bHScreen);
         if (this.LineWidth>0) this.Canvas.lineWidth=this.LineWidth * GetDevicePixelRatio();
         this.Canvas.strokeStyle=this.Color;
-        if (this.IsDotLine) this.Canvas.setLineDash(g_JSChartResource.DOTLINE.LineDash); //画虚线
+        if (this.IsDotLine) this.Canvas.setLineDash(this.LineDash); //画虚线
 
         var bFirstPoint=true;
         var ptFirst=null;;    //第1个点
@@ -36046,16 +36047,38 @@ function ChartClipColorStick()
     this.UpColor=g_JSChartResource.UpBarColor;
     this.DownColor=g_JSChartResource.DownBarColor;
     this.LineWidth=1;
+    this.Style=0; //1=同方向  0=上下两个方向
+
     //差值线
     this.DownDiffColor=g_JSChartResource.DownBarColor;
     this.UpDiffColor=g_JSChartResource.UpBarColor;
 
+    //文字
+    this.TextLabelConfig=
+    {
+        Font:`${12*GetDevicePixelRatio()}px 微软雅黑`,
+        TextMargin:{ Left:2, Right:2, Bottom:2, Top:2 },
+        TextColor:"rgb(230,230,230)",
+        UpColor:"rgb(137,16,19)",
+        DownColor:"rgb(44,104,57)",
+        UnchangeColor:"rgb(111,112,115)",
+        BorderColor:"rgb(0,0,0)",
+
+        //缓存
+        LabelWidth:0,
+        TextHeight:0,
+        MaxTextWidth:0,
+    }
+
     this.BaseLineColor; //基准线
 
     this.BaseValue=0;
     this.Super_GetMaxMin=this.GetMaxMin;    //父类的方法
     this.ValueRange;    //{ Max:, Min: }    //固定最大最小值
 
+    this.IsShowText=false;
+    
+
     this.SetOption=function(option)
     {
         if (!option) return;
@@ -36066,11 +36089,18 @@ function ChartClipColorStick()
         if (option.UpDiffColor) this.UpDiffColor=option.UpDiffColor;
         if (option.BaseLineColor) this.BaseLineColor=option.BaseLineColor;
         if (IFrameSplitOperator.IsNumber(option.BaseValue)) this.BaseValue=option.BaseValue;
+        if (IFrameSplitOperator.IsNumber(option.Style)) this.Style=option.Style;
         if (option.ValueRange) this.ValueRange=option.ValueRange;
+
     }
 
     this.Draw=function()
     {
+        this.IsShowText=false;
+        this.TextLabelConfig.LabelWidth=0;
+        this.TextLabelConfig.TextHeight=0;
+        this.TextLabelConfig.MaxTextWidth=0;
+
         if (!this.IsShow || this.ChartFrame.IsMinSize || !this.IsVisible) return;
         if (this.IsShowIndexTitleOnly()) return;
         if (this.IsHideScriptIndex()) return;
@@ -36081,23 +36111,44 @@ function ChartClipColorStick()
             return;
         }
 
-        this.Canvas.save();
         var dataWidth=this.ChartFrame.DataWidth;
+        var distanceWidth=this.ChartFrame.DistanceWidth;
+        var xPointCount=this.ChartFrame.XPointCount;
+        var bHScreen=this.ChartFrame.IsHScreen===true;
+
         var lineWidth=this.LineWidth*GetDevicePixelRatio();
         if (this.LineWidth==50) lineWidth=dataWidth;
         else if (lineWidth>dataWidth) lineWidth=dataWidth;
-        
+
+        if (!bHScreen)
+        {
+            var itemWidth=dataWidth+distanceWidth;
+            var bMinute=this.IsMinuteFrame();
+            if (bMinute) 
+            {
+                var border=this.ChartBorder.GetBorder();
+                itemWidth=(border.Right-border.Left)/(xPointCount-1);
+            }
+
+            this.Canvas.font=this.TextLabelConfig.Font;
+            this.TextLabelConfig.MaxTextWidth=this.Canvas.measureText("-888").width;
+            this.TextLabelConfig.LabelWidth=this.TextLabelConfig.MaxTextWidth+this.TextLabelConfig.TextMargin.Left+this.TextLabelConfig.TextMargin.Right;
+            this.IsShowText=itemWidth>this.TextLabelConfig.LabelWidth;
+            this.TextLabelConfig.TextHeight=this.Canvas.measureText("擎").width;
+        }
+
+        this.Canvas.save();
         if (IFrameSplitOperator.IsNumber(this.BaseValue) && this.BaseValue!=0)
         {
             this.DrawBaseLine();
 
-            if (this.BaseValue>0)  this.DrawBars(lineWidth, true);
-            else this.DrawBars(lineWidth, false);
+            if (this.BaseValue>0)  this.DrawBars(lineWidth, true, true);
+            else this.DrawBars(lineWidth, false, true);
         }
         else
         {
             //上下分开画
-            this.DrawBars(lineWidth, true);
+            this.DrawBars(lineWidth, true, true);
             this.DrawBars(lineWidth, false);
         }
 
@@ -36105,15 +36156,15 @@ function ChartClipColorStick()
         this.Canvas.restore();
     }
 
-    this.DrawBars=function(lineWidth, bUpBar)
+    this.DrawBars=function(lineWidth, bUpBar, bDrawLabel)
     {
         var isMinute=this.IsMinuteFrame();
         var dataWidth=this.ChartFrame.DataWidth;
         var distanceWidth=this.ChartFrame.DistanceWidth;
         var xPointCount=this.ChartFrame.XPointCount;
-        var isHSCreen=this.ChartFrame.IsHScreen===true;
+        var bHScreen=this.ChartFrame.IsHScreen===true;
 
-        if (isHSCreen)
+        if (bHScreen)
         {
             var border=this.ChartBorder.GetHScreenBorder();
             var xOffset=border.TopEx+distanceWidth/2.0+g_JSChartResource.FrameLeftMargin;
@@ -36132,19 +36183,14 @@ function ChartClipColorStick()
         }
 
         var yBottom=this.ChartFrame.GetYFromData(this.BaseValue);
-        var aryBar=[], aryDiffBar=[];
-        for(var i=this.Data.DataOffset,j=0;i<this.Data.Data.length && j<xPointCount;++i,++j,xOffset+=(dataWidth+distanceWidth))
+        var aryBar=[], aryDiffBar=[], aryText=[];
+        var preValue=null;
+        var start=this.Data.DataOffset;
+        if (start-1>0) preValue=this.Data.Data[start-1];    //上一个数值
+        for(var i=start,j=0;i<this.Data.Data.length && j<xPointCount;++i,++j,xOffset+=(dataWidth+distanceWidth))
         {
             var value=this.Data.Data[i];
             if (value==null) continue;
-            if (bUpBar)
-            {
-                if (value<0) continue;
-            }
-            else
-            {
-                if (value>=0) continue;
-            }
 
             if (isMinute)
             {
@@ -36160,6 +36206,21 @@ function ChartClipColorStick()
 
             if (x>chartright) break;
 
+            var textItem={ X:x, Value:value };
+            if (IFrameSplitOperator.IsNumber(preValue)) textItem.DiffValue=value-preValue;
+            aryText.push(textItem);
+
+            preValue=value;
+
+            if (bUpBar)
+            {
+                if (value<0) continue;
+            }
+            else
+            {
+                if (value>=0) continue;
+            }
+
             var bDiffBar=false;
             var diffValue=null;
             if (this.BaseValue>0)
@@ -36167,7 +36228,10 @@ function ChartClipColorStick()
                 if (value<this.BaseValue)
                 {
                     bDiffBar=true;
-                    diffValue=this.BaseValue-(this.BaseValue-value);
+                    if (this.Style==1)
+                        diffValue=this.BaseValue+(this.BaseValue-value);
+                    else
+                        diffValue=this.BaseValue-(this.BaseValue-value);
                 }
             }
             else if (this.BaseValue<0)
@@ -36175,19 +36239,22 @@ function ChartClipColorStick()
                 if (value>this.BaseValue)
                 {
                     bDiffBar=true;
-                    diffValue=this.BaseValue+(value-this.BaseValue)
+                    if (this.Style==1)
+                        diffValue=this.BaseValue-(value-this.BaseValue);
+                    else
+                        diffValue=this.BaseValue+(value-this.BaseValue)
                 }
             }
             
             if (!bDiffBar)
             {
                 var y=this.ChartFrame.GetYFromData(value);
-                aryBar.push({X:x, Y:y});
+                aryBar.push({X:x, Y:y });
             }
             else
             {
                 var y=this.ChartFrame.GetYFromData(diffValue);
-                aryDiffBar.push({X:x, Y:y});
+                aryDiffBar.push({X:x, Y:y });
             }
         }
 
@@ -36196,6 +36263,7 @@ function ChartClipColorStick()
         else this.Canvas.strokeStyle=this.DownColor;
 
         this.DrawStick(aryBar,lineWidth,yBottom);
+        
 
         if (this.BaseValue>0)
         {
@@ -36208,13 +36276,14 @@ function ChartClipColorStick()
             this.DrawStick(aryDiffBar,lineWidth,yBottom);
         }
 
+        if (this.IsShowText && bDrawLabel) this.DrawStickText(aryText);
     }
 
     this.DrawStick=function(aryData, lineWidth, yBottom)
     {
         if (!IFrameSplitOperator.IsNonEmptyArray(aryData)) return;
 
-        var isHSCreen=this.ChartFrame.IsHScreen===true;
+        var bHScreen=this.ChartFrame.IsHScreen===true;
         var drawCount=0;
         this.Canvas.beginPath();
         for(var i=0; i<aryData.length; ++i)
@@ -36223,7 +36292,7 @@ function ChartClipColorStick()
             var y=item.Y;
             var xFix=ToFixedPoint2(lineWidth, item.X); //毛边修正
 
-            if (isHSCreen)
+            if (bHScreen)
             {
                 this.Canvas.moveTo(yBottom,ToFixedPoint(x));
                 this.Canvas.lineTo(y,ToFixedPoint(x));
@@ -36245,14 +36314,14 @@ function ChartClipColorStick()
         if (!IFrameSplitOperator.IsNumber(this.BaseValue) || this.BaseValue==0) return;
         if (!this.BaseLineColor) return;
 
-        var isHSCreen=this.ChartFrame.IsHScreen===true;
+        var bHScreen=this.ChartFrame.IsHScreen===true;
         var border=this.ChartFrame.GetBorder();
         var y=this.ChartFrame.GetYFromData(this.BaseValue);
 
         this.Canvas.strokeStyle=this.BaseLineColor;
         this.Canvas.lineWidth=1*GetDevicePixelRatio();
 
-        if (isHSCreen)
+        if (bHScreen)
         {
 
         }
@@ -36266,6 +36335,107 @@ function ChartClipColorStick()
         }
     }
 
+    this.DrawStickText=function(aryData)
+    {
+        var config=this.TextLabelConfig;
+        this.Canvas.font=config.Font;
+        var border=this.ChartBorder.GetBorder();
+        var itemHeight=config.TextHeight*2+config.TextMargin.Bottom+config.TextMargin.Top;
+        for(var i=0; i<aryData.length; ++i)
+        {
+            var item=aryData[i];
+            var value=item.Value;
+            var xCenter=item.X;
+            var xLeft=xCenter-config.LabelWidth/2;
+
+            var rtDraw={ Left:xLeft, Width:config.LabelWidth, Top:border.BottomEx+1, Height:itemHeight };
+            rtDraw.Right=rtDraw.Left+rtDraw.Width;
+            rtDraw.Bottom=rtDraw.Top+rtDraw.Height;
+            if (IFrameSplitOperator.IsNumber(value))
+            {
+                var bgColor=config.UnchangeColor;
+                if (value>0) bgColor=config.UpColor;
+                else if (value<0) bgColor=config.DownColor;
+                this.DrawTextLabel(value, bgColor, config.BorderColor, config.TextColor, rtDraw, config.TextHeight, config.MaxTextWidth, config.TextMargin);
+            }
+
+            var value=item.DiffValue;
+            var rtDraw={ Left:xLeft, Width:config.LabelWidth, Bottom:border.TopEx-1, Height:itemHeight };
+            rtDraw.Right=rtDraw.Left+rtDraw.Width;
+            rtDraw.Top=rtDraw.Bottom-rtDraw.Height;
+            if (IFrameSplitOperator.IsNumber(value))
+            {
+                var bgColor=config.UnchangeColor;
+                if (value>0) bgColor=config.UpColor;
+                else if (value<0) bgColor=config.DownColor;
+                this.DrawTextLabel(value, bgColor, config.BorderColor, config.TextColor, rtDraw, config.TextHeight, config.MaxTextWidth, config.TextMargin);
+            }
+        }
+    }
+
+    //数值标签
+    this.DrawTextLabel=function(value, clrGB, clrBorder, clrText, rtDraw, textHeight, textWidth, textMargin)
+    {
+        if (clrGB)
+        {
+            this.Canvas.fillStyle=clrGB;
+            this.Canvas.fillRect(rtDraw.Left ,rtDraw.Top, (rtDraw.Width), (rtDraw.Height));
+        }
+        
+        if (clrBorder)
+        {
+            this.Canvas.lineWidth=2;
+            this.Canvas.strokeStyle=clrBorder;
+            this.Canvas.strokeRect(rtDraw.Left, rtDraw.Top, rtDraw.Width, rtDraw.Height);
+        }
+        else 
+        {
+            this.Canvas.lineWidth=1;
+            this.Canvas.strokeStyle="rgb(0,0,0)";
+            this.Canvas.strokeRect(rtDraw.Left, rtDraw.Top, rtDraw.Width, rtDraw.Height);
+        }
+
+        var aryText=[null, null];   //大于3位数的 2行输出
+        var sign="";   //负数
+        if (value<0)
+        {
+            value=Math.abs(value);
+            sign='-';
+        }
+        
+        if (value>999)
+        {
+            var thousand=parseInt(value/1000);
+            var hundred=parseInt(value%1000);
+
+            aryText[0]=`${sign}${thousand}`;
+            aryText[1]=`${hundred}`;
+            if (hundred<10) aryText[1]=`00${hundred}`;
+            else if (hundred<100) aryText[1]=`0${hundred}`;
+        }
+        else
+        {
+            aryText[1]=`${sign}${value.toFixed(0)}`;
+        }
+
+        this.Canvas.textAlign="right";
+        this.Canvas.textBaseline="top";
+        var xRight=rtDraw.Right-(rtDraw.Right-rtDraw.Left-textWidth)/2;
+
+        this.Canvas.fillStyle=clrText;
+        var yText=textMargin.Top+rtDraw.Top;
+        for(var i=0;i<aryText.length;++i)
+        {
+            var text=aryText[i];
+            if (text)
+            {
+                this.Canvas.fillText(text,xRight,yText);
+            }
+
+            yText+=textHeight;
+        }
+    }
+
     this.GetMaxMin=function()
     {
         if (!IFrameSplitOperator.IsNumber(this.BaseValue) || this.BaseValue==0)
@@ -36328,13 +36498,36 @@ function ChartClipColorStick()
 
         if (this.BaseValue>0)
         {
-            if (IFrameSplitOperator.IsNumber(maxDiffValue) && IFrameSplitOperator.IsNumber(range.Min))
-                range.Min-=maxDiffValue;
+            if (this.Style==1)
+            {
+                if (IFrameSplitOperator.IsNumber(maxDiffValue))
+                {
+                    var value=this.BaseValue+maxDiffValue;
+                    if (IFrameSplitOperator.IsNumber(range.Max) || range.Max<value) range.Max=value;
+                } 
+            }
+            else
+            {
+                if (IFrameSplitOperator.IsNumber(maxDiffValue) && IFrameSplitOperator.IsNumber(range.Min))
+                    range.Min-=maxDiffValue;
+            }
+            
         }
         else
         {
-            if (IFrameSplitOperator.IsNumber(maxDiffValue) && IFrameSplitOperator.IsNumber(range.Max))
-                range.Max+=maxDiffValue;
+            if (this.Style==1)
+            {
+                if (IFrameSplitOperator.IsNumber(maxDiffValue))
+                {
+                    var value=this.BaseValue-maxDiffValue;
+                    if (IFrameSplitOperator.IsNumber(range.Min) || range.Min>value) range.Min=value;
+                } 
+            }
+            else
+            {
+                if (IFrameSplitOperator.IsNumber(maxDiffValue) && IFrameSplitOperator.IsNumber(range.Max))
+                    range.Max+=maxDiffValue;
+            }
         }
 
         return range;