hqchart 1.1.15018 → 1.1.15026

package/src/jscommon/umychart.DialogTooltip.js

@@ -2358,6 +2358,7 @@ function JSSmallFloatTooltip()
     this.DivDialog=null;
     this.DivContent=null;
     this.HQChart=null;
+    this.ClassName="JSSmallFloatTooltip";
 
     this.Destroy=function()
     {
@@ -2445,23 +2446,242 @@ function JSSmallFloatTooltip()
     }
 }
 
+
+function JSSmallFloatTooltipV2()
+{
+    this.newMethod=JSSmallFloatTooltip;   //派生
+    this.newMethod();
+    delete this.newMethod;
+
+    this.ClassName="JSSmallFloatTooltipV2";
+
+    this.AryData=[];    //输出文字信息
+    this.AryText=[];    //表格tr
+    this.MaxRowCount=25;
+
+    this.BGColor=g_JSChartResource.SmallFloatTooltipV2.BGColor;
+    this.BorderColor=g_JSChartResource.SmallFloatTooltipV2.BorderColor;
+
+    this.TextColor=g_JSChartResource.SmallFloatTooltipV2.TextColor;
+    this.ValueColor=g_JSChartResource.SmallFloatTooltipV2.ValueColor;
+
+    this.ValueAlign=
+    {
+        Left:"UMyChart_Small_Tooltip_V2_Text2_Span",       //左对齐
+        MarginLeft:'UMyChart_Small_Tooltip_V2_Text3_Span',
+        Right:"UMyChart_Small_Tooltip_V2_Text_Span",
+    }
+
+    this.TitleAlign=
+    {
+        Default:"UMyChart_Small_Tooltip_V2_Title_Span",   //标题默认
+    }
+
+    this.Destroy=function()
+    {
+        this.AryData=[];
+        this.AryText=[];
+        this.HQChart=null;
+
+        if (this.DivDialog) 
+        {
+            document.body.removeChild(this.DivDialog);
+            this.DivDialog=null;
+        }
+    }
+
+    this.Create=function()
+    {
+        var divDom=document.createElement("div");
+        divDom.className='UMyChart_Small_Tooltip_V2_Div';
+
+        var table=document.createElement("table");
+        table.className="UMyChart_Small_Tooltip_V2_Table";
+        divDom.appendChild(table);
+
+        var tbody=document.createElement("tbody");
+        tbody.className="UMyChart_Small_Tooltip_V2_Tbody";
+        table.appendChild(tbody);
+
+        this.AryData=[];
+        
+        for(var i=0;i<this.MaxRowCount;++i)
+        {
+            var rowItem={ Tr:null, TitleSpan:null, TextSpan:null, TitleTd:null, TextTd:null };
+
+            var trDom=document.createElement("tr");
+            trDom.className='UMyChart_Small_Tooltip_V2_Group_Tr';
+            tbody.appendChild(trDom);
+            rowItem.Tr=trDom;
+
+            var tdDom=document.createElement("td");
+            tdDom.className="UMyChart_Small_Tooltip_V2_Title_Td";   //标题
+            trDom.appendChild(tdDom);
+            rowItem.TitleTd=tdDom;
+
+            var spanDom=document.createElement("span");
+            spanDom.className=this.TitleAlign.Default;
+            spanDom.innerText='标题';
+            tdDom.appendChild(spanDom);
+            rowItem.TitleSpan=spanDom;
+
+            var tdDom=document.createElement("td");
+            tdDom.className="UMyChart_Small_Tooltip_V2_Text_Td";    //数值
+            trDom.appendChild(tdDom);
+            rowItem.TextTd=tdDom;
+
+            var spanDom=document.createElement("span");
+            spanDom.className='UMyChart_Small_Tooltip_V2_Text_Span';
+            spanDom.innerText='数值';
+            tdDom.appendChild(spanDom);
+            rowItem.TextSpan=spanDom;
+
+            this.AryData.push(rowItem);
+        }
+        
+        document.body.appendChild(divDom);
+
+        this.DivDialog=divDom;
+        
+        this.UpdateStyle();
+    }
+
+    this.UpdateStyle=function()
+    {
+        if (!this.DivDialog) return;
+
+        if (this.BGColor) this.DivDialog.style['background-color']=this.BGColor;
+        if (this.BorderColor) this.DivDialog.style['border-color']=this.BorderColor;
+    }
+
+    this.Update=function(data)
+    {
+        if (!this.DivDialog) return;
+
+        this.AryText=[];
+        for(var i=0;i<data.AryData.length;++i)
+        {
+            var item=data.AryData[i];
+            if (item.Type==1) this.UpdateDefaultTooltip(item);
+            //else if (item.Type==2) this.Updateddd();
+        }
+
+        this.UpdateTableDOM();
+        this.ShowTooltip(data);
+    }
+
+    this.UpdateDefaultTooltip=function(data)
+    {
+        var text=data.Data.Text;
+        var rowItem={ Text:"", HTMLTitle:text, Color:this.ValueColor, IsMergeCell:true };
+        this.AryText.push(rowItem);
+    }
+
+    this.UpdateTableDOM=function()
+    {
+        var index=0;
+        for(index=0;index<this.AryText.length && index<this.MaxRowCount;++index)
+        {
+            var outItem=this.AryText[index];
+            var item=this.AryData[index];
+
+            if (outItem.HTMLTitle) item.TitleSpan.innerHTML=outItem.HTMLTitle
+            else item.TitleSpan.innerText=outItem.Title;
+
+            if (outItem.TitleColor) item.TitleSpan.style.color=outItem.TitleColor;
+            else item.TitleSpan.style.color=this.TextColor;
+
+            if (outItem.HTMLText) item.TextSpan.innerHTML=outItem.HTMLText
+            else item.TextSpan.innerText=outItem.Text;
+
+            item.TextSpan.style.color=outItem.Color;
+            item.TextTd.style.color=outItem.Color;
+
+            if (outItem.ClassName) 
+            {
+                item.TextSpan.className=outItem.ClassName;
+            }
+            else
+            {
+                if (item.TextSpan.className!=this.ValueAlign.Right) item.TextSpan.className=this.ValueAlign.Right;
+            }
+
+            if (outItem.TitleClassName)
+            {
+                item.TitleSpan.className=outItem.TitleClassName;
+            }
+            else
+            {
+                if (item.TitleSpan.className!=this.TitleAlign.Default) item.TitleSpan.className=this.TitleAlign.Default;
+            }
+
+            if (outItem.IsMergeCell)    //合并单元格
+            {
+                item.TitleTd.colspan=2;
+                item.TextTd.style.display="none";
+            }
+            else
+            {
+                if (item.TitleTd.colspan!=1) item.TitleTd.colspan=1;
+                item.TextTd.style.display="";
+            }
+           
+            item.Tr.style.display="";
+            if (item.Tr2) item.Tr2.style.display="none";
+
+        }
+
+        for( ; index<this.MaxRowCount; ++index)
+        {
+            var item=this.AryData[index];
+            item.Tr.style.display="none";
+            if (item.Tr2) item.Tr2.style.display="none";
+        }
+    }
+}
+
 function JSSmallFloatTooltipGroup()
 {
     this.AryTooltip=[];
     this.HQChart=null;
     this.MaxCount=5;
+    this.MaxRowCount=15;
+    this.Style=0;
 
     this.Inital=function(hqchart, option)
     {
         this.HQChart=hqchart;
+        if (option)
+        {
+            if (IFrameSplitOperator.IsNumber(option.Style)) this.Style=option.Style;
+            if (IFrameSplitOperator.IsNumber(option.MaxRowCount)) this.Style=option.MaxRowCount;
+            if (IFrameSplitOperator.IsNumber(option.MaxCount)) this.Style=option.MaxCount;
+        }
+    }
+
+    this.CreateTooltipDom=function()
+    {
+        var item=null;
+        if (this.Style==1)
+        {
+            item=new JSSmallFloatTooltipV2();
+            item.MaxRowCount=this.MaxRowCount;
+        }
+        else 
+        {
+            item=new JSSmallFloatTooltip();
+        }
+
+        item.HQChart=this.HQChart;
+        return item;
     }
 
     this.Create=function()
     {
         for(var i=0;i<this.MaxCount;++i)
         {
-            var item=new JSSmallFloatTooltip();
-            item.HQChart=this.HQChart;
+            var item=this.CreateTooltipDom();
+            
             item.Create();
             this.AryTooltip.push(item);
         }
@@ -2480,6 +2700,12 @@ function JSSmallFloatTooltipGroup()
 
     this.Update=function(data)
     {
+        if (this.Style==1)
+        {
+            this.UpdateV2(data);
+            return;
+        }
+
         var tooltipData=data.Tooltip;
         var pixelTatio = GetDevicePixelRatio();
         if (pixelTatio===0) pixelTatio=1;   
@@ -2501,6 +2727,47 @@ function JSSmallFloatTooltipGroup()
         }
     }
 
+    //Style==1 同价格合并输出
+    this.UpdateV2=function(data)
+    {
+        var tooltipData=data.Tooltip;
+        var pixelTatio = GetDevicePixelRatio();
+        if (pixelTatio===0) pixelTatio=1;
+        
+        var x=tooltipData.X/pixelTatio;
+        var mapTooltip=new Map();   //根据Y轴 归类
+        for(var i=0; i<tooltipData.AryData.length;++i)
+        {
+            var item=tooltipData.AryData[i];
+            var key=parseInt(item.Y);
+            if (mapTooltip.has(key))
+            {
+                var mapItem=mapTooltip.get(key);
+                mapItem.AryData.push(item);
+            }
+            else
+            {
+                mapTooltip.set(key, { Key:key, Point:{ X:x, Y:item.Y/pixelTatio }, AryData:[ item ] });
+            }
+        }
+
+        var aryData=[];
+        for(var mapItem of mapTooltip) aryData.push(mapItem[1]);
+
+        for(var i=0; i<aryData.length && i<this.AryTooltip.length; ++i)
+        {
+            var item=aryData[i];
+            var tooltipItem=this.AryTooltip[i];
+            tooltipItem.Update(item);
+        }
+
+        for(var i=tooltipData.AryData.length; i<this.AryTooltip.length; ++i)
+        {
+            var item=this.AryTooltip[i];
+            item.Hide();
+        }
+    }
+
     this.Hide=function()
     {
         for(var i=0;i<this.AryTooltip.length;++i)

package/src/jscommon/umychart.js

@@ -6372,12 +6372,20 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
         canvas.clearRect(0,0,this.UIElement.width,this.UIElement.height);
     }
 
+    this.ClearCorssCursorCanvas=function()
+    {
+        if (!this.CorssCursorCanvas) return;
+
+        this.CorssCursorCanvas.clearRect(0,0,this.CorssCursorElement.width,this.CorssCursorElement.height);
+    }
+
     this.Draw=function()
     {
         if (this.ChartCorssCursor) this.ChartCorssCursor.Status=0;
         if (this.UIElement.width<=0 || this.UIElement.height<=0) return; 
 
         this.StopDrawDynamicInfo();
+        this.ClearCorssCursorCanvas();
 
         var event=this.GetEventCallback(JSCHART_EVENT_ID.ON_BEFORE_DRAW);
         if (event && event.Callback)
@@ -6551,7 +6559,6 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
                 if (this.CorssCursorCanvas) //独立的十字光标层
                 {
                     this.ChartCorssCursor.Canvas=this.CorssCursorCanvas;
-                    this.ChartCorssCursor.Canvas.clearRect(0,0,this.CorssCursorElement.width,this.CorssCursorElement.height)
                     bRestoreCanvas=true;
                 }
 
@@ -7355,6 +7362,7 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
     {
         if (!this.ChartCorssCursor) return null;
         if (this.ChartCorssCursor.Status===0) return null;
+        if (!this.ChartCorssCursor.IsShowCorss) return null;
 
         var kItem=this.ChartCorssCursor.StringFormatX.KItem;
         if (!kItem) return null;
@@ -54793,6 +54801,8 @@ IFrameSplitOperator.FormatDateTimeStringV2=function(datetime, format, languageID
 
         case "HH:MM:SS":
             return `${IFrameSplitOperator.NumberToString(datetime.getHours())}:${IFrameSplitOperator.NumberToString(datetime.getMinutes())}:${IFrameSplitOperator.NumberToString(datetime.getSeconds())}`;
+        case "MM:SS":
+            return `${IFrameSplitOperator.NumberToString(datetime.getMinutes())}:${IFrameSplitOperator.NumberToString(datetime.getSeconds())}`;
         case "HH:MM":
             return `${IFrameSplitOperator.NumberToString(datetime.getHours())}:${IFrameSplitOperator.NumberToString(datetime.getMinutes())}`;
         case "HH:MM:SS.fff":
@@ -57882,7 +57892,7 @@ function ChartCorssCursor()
 
     //内部使用
     this.Close=null;     //收盘价格
-    this.Status=0;       //当前状态 0=隐藏 1=显示
+    this.Status=0;       //当前状态 0=隐藏 1=显示底部  2=十字线
 
     this.ReloadResource=function(resource)
     {
@@ -77453,6 +77463,15 @@ function JSChartResource()
         ValueColor:"rgb(0,0,0)",            //数值
     };
 
+    this.SmallFloatTooltipV2=
+    {
+        BGColor:'rgb(250,250,250)',         //背景色
+        BorderColor:'rgb(20,20,20)',        //边框颜色
+
+        TextColor:"rgb(0,0,0)",             //数值名称
+        ValueColor:"rgb(0,0,0)",            //数值
+    };
+
     //区间统计
     this.DialogSelectRect=
     {
@@ -79238,8 +79257,20 @@ function JSChartResource()
 
         if (style.ChartDrawTVLongPosition) this.SetChartDrawTVLongPosition(style.ChartDrawTVLongPosition);
         if (style.KLineCountDownPaint) this.SetKLineCountDownPaint(style.KLineCountDownPaint);
+
+        if (style.SmallFloatTooltipV2) this.SetSmallFloatTooltipV2(style.SmallFloatTooltipV2);
     }
 
+    this.SetSmallFloatTooltipV2=function(style)
+    {
+        var dest=this.SmallFloatTooltipV2;
+
+        if (style.BGColor) dest.BGColor=style.BGColor;
+        if (style.BorderColor) dest.BorderColor=style.BorderColor;
+
+        if (style.TextColor) dest.TextColor=style.TextColor;
+        if (style.ValueColor) dest.ValueColor=style.ValueColor;
+    }
 
     this.SetKLineCountDownPaint=function(style)
     {

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

@@ -2000,7 +2000,7 @@ input[type="color"] {
 
 
 /*
-    小浮窗
+    十字光标小浮窗
 */
 .UMyChart_Small_Tooltip_Div
 {
@@ -2024,6 +2024,76 @@ input[type="color"] {
     margin: 5px 5px 5px 5px;
 }
 
+/*
+    十字光标小浮窗V2
+*/
+.UMyChart_Small_Tooltip_V2_Div
+{
+    font-family: "微软雅黑";
+    /*display: flex;*/
+    border: 1px solid; 
+    width:fit-content;
+    border-color: rgb(204,204,204);
+    visibility:hidden;
+    position: absolute;
+    background-color: rgba(20,20,20,1);
+    left:1px;
+    top:1px;
+    pointer-events:none;
+    z-index: 98;
+}
+
+
+.UMyChart_Small_Tooltip_V2_Table
+{
+    border-spacing: 3px;
+    user-select: none;
+    font-size:12px;
+}
+
+.UMyChart_Small_Tooltip_V2_Group_Tr
+{
+    
+}
+
+.UMyChart_Small_Tooltip_V2_Title_Td
+{
+    min-width: 40px;
+}
+
+.UMyChart_Small_Tooltip_V2_Text_Td
+{
+    min-width:80px;
+    max-width: 500px;
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.UMyChart_Tooltip_Float_Title_Span
+{
+    color: rgb(230,230,230);
+}
+
+.UMyChart_Small_Tooltip_V2_Text_Span
+{
+    float: right;
+    margin-right: 1px;
+    color: rgb(230,230,230);
+}
+
+.UMyChart_Tooltip_Float_Text2_Span
+{
+    margin-left: 1px;
+}
+
+.UMyChart_Tooltip_Float_Text3_Span
+{
+    margin-left: 5px;
+    
+}
+
 /*
     Copyright (c) 2018 jones
  

package/src/jscommon/umychart.style.js

@@ -483,6 +483,15 @@ function GetBlackStyle()
             ValueColor:"rgb(210,210,210)",            //数值
         },
 
+        SmallFloatTooltipV2:
+        {
+            BGColor:'rgb(20,20,20)',            //背景色
+            BorderColor:'rgb(170,170,170)',     //边框颜色
+
+            TextColor:"rgb(210,210,210)",             //数值名称
+            ValueColor:"rgb(210,210,210)",            //数值
+        },
+
         DialogSelectRect:
         {
             BGColor:'rgb(20,20,20)',            //背景色

package/src/jscommon/umychart.uniapp.h5/umychart.uniapp.h5.js

@@ -10468,12 +10468,20 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
         canvas.clearRect(0,0,this.UIElement.width,this.UIElement.height);
     }
 
+    this.ClearCorssCursorCanvas=function()
+    {
+        if (!this.CorssCursorCanvas) return;
+
+        this.CorssCursorCanvas.clearRect(0,0,this.CorssCursorElement.width,this.CorssCursorElement.height);
+    }
+
     this.Draw=function()
     {
         if (this.ChartCorssCursor) this.ChartCorssCursor.Status=0;
         if (this.UIElement.width<=0 || this.UIElement.height<=0) return; 
 
         this.StopDrawDynamicInfo();
+        this.ClearCorssCursorCanvas();
 
         var event=this.GetEventCallback(JSCHART_EVENT_ID.ON_BEFORE_DRAW);
         if (event && event.Callback)
@@ -10647,7 +10655,6 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
                 if (this.CorssCursorCanvas) //独立的十字光标层
                 {
                     this.ChartCorssCursor.Canvas=this.CorssCursorCanvas;
-                    this.ChartCorssCursor.Canvas.clearRect(0,0,this.CorssCursorElement.width,this.CorssCursorElement.height)
                     bRestoreCanvas=true;
                 }
 
@@ -11451,6 +11458,7 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
     {
         if (!this.ChartCorssCursor) return null;
         if (this.ChartCorssCursor.Status===0) return null;
+        if (!this.ChartCorssCursor.IsShowCorss) return null;
 
         var kItem=this.ChartCorssCursor.StringFormatX.KItem;
         if (!kItem) return null;
@@ -58889,6 +58897,8 @@ IFrameSplitOperator.FormatDateTimeStringV2=function(datetime, format, languageID
 
         case "HH:MM:SS":
             return `${IFrameSplitOperator.NumberToString(datetime.getHours())}:${IFrameSplitOperator.NumberToString(datetime.getMinutes())}:${IFrameSplitOperator.NumberToString(datetime.getSeconds())}`;
+        case "MM:SS":
+            return `${IFrameSplitOperator.NumberToString(datetime.getMinutes())}:${IFrameSplitOperator.NumberToString(datetime.getSeconds())}`;
         case "HH:MM":
             return `${IFrameSplitOperator.NumberToString(datetime.getHours())}:${IFrameSplitOperator.NumberToString(datetime.getMinutes())}`;
         case "HH:MM:SS.fff":
@@ -61978,7 +61988,7 @@ function ChartCorssCursor()
 
     //内部使用
     this.Close=null;     //收盘价格
-    this.Status=0;       //当前状态 0=隐藏 1=显示
+    this.Status=0;       //当前状态 0=隐藏 1=显示底部  2=十字线
 
     this.ReloadResource=function(resource)
     {
@@ -81549,6 +81559,15 @@ function JSChartResource()
         ValueColor:"rgb(0,0,0)",            //数值
     };
 
+    this.SmallFloatTooltipV2=
+    {
+        BGColor:'rgb(250,250,250)',         //背景色
+        BorderColor:'rgb(20,20,20)',        //边框颜色
+
+        TextColor:"rgb(0,0,0)",             //数值名称
+        ValueColor:"rgb(0,0,0)",            //数值
+    };
+
     //区间统计
     this.DialogSelectRect=
     {
@@ -83334,8 +83353,20 @@ function JSChartResource()
 
         if (style.ChartDrawTVLongPosition) this.SetChartDrawTVLongPosition(style.ChartDrawTVLongPosition);
         if (style.KLineCountDownPaint) this.SetKLineCountDownPaint(style.KLineCountDownPaint);
+
+        if (style.SmallFloatTooltipV2) this.SetSmallFloatTooltipV2(style.SmallFloatTooltipV2);
     }
 
+    this.SetSmallFloatTooltipV2=function(style)
+    {
+        var dest=this.SmallFloatTooltipV2;
+
+        if (style.BGColor) dest.BGColor=style.BGColor;
+        if (style.BorderColor) dest.BorderColor=style.BorderColor;
+
+        if (style.TextColor) dest.TextColor=style.TextColor;
+        if (style.ValueColor) dest.ValueColor=style.ValueColor;
+    }
 
     this.SetKLineCountDownPaint=function(style)
     {
@@ -136477,6 +136508,15 @@ function GetBlackStyle()
             ValueColor:"rgb(210,210,210)",            //数值
         },
 
+        SmallFloatTooltipV2:
+        {
+            BGColor:'rgb(20,20,20)',            //背景色
+            BorderColor:'rgb(170,170,170)',     //边框颜色
+
+            TextColor:"rgb(210,210,210)",             //数值名称
+            ValueColor:"rgb(210,210,210)",            //数值
+        },
+
         DialogSelectRect:
         {
             BGColor:'rgb(20,20,20)',            //背景色
@@ -153133,7 +153173,7 @@ function ScrollBarBGChart()
 
 
 
-var HQCHART_VERSION="1.1.15017";
+var HQCHART_VERSION="1.1.15025";
 
 function PrintHQChartVersion()
 {

package/src/jscommon/umychart.version.js

@@ -5,7 +5,7 @@
 
 
 
-var HQCHART_VERSION="1.1.15017";
+var HQCHART_VERSION="1.1.15025";
 
 function PrintHQChartVersion()
 {