hqchart 1.1.13346 → 1.1.13355

package/src/jscommon/umychart.js

@@ -334,13 +334,22 @@ function JSChart(divElement, bOffscreen, bCacheCanvas)
             if (IFrameSplitOperator.IsBool(item.IsShowKLineDivTooltip)) chart.IsShowKLineDivTooltip=item.IsShowKLineDivTooltip;
             if (option.KLine.MaxRequestMinuteDayCount>0) chart.MaxRequestMinuteDayCount=option.KLine.MaxRequestMinuteDayCount;
             if (option.KLine.DrawType) chart.KLineDrawType=option.KLine.DrawType;
-            if (option.KLine.FirstShowDate>19910101) chart.CustomShow={ Date:option.KLine.FirstShowDate, PageSize:option.KLine.PageSize };
+            if (option.KLine.FirstShowDate>19910101) chart.CustomShow={ Date:option.KLine.FirstShowDate, PageSize:option.KLine.PageSize };  //!!已弃用 新的格式"CustomShow"
             if (option.KLine.RightSpaceCount>0) chart.RightSpaceCount=option.KLine.RightSpaceCount;
             if (option.KLine.ZoomType>0) chart.ZoomType=option.KLine.ZoomType;
             if (option.KLine.DataWidth>=1) chart.KLineSize={ DataWidth:option.KLine.DataWidth };
             if (IFrameSplitOperator.IsNumber(option.KLine.RightFormula)) chart.RightFormula=option.KLine.RightFormula;
         }
 
+        //自定义显示位置
+        if (option.CustomShow && IFrameSplitOperator.IsPlusNumber(option.CustomShow.Date))
+        {
+            var item=option.CustomShow;
+            chart.CustomShow={ Date:item.Date };
+            if (IFrameSplitOperator.IsNumber(item.Time)) chart.CustomShow.Time=item.Time;
+            if (IFrameSplitOperator.IsPlusNumber(item.PageSize)) chart.CustomShow.PageSize=item.PageSize;
+        }
+
         if (option.EnableFlowCapital)
         {
             var item=option.EnableFlowCapital;
@@ -45416,6 +45425,51 @@ function IFrameSplitOperator()
     }
 
     this.SetOption=function(option) { }
+
+    //计算上下预留
+    this.ReservedHeight=function(splitData)
+    {
+        if (!this.Frame) return;
+        if (this.Frame.IsHScreen) return;   //横屏以后再搞
+
+        var yReserved=this.Frame.HorizontalReserved;
+        if (!yReserved) return;
+
+        var reservedHeight=0;
+        if (IFrameSplitOperator.IsPlusNumber(yReserved.Top)) reservedHeight+=yReserved.Top;
+        if (IFrameSplitOperator.IsPlusNumber(yReserved.Bottom)) reservedHeight+=yReserved.Bottom;
+        if (reservedHeight<=0) return;
+
+        var border=this.Frame.GetBorder();
+        var top=border.TopEx;
+        var bottom=border.BottomEx;
+        var srcHeight=bottom-top;
+        if (srcHeight<reservedHeight) return;
+
+        var max=splitData.Max;
+        var min=splitData.Min;
+        if (IFrameSplitOperator.IsPlusNumber(yReserved.Top)) top-=yReserved.Top;
+        if (IFrameSplitOperator.IsPlusNumber(yReserved.Bottom)) bottom+=yReserved.Bottom;
+
+        var value=(max-min)/(bottom-top);   //1个像素点对应的数值
+        if (IFrameSplitOperator.IsPlusNumber(yReserved.Top))
+        {
+            var topValue=value*yReserved.Top;
+            max+=topValue;
+        }
+        
+        if (IFrameSplitOperator.IsPlusNumber(yReserved.Bottom))
+        {
+            var bottomValue=value*yReserved.Bottom;
+            min-=bottomValue;
+        }
+
+        splitData.Max=max;
+        splitData.Min=min;
+
+        this.Frame.HorizontalMax=splitData.Max;
+        this.Frame.HorizontalMin=splitData.Min;
+    }
 }
 
 //字符串格式化 千分位分割
@@ -46068,6 +46122,8 @@ function FrameSplitKLinePriceY()
         }
         */
 
+        this.ReservedHeight(splitData); //预留高度
+        
         JSConsole.Chart.Log(`[FrameSplitKLinePriceY::Operator] fixed . Max=${splitData.Max} Min=${splitData.Min} Count=${splitData.Count}`);
 
         if (this.GetEventCallback)
@@ -46906,50 +46962,6 @@ function FrameSplitY()
         }
     }
 
-    this.ReservedHeight=function(splitData)
-    {
-        if (this.Frame.IsHScreen) return;   //横屏以后再搞
-
-        var yReserved=this.Frame.HorizontalReserved;
-        if (!yReserved) return;
-
-        var reservedHeight=0;
-        if (IFrameSplitOperator.IsPlusNumber(yReserved.Top)) reservedHeight+=yReserved.Top;
-        if (IFrameSplitOperator.IsPlusNumber(yReserved.Bottom)) reservedHeight+=yReserved.Bottom;
-        if (reservedHeight<=0) return;
-
-        var border=this.Frame.GetBorder();
-        var top=border.TopEx;
-        var bottom=border.BottomEx;
-        var srcHeight=bottom-top;
-        if (srcHeight<reservedHeight) return;
-
-        var max=splitData.Max;
-        var min=splitData.Min;
-        if (IFrameSplitOperator.IsPlusNumber(yReserved.Top)) top-=yReserved.Top;
-        if (IFrameSplitOperator.IsPlusNumber(yReserved.Bottom)) bottom+=yReserved.Bottom;
-
-        var value=(max-min)/(bottom-top);   //1个像素点对应的数值
-        if (IFrameSplitOperator.IsPlusNumber(yReserved.Top))
-        {
-            var topValue=value*yReserved.Top;
-            max+=topValue;
-        }
-        
-        if (IFrameSplitOperator.IsPlusNumber(yReserved.Bottom))
-        {
-            var bottomValue=value*yReserved.Bottom;
-            min-=bottomValue;
-        }
-
-        splitData.Max=max;
-        splitData.Min=min;
-
-        this.Frame.HorizontalMax=splitData.Max;
-        this.Frame.HorizontalMin=splitData.Min;
-    }
-
-
     this.FormatValueString=function(value)
     {
         var text;
@@ -55746,6 +55758,7 @@ IChartDrawPicture.ArrayDrawPricture=
     { Name:"PriceRange", ClassName:"ChartPriceRange", Create:function() { return new ChartPriceRange(); }},
     { Name:"DateRange", ClassName:"ChartDateRange", Create:function() { return new ChartDateRange(); }},
     { Name:"InfoLine", ClassName:"ChartInfoLine", Create:function() { return new ChartInfoLine(); }},
+    { Name:"TrendAngle", ClassName:"ChartTrendAngle", Create:function() { return new ChartTrendAngle(); }}
 ];
 
 IChartDrawPicture.MapIonFont=new Map(
@@ -55910,6 +55923,103 @@ function ChartDrawPictureLine()
     }
 }
 
+//趋势线角度
+function ChartTrendAngle()
+{
+    this.newMethod=ChartDrawPictureLine;   //派生
+    this.newMethod();
+    delete this.newMethod;
+
+    this.ClassName='ChartTrendAngle';
+    this.AngleLineLength=100;
+    this.AngleLineDash=[3,3];
+    this.Font=12*GetDevicePixelRatio() +"px 微软雅黑";
+    this.Super_SetOption=this.SetOption;    //父类函数
+
+    this.SetOption=function(option)
+    {
+        if (this.Super_SetOption) this.Super_SetOption(option);
+        if (option)
+        {
+            if (IFrameSplitOperator.IsNumber(option.AngleLineLength)) this.AngleLineLength=option.AngleLineLength;
+            if (option.Font) this.Font=option.Font;
+            if (option.AngleLineDash) this.AngleLineDash=option.AngleLineDash;
+        }
+    }
+
+    this.Draw=function()
+    {
+        this.LinePoint=[];
+        if (this.IsFrameMinSize()) return;
+        if (!this.IsShow) return;
+
+        var drawPoint=this.CalculateDrawPoint( {IsCheckX:true, IsCheckY:false} );
+        if (!drawPoint) return;
+        if (drawPoint.length!=2) return;
+
+        this.ClipFrame();
+
+        var ptStart=drawPoint[0];
+        var ptEnd=drawPoint[1];
+
+        this.SetLineWidth();
+        this.Canvas.strokeStyle=this.LineColor;
+        this.Canvas.beginPath();
+        this.Canvas.moveTo(ptStart.X,ptStart.Y);
+        this.Canvas.lineTo(ptEnd.X,ptEnd.Y);
+        this.Canvas.stroke();
+        this.RestoreLineWidth();
+
+        this.DrawAngle(ptStart, ptEnd);
+
+        var line={Start:ptStart, End:ptEnd};
+        this.LinePoint.push(line);
+        
+        this.DrawPoint(drawPoint);  //画点
+        this.Canvas.restore();
+    }
+
+    this.DrawAngle=function(ptStart, ptEnd)
+    {
+        var pixelRatio=GetDevicePixelRatio();
+        var angle=this.CalculateAngle(ptStart.X, ptStart.Y, ptEnd.X, ptEnd.Y);  //角度
+        var lineLength=this.AngleLineLength*pixelRatio; //角度线长度
+        var ptRight={ X:ptStart.X+lineLength, Y:ptStart.Y };
+
+        if (this.AngleLineDash) this.Canvas.setLineDash(this.AngleLineDash); //画虚线
+
+        this.Canvas.lineWidth=1*GetDevicePixelRatio();
+        this.Canvas.beginPath();
+        this.Canvas.moveTo(ToFixedPoint(ptStart.X),ToFixedPoint(ptStart.Y));
+        this.Canvas.lineTo(ToFixedPoint(ptRight.X),ToFixedPoint(ptRight.Y));
+        this.Canvas.stroke();
+
+        this.Canvas.beginPath();
+        if (angle<=180)
+        {
+            this.Canvas.arc(ptStart.X,ToFixedPoint(ptStart.Y),lineLength,0,(Math.PI / 180)*(360-angle), true);
+            var text=`${angle.toFixed(0)}°`;
+        }
+        else
+        {
+            this.Canvas.arc(ptStart.X,ToFixedPoint(ptStart.Y),lineLength,0,(Math.PI / 180)*(360-angle), false);
+            var text=`${(angle-360).toFixed(0)}°`;
+        }
+        
+        this.Canvas.stroke();
+
+        this.Canvas.textAlign="left";
+        this.Canvas.textBaseline="middle";
+        this.Canvas.font=this.Font;
+        this.Canvas.fillStyle=this.LineColor;
+
+        if (this.AngleLineDash) this.Canvas.setLineDash([]);
+
+       
+        this.Canvas.fillText(text,ptRight.X+5,ptRight.Y);
+    }
+}
+
 //画图工具-涂鸦线段 Y轴关联数值， X轴不关联
 function ChartDrawGraffitiLine()
 {
@@ -68189,7 +68299,7 @@ function KLineChartContainer(uielement,OffscreenElement, cacheElement)
     this.SourceDataLimit=new Map();     //每个周期缓存数据最大个数 key=周期 value=最大个数 
     this.CtrlMoveStep=5;                //Ctrl+(Left/Right) 移动数据个数  
 
-    this.CustomShow=null;               //首先显示的K线的起始日期 { Date:日期 PageSize:}
+    this.CustomShow=null;               //首先显示的K线的起始日期 { Date:日期, Time:时间, PageSize:}
     this.ZoomType=0;                    //缩放模式 0=最右边固定缩放, 1=十字光标两边缩放
     this.IsZoomLockRight=false;         
     this.KLineSize=null;                //{ DataWidth:, }
@@ -68775,47 +68885,7 @@ function KLineChartContainer(uielement,OffscreenElement, cacheElement)
             var hisData=this.ChartOperator_Temp_GetHistroyData();
             if (!hisData) return;  //数据还没有到达
 
-            var index=null;
-            if (ChartData.IsDayPeriod(this.Period,true))
-            {
-                for(var i=0;i<hisData.Data.length;++i)
-                {
-                    var item=hisData.Data[i];
-                    if (item.Date>=obj.Date)
-                    {
-                        index=i;
-                        break;
-                    }
-                }
-            }
-            else if (ChartData.IsMinutePeriod(this.Period,true))
-            {
-                let findTime=obj.Time;
-                if (IFrameSplitOperator.IsPlusNumber(findTime))
-                {
-                    for(var i=0;i<hisData.Data.length;++i)
-                    {
-                        var item=hisData.Data[i];
-                        if (item.Date>obj.Date || (item.Date==obj.Date && item.Time>=findTime))
-                        {
-                            index=i;
-                            break;
-                        }
-                    }
-                }
-                else    //只有日期
-                {
-                    for(var i=0;i<hisData.Data.length;++i)
-                    {
-                        var item=hisData.Data[i];
-                        if (item.Date>=obj.Date)
-                        {
-                            index=i;
-                            break;
-                        }
-                    }
-                }
-            }
+            var index=this.ChartOperator_GetIndex_ByDateTime(hisData, obj, this.Period, 0);
 
             if (index===null) 
             {
@@ -68935,6 +69005,63 @@ function KLineChartContainer(uielement,OffscreenElement, cacheElement)
         this.UpdatePointByCursorIndex();   //更新十字光标位子
     }
 
+    //定位K线的索引
+    //searchType 0模糊匹配  1=精确匹配
+    this.ChartOperator_GetIndex_ByDateTime=function(hisData, dateTime, period, searchType)
+    {
+        if (!hisData) return null;  //数据还没有到达
+        if (!IFrameSplitOperator.IsNonEmptyArray(hisData.Data)) return null;
+        if (!IFrameSplitOperator.IsPlusNumber(dateTime.Date) || dateTime.Date<19810101) return null;
+
+        if (ChartData.IsDayPeriod(period, true))
+        {
+            for(var i=0;i<hisData.Data.length;++i)
+            {
+                var item=hisData.Data[i];
+                if (searchType==1)
+                {
+                    if (item.Date==dateTime.Date) return i;
+                }
+                else
+                {
+                    if (item.Date>=dateTime.Date) return i;
+                }
+            }
+
+            return null;
+        }
+
+        if (ChartData.IsMinutePeriod(period,true) || ChartData.IsMilliSecondPeriod(period))
+        {
+            var findTime=null;
+            if (IFrameSplitOperator.IsNumber(dateTime.Time)) findTime=dateTime.Time;
+            for(var i=0;i<hisData.Data.length;++i)
+            {
+                var item=hisData.Data[i];
+                if (searchType==1)  //精确匹配
+                {
+                    if (findTime==null) return null;
+                    if (item.Date==dateTime.Date && item.Time==findTime) return i;
+                }
+                else
+                {
+                    if (findTime==null) //只有日期
+                    {
+                        if (item.Date>=dateTime.Date) return i;
+                    }
+                    else
+                    {
+                        if (item.Date>dateTime.Date || (item.Date==dateTime.Date && item.Time>=findTime)) return i;
+                    }
+                }
+            }
+
+            return null;
+        }
+
+        return null;
+    }
+
     this.OnWheel=function(e)
     {
         JSConsole.Chart.Log('[KLineChartContainer::OnWheel]',e);
@@ -69553,37 +69680,21 @@ function KLineChartContainer(uielement,OffscreenElement, cacheElement)
 
     this.SetCustomShow=function(customShow,hisData)
     {
-        if (!customShow || !customShow.Date || customShow.Date<19910101) return;
-
-        var firstDate=customShow.Date;
-        var index=null;
-        for(var i =0;i<hisData.Data.length;++i)
-        {
-            var item=hisData.Data[i];
-            if (item.Date>=firstDate)
-            {
-                index=i;
-                break;
-            }
-        }
+        var index=this.ChartOperator_GetIndex_ByDateTime(hisData,customShow, this.Period, 0);
         if (index===null) 
         {
-            JSConsole.Chart.Log(`[KLineChartContainer::SetCustomShow] Can't find first date=${firstDate}`);
+            JSConsole.Chart.Log("[KLineChartContainer::SetCustomShow] Can't find index by customShow=",customShow);
             return;
         }
 
-        var count=hisData.Data.length-index;
-        if (customShow.PageSize>0) count=customShow.PageSize;
-        
-        var customShowCount=count;
-        var pageSize=this.GetMaxMinPageSize();
-        if (count>pageSize.Max) customShowCount=pageSize.Max;
-        else if (count<pageSize.Min) customShowCount=pageSize.Min;
-        
-        for(var i in this.Frame.SubFrame)
+        if (IFrameSplitOperator.IsPlusNumber(customShow.PageSize))  //调整一屏显示个数 否则使用默认的
         {
-            var item =this.Frame.SubFrame[i].Frame;
-            item.XPointCount=customShowCount;
+            var showCount=customShow.PageSize;
+            for(var i=0;i<this.Frame.SubFrame.length; ++i)
+            {
+                var item =this.Frame.SubFrame[i].Frame;
+                item.XPointCount=showCount;
+            }
         }
         
         this.ChartPaint[0].Data.DataOffset=index;
@@ -71731,15 +71842,40 @@ function KLineChartContainer(uielement,OffscreenElement, cacheElement)
         }
     }
 
+    this.SetFrameAttribute=function(windowIndex, attr)
+    {
+        if (!window || !this.Frame.SubFrame[windowIndex] || !this.Frame.SubFrame[windowIndex].Frame) return;
+        if (!attr) return;
+
+        var frame=this.Frame.SubFrame[windowIndex].Frame;
+
+        if (!IFrameSplitOperator.IsUndefined(attr.HorizontalReserved)) frame.HorizontalReserved=attr.HorizontalReserved;    //Y轴上下预留
+        if (IFrameSplitOperator.IsNumber(attr.TitleHeight)) frame.ChartBorder.TitleHeight=attr.TitleHeight;                 //指标标题高度
+    }
+
+    this.ResetFrameAttribute=function(windowIndex)
+    {
+        if (!window || !this.Frame.SubFrame[windowIndex] || !this.Frame.SubFrame[windowIndex].Frame) return;
+        var frame=this.Frame.SubFrame[windowIndex].Frame;
+
+        frame.HorizontalReserved=null;
+    }
+
+
     //切换成 脚本指标
     this.ChangeScriptIndex=function(windowIndex,indexData,option)
     {
         this.DeleteIndexPaint(windowIndex, true);
         this.WindowIndex[windowIndex]=new ScriptIndex(indexData.Name,indexData.Script,indexData.Args,indexData);    //脚本执行
+        this.ResetFrameAttribute(windowIndex);
 
         if (option)
         {
-            if (option.Window) this.SetFrameToolbar(windowIndex,option.Window);
+            if (option.Window) 
+            {
+                this.SetFrameToolbar(windowIndex,option.Window);
+                this.SetFrameAttribute(windowIndex,option.Window);   //窗口属性
+            }
         }
 
         this.OnChangeIndexEvent(windowIndex, { ID:indexData.ID, Name:indexData.Name, FunctionName:"ChangeScriptIndex" });
@@ -71786,14 +71922,19 @@ function KLineChartContainer(uielement,OffscreenElement, cacheElement)
         //使用API挂接指标数据 API:{ Name:指标名字, Script:指标脚本可以为空, Args:参数可以为空, Url:指标执行地址 }
         var apiItem=indexData.API;
         this.WindowIndex[windowIndex]=new APIScriptIndex(apiItem.Name,apiItem.Script,apiItem.Args,indexData);
+        this.ResetFrameAttribute(windowIndex);
 
         this.OnChangeIndexEvent(windowIndex, { ID:indexData.ID, Name:indexData.Name, FunctionName:"ChangeAPIIndex" });
 
         if (indexData)
         {
-            if (indexData.Window) this.SetFrameToolbar(windowIndex,indexData.Window);
+            if (indexData.Window) 
+            {
+                this.SetFrameToolbar(windowIndex,indexData.Window);
+                this.SetFrameAttribute(windowIndex,indexData.Window);   //窗口属性
+            }
         }
-
+        
         this.Frame.ClearUpDonwFrameYData({ Index:windowIndex });
         var bindData=this.ChartPaint[0].Data;
         this.BindIndexData(windowIndex,bindData);   //执行脚本
@@ -72871,6 +73012,14 @@ function KLineChartContainer(uielement,OffscreenElement, cacheElement)
                     }
                 }
             }
+
+            if (option.CustomShow && IFrameSplitOperator.IsPlusNumber(option.CustomShow.Date))
+            {
+                var item=option.CustomShow;
+                this.CustomShow={ Date:item.Date };
+                if (IFrameSplitOperator.IsNumber(item.Time)) this.CustomShow.Time=item.Time;
+                if (IFrameSplitOperator.IsPlusNumber(item.PageSize)) this.CustomShow.PageSize=item.PageSize;
+            }
         }
 
         this.ReloadChartDrawPicture();

package/src/jscommon/umychart.resource/css/tools.css

@@ -1467,6 +1467,7 @@ input[type="color"] {
 .UMyChart_Draw_Modify_Dialog_Drag_Div
 {
     width:24px;
+    user-select: none;
 }
 
 .UMyChart_Draw_Modify_Dialog_Button_Div

package/src/jscommon/umychart.resource/font/drawtool/demo_index.html

@@ -54,6 +54,12 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon hqchart_drawtool">&#xe60c;</span>
+                <div class="name">趋势线角度</div>
+                <div class="code-name">&amp;#xe60c;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon hqchart_drawtool">&#xe64a;</span>
                 <div class="name">info line</div>
@@ -438,9 +444,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'hqchart_drawtool';
-  src: url('iconfont.woff2?t=1716274976221') format('woff2'),
-       url('iconfont.woff?t=1716274976221') format('woff'),
-       url('iconfont.ttf?t=1716274976221') format('truetype');
+  src: url('iconfont.woff2?t=1716529516458') format('woff2'),
+       url('iconfont.woff?t=1716529516458') format('woff'),
+       url('iconfont.ttf?t=1716529516458') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -466,6 +472,15 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon hqchart_drawtool icon-qushixianjiaodu"></span>
+            <div class="name">
+              趋势线角度
+            </div>
+            <div class="code-name">.icon-qushixianjiaodu
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon hqchart_drawtool icon-infoline"></span>
             <div class="name">
@@ -1042,6 +1057,14 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-qushixianjiaodu"></use>
+                </svg>
+                <div class="name">趋势线角度</div>
+                <div class="code-name">#icon-qushixianjiaodu</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-infoline"></use>

package/src/jscommon/umychart.resource/font/drawtool/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "hqchart_drawtool"; /* Project id 4529603 */
-  src: url('iconfont.woff2?t=1716274976221') format('woff2'),
-       url('iconfont.woff?t=1716274976221') format('woff'),
-       url('iconfont.ttf?t=1716274976221') format('truetype');
+  src: url('iconfont.woff2?t=1716529516458') format('woff2'),
+       url('iconfont.woff?t=1716529516458') format('woff'),
+       url('iconfont.ttf?t=1716529516458') format('truetype');
 }
 
 .hqchart_drawtool {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-qushixianjiaodu:before {
+  content: "\e60c";
+}
+
 .icon-infoline:before {
   content: "\e64a";
 }