hqchart 1.1.15018 → 1.1.15029

package/package.json

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

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.TReport.js

@@ -291,7 +291,7 @@ function JSTReportChartContainer(uielement)
     this.Symbol;    //期权对应的品种代码
     this.Name;      //期权对应的品种名称
     this.NetworkFilter;                                 //数据回调接口
-    this.Data={ XOffset:0, YOffset:0, Data:[], Price:null };        //股票列表 Price=标的物市场价格
+    this.Data={ XOffset:0, YOffset:0, Data:[], Price:null, MatchExePrice:null };        //股票列表 Price=标的物市场价格  MatchExePrice=标的物市场价格匹配的行权价格
     this.BorderData={ MapData:null }; //key=Field Value:[null, {ExePrice} ,{ExePrice} ]
     this.SourceData={ Data:[] } ;                       //原始股票顺序(排序还原用) {ExePrice=行权价格 LeftData:, RightData}
 
@@ -841,7 +841,11 @@ function JSTReportChartContainer(uielement)
             }
         }
 
-        if (IFrameSplitOperator.IsNumber(data.price)) this.Data.Price=data.price;
+        if (IFrameSplitOperator.IsNumber(data.price)) 
+        {
+            this.Data.Price=data.price;
+            this.Data.MatchExePrice=null;
+        }
 
         if (IFrameSplitOperator.IsNonEmptyArray(data.fixedRowData))
         {
@@ -880,11 +884,13 @@ function JSTReportChartContainer(uielement)
     //计算统计数据
     this.CalculateData=function()
     {
+        this.Data.MatchExePrice=null;
         if (!this.MapExePriceData || this.MapExePriceData.size<=0) return;
 
         var leftMaxPosition={ Max:null, ExePrice:null, CellType:1 };
         var rightMaxPosition={ Max:null,ExePrice:null, CellType:2 };
         this.BorderData.MapData=new Map();
+        var aryPrice=[];
         for(var mapItem of this.MapExePriceData)
         {
             var item=mapItem[1];
@@ -907,6 +913,8 @@ function JSTReportChartContainer(uielement)
                     rightMaxPosition.ExePrice=mapItem[0];
                 }
             }
+
+            aryPrice.push(item.ExePrice);
         }
 
         var aryData=[null, null, null];
@@ -914,6 +922,24 @@ function JSTReportChartContainer(uielement)
         if (rightMaxPosition.ExePrice) aryData[2]=rightMaxPosition;
         
         this.BorderData.MapData.set(TREPORT_COLUMN_ID.POSITION_ID, { Data:aryData });
+
+        if (IFrameSplitOperator.IsNumber(this.Data.Price))
+        {
+            aryPrice.sort((left, right)=>{ return left-right;});
+            var prePrice=null;
+            for(var i=0;i<aryPrice.length;++i)
+            {
+                var value=aryPrice[i];
+                if (value>this.Data.Price)
+                {
+                    this.Data.MatchExePrice=prePrice
+                    break;
+                }
+
+                prePrice=value;
+            }
+        }
+        
     }
 
     //读取单条股票json数据
@@ -1968,7 +1994,8 @@ function ChartTReport()
     { 
         TextColor:g_JSChartResource.TReport.CenterItem.TextColor, 
         BaseTextColor:g_JSChartResource.TReport.CenterItem.BaseTextColor, 
-        BGColor: g_JSChartResource.TReport.CenterItem.BGColor
+        BGColor: g_JSChartResource.TReport.CenterItem.BGColor,
+        MatchTextColor:g_JSChartResource.TReport.CenterItem.MatchTextColor,
     };
     
     //缓存
@@ -2487,13 +2514,13 @@ function ChartTReport()
             var leftBGColor=null, rightBGColor=null;
             if (exePrice>this.Data.Price)
             {
-                leftBGColor=this.UpBGColor;
-                rightBGColor=this.DownBGColor;
+                leftBGColor=this.DownBGColor;
+                rightBGColor=this.UpBGColor;
             }
             else
             {
-                leftBGColor=this.DownBGColor;
-                rightBGColor=this.UpBGColor;
+                leftBGColor=this.UpBGColor;
+                rightBGColor=this.DownBGColor;
             }
 
             if (leftBGColor)
@@ -2612,6 +2639,11 @@ function ChartTReport()
         var drawInfo={ Text:null, TextColor:this.CenterItemConfig.TextColor, BGColor:this.CenterItemConfig.BGColor, TextAlign:column.TextAlign, Rect:rtItem, RectText:rtText };
         drawInfo.Text=`${data.ExePrice.toFixed(data.Decimal)}`;
 
+        if (IFrameSplitOperator.IsNumber(this.Data.MatchExePrice) && this.Data.MatchExePrice==data.ExePrice)
+        {
+            drawInfo.TextColor=this.CenterItemConfig.MatchTextColor;
+        }
+
         this.FormatCenterItem(data,drawInfo);
 
         this.DrawCell(drawInfo);

package/src/jscommon/umychart.complier.js

@@ -3292,7 +3292,7 @@ function JSAlgorithm(errorHandler,symbolData)
     this.EMA=function(data,dayCount)
     {
         var result = [];
-        if (data.length<=0) return result;
+        if (!data || data.length<=0) return result;
 
         if (Array.isArray(dayCount))
         {

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=
     {
@@ -78164,7 +78183,8 @@ function JSChartResource()
         {
             TextColor:"rgb(60,60,83)",
             BaseTextColor:"rgb(60,60,83)",
-            BGColor:"rgb(180,180,180)"
+            BGColor:"rgb(180,180,180)",
+            MatchTextColor:"rgb(60,60,83)",
         },
 
         FieldColor:
@@ -79238,8 +79258,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)
     {
@@ -79774,6 +79806,7 @@ function JSChartResource()
             if (cell.TextColor) dest.CenterItem.TextColor=cell.TextColor;
             if (cell.BaseTextColor) dest.CenterItem.BaseTextColor=cell.BaseTextColor;
             if (cell.BGColor) dest.CenterItem.BGColor=cell.BGColor;
+            if (cell.MatchTextColor) dest.CenterItem.MatchTextColor=cell.MatchTextColor;
         }
 
         if (item.Item)

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)',            //背景色
@@ -913,7 +922,8 @@ function GetBlackStyle()
             {
                 TextColor:"rgb(16,226,217)",
                 BaseTextColor:"rgb(60,60,83)",
-                BGColor:"rgb(65,65,65)"
+                BGColor:"rgb(65,65,65)",
+                MatchTextColor:"rgb(210,210,210)"
             },
 
             FieldColor: