hqchart 1.1.14354 → 1.1.14363

package/src/jscommon/umychart.TReport.js

@@ -73,10 +73,8 @@ function JSTReportChart(divElement)
 
         if (option.EnableResize==true) this.CreateResizeListener();
 
-        if (option.MinuteChartTooltip && option.MinuteChartTooltip.Enable)
-        {
-            chart.InitalMinuteChartTooltip(option.MinuteChartTooltip);
-        }
+        if (option.MinuteChartTooltip && option.MinuteChartTooltip.Enable) chart.InitalMinuteChartTooltip(option.MinuteChartTooltip);   //分时图
+        if (option.FloatTooltip && option.FloatTooltip.Enable) chart.InitalFloatTooltip(option.FloatTooltip);   //提示信息
 
         if (option.Symbol)
         {
@@ -330,6 +328,7 @@ function JSTReportChartContainer(uielement)
     this.EnablePageCycle=false; //是否循环翻页
 
     this.TooltipMinuteChart;    //分时图
+    this.FloatTooltip;          //浮框提示
     this.LastMouseStatus={ MoveStatus:null, TooltipStatus:null, MouseOnStatus:null };
 
     this.IsDestroy=false;        //是否已经销毁了
@@ -339,6 +338,7 @@ function JSTReportChartContainer(uielement)
         this.IsDestroy=true;
         this.StopAutoUpdate();
         this.DestroyMinuteChartTooltip();
+        this.DestroyFloatTooltip();
     }
 
     this.InitalMinuteChartTooltip=function(option)
@@ -381,6 +381,51 @@ function JSTReportChartContainer(uielement)
         this.TooltipMinuteChart.Hide();
     }
 
+    this.InitalFloatTooltip=function(option)
+    {
+        if (this.FloatTooltip) return;
+
+        this.FloatTooltip=new JSFloatTooltip();
+        this.FloatTooltip.Inital(this, option);
+        this.FloatTooltip.Create();
+    }
+
+    this.HideFloatTooltip=function()
+    {
+        if (!this.FloatTooltip) return;
+
+        this.FloatTooltip.Hide();
+    }
+
+    this.DestroyFloatTooltip=function()
+    {
+        if (!this.FloatTooltip) return;
+
+        this.FloatTooltip.Destroy();
+        this.FloatTooltip=null;
+    }
+
+    this.DrawFloatTooltip=function(point,toolTip)
+    {
+        if (!this.FloatTooltip) return;
+
+        this.UpdateFloatTooltip(point, toolTip)
+    }
+
+    this.UpdateFloatTooltip=function(point, toolTip)
+    {
+        if (!this.FloatTooltip) return;
+
+        var sendData=
+        {
+            Tooltip:toolTip,
+            Point:point,
+            DataType:4,
+        };
+
+        this.FloatTooltip.Update(sendData);
+    }
+
     //清空固定行数据
     this.ClearFixedRowData=function()
     {
@@ -1060,8 +1105,7 @@ function JSTReportChartContainer(uielement)
         var oldMouseOnStatus=this.LastMouseStatus.MouseOnStatus;
         this.LastMouseStatus.OnMouseMove=null;
 
-        var bDrawTooltip=false;
-        if (this.LastMouseStatus.TooltipStatus) bDrawTooltip=true;
+        var bShowTooltip=false;
         this.LastMouseStatus.TooltipStatus=null;
 
         var bShowChartTooltip=false;
@@ -1088,7 +1132,7 @@ function JSTReportChartContainer(uielement)
                 else
                 {
                     this.LastMouseStatus.TooltipStatus={ X:x, Y:y, Data:tooltipData, ClientX:e.clientX, ClientY:e.clientY };
-                    bDrawTooltip=true;
+                    bShowTooltip=true;
                 }
             }
             
@@ -1104,7 +1148,6 @@ function JSTReportChartContainer(uielement)
         */
 
         if (mouseStatus) this.UIElement.style.cursor=mouseStatus.Cursor;
-        //if (bDrawTooltip) this.DrawTooltip(this.LastMouseStatus.TooltipStatus);
 
         if (bShowChartTooltip)
         {
@@ -1114,6 +1157,17 @@ function JSTReportChartContainer(uielement)
         {
             this.HideMinuteChartTooltip();
         }
+
+        if (bShowTooltip)
+        {
+            var xTooltip = e.clientX-this.UIElement.getBoundingClientRect().left;
+            var yTooltip = e.clientY-this.UIElement.getBoundingClientRect().top;
+            this.DrawFloatTooltip({X:xTooltip, Y:yTooltip, YMove:20/pixelTatio},this.LastMouseStatus.TooltipStatus.Data);
+        }
+        else
+        {
+            this.HideFloatTooltip();
+        }
     }
 
     this.UIOnMounseOut=function(e)
@@ -1343,6 +1397,7 @@ function JSTReportChartContainer(uielement)
         {
             this.LastMouseStatus.TooltipStatus=null;
             this.HideMinuteChartTooltip();
+            this.HideFloatTooltip();
             var result=this.MoveSelectedRow(1,{ EnablePageCycle:this.EnablePageCycle })
             if (result)
             {
@@ -1354,6 +1409,7 @@ function JSTReportChartContainer(uielement)
         {
             this.LastMouseStatus.TooltipStatus=null;
             this.HideMinuteChartTooltip();
+            this.HideFloatTooltip();
             var result=this.MoveSelectedRow(-1,{ EnablePageCycle:this.EnablePageCycle} );
             if (result)
             {
@@ -1376,6 +1432,7 @@ function JSTReportChartContainer(uielement)
         if (keyID==116) return; //F15刷新不处理
 
         this.HideMinuteChartTooltip();
+        this.HideFloatTooltip();
 
         switch(keyID)
         {
@@ -2496,11 +2553,11 @@ function ChartTReport()
             if (leftData.TitleColor) drawInfo.TextColor=leftData.TitleColor;
             if (leftData.Text && leftData.TextColor)
             {
-                drawInfo.Left={ Text:leftData.Text, TextColor:leftData.TextColor};
+                drawInfo.Left={ Text:leftData.Text, TextColor:leftData.TextColor, Tooltip:leftData.Tooltip};
             }
             else if (leftData.IconFont && leftData.TextColor)
             {
-                drawInfo.Left={ IconFont:leftData.IconFont, TextColor:leftData.TextColor};
+                drawInfo.Left={ IconFont:leftData.IconFont, TextColor:leftData.TextColor, Tooltip:leftData.Tooltip};
             }
            
         }
@@ -2512,11 +2569,11 @@ function ChartTReport()
 
             if (rightData.Text && rightData.TextColor)
             {
-                drawInfo.Right={ Text:rightData.Text, TextColor:rightData.TextColor};
+                drawInfo.Right={ Text:rightData.Text, TextColor:rightData.TextColor, Tooltip:rightData.Tooltip};
             }
             else if (rightData.IconFont && rightData.TextColor)
             {
-                drawInfo.Right={ IconFont:rightData.IconFont, TextColor:rightData.TextColor};
+                drawInfo.Right={ IconFont:rightData.IconFont, TextColor:rightData.TextColor, Tooltip:rightData.Tooltip};
             }
         }
     }
@@ -2547,9 +2604,21 @@ function ChartTReport()
 
         this.FormatCenterItem(data,drawInfo);
 
-       
-
         this.DrawCell(drawInfo);
+
+        if (drawInfo.LeftIconTooltip)
+        {
+            var tooltipItem=drawInfo.LeftIconTooltip;
+            var tooltipData={ Rect:tooltipItem.Rect, Data:tooltipItem.Data, Index:index, Column:column, CellType:cellType, Type:2 };
+            this.TooltipRect.push(tooltipData);
+        }
+
+        if (drawInfo.RightIconTooltip)
+        {
+            var tooltipItem=drawInfo.RightIconTooltip;
+            var tooltipData={ Rect:tooltipItem.Rect, Data:tooltipItem.Data, Index:index, Column:column, CellType:cellType, Type:3 };
+            this.TooltipRect.push(tooltipData);
+        }
     }
 
     this.DrawItem=function(index, exePriceData, data, column, rtItem, cellType)
@@ -2818,7 +2887,7 @@ function ChartTReport()
             this.DrawText(drawInfo.Text, drawInfo.TextAlign, rtText.Left, yCenter, rtText.Width);
         }
 
-        if (drawInfo.Left)
+        if (drawInfo.Left)  //左边图标
         {
             var item=drawInfo.Left;
             this.Canvas.textAlign="left";
@@ -2829,6 +2898,13 @@ function ChartTReport()
                 if (!fontBackup) fontBackup=this.Canvas.font;
                 this.Canvas.font=item.IconFont.Font;
                 this.Canvas.fillText(item.IconFont.Symbol,rtText.Left,yCenter);
+                if (item.Tooltip)
+                {
+                    var iconWidth=this.Canvas.measureText(item.IconFont.Symbol).width;
+                    var rtIcon={ Left:rtText.Left, Top:rtText.Top, Bottom:rtText.Bottom, Height:rtText.Height, Width:iconWidth };
+                    rtIcon.Right=rtIcon.Left+rtIcon.Width;
+                    drawInfo.LeftIconTooltip={ Rect:rtIcon, Data:item.Tooltip };
+                }
             }
             else if (item.Text)
             {
@@ -2836,7 +2912,7 @@ function ChartTReport()
             }
         }
 
-        if (drawInfo.Right)
+        if (drawInfo.Right) //右边图标
         {
             var item=drawInfo.Right;
             this.Canvas.textAlign="right";
@@ -2847,6 +2923,14 @@ function ChartTReport()
                 if (!fontBackup) fontBackup=this.Canvas.font;
                 this.Canvas.font=item.IconFont.Font;
                 this.Canvas.fillText(item.IconFont.Symbol,rtText.Right,yCenter);
+
+                if (item.Tooltip)
+                {
+                    var iconWidth=this.Canvas.measureText(item.IconFont.Symbol).width;
+                    var rtIcon={ Right:rtText.Right, Top:rtText.Top, Bottom:rtText.Bottom, Height:rtText.Height, Width:iconWidth };
+                    rtIcon.Left=rtIcon.Right-rtIcon.Width;
+                    drawInfo.RightIconTooltip={ Rect:rtIcon, Data:item.Tooltip };
+                }
             }
             else if (item.Text)
             {

package/src/jscommon/umychart.complier.js

@@ -25530,6 +25530,16 @@ function APIScriptIndex(name,script,args,option, isOverlay)
 
                     result.push(outVarItem);
                 }
+                else if (draw.DrawType=='MULTI_BAR')
+                {
+                    drawItem.Text=draw.Text;
+                    drawItem.Name=draw.Name;
+                    drawItem.DrawType=draw.DrawType;
+                    drawItem.DrawData=draw.DrawData;
+                    outVarItem.Draw=drawItem;
+
+                    result.push(outVarItem);
+                }
                 else if (draw.DrawType=="DRAWCOLORKLINE")
                 {
                     drawItem.Name=draw.Name;

package/src/jscommon/umychart.js

@@ -41340,10 +41340,18 @@ function ChartMultiText()
             var mapItem=this.MapCache.get(key);
             if (!IFrameSplitOperator.IsNonEmptyArray(mapItem.Data)) continue;
 
-            var left=xOffset;
-            var right=xOffset+dataWidth;
-            if (right>chartright) break;
-            var x=left+(right-left)/2;
+            if (isMinute)
+            {
+                var x=this.ChartFrame.GetXFromIndex(j);
+            }
+            else
+            {
+                var left=xOffset;
+                var right=xOffset+dataWidth;
+                if (right>chartright) break;
+                var x=left+(right-left)/2;
+            }
+            
 
             for(var k=0;k<mapItem.Data.length;++k)
             {
@@ -53149,8 +53157,9 @@ function ChartCorssCursor()
         Icon:g_JSChartResource.CorssCursor.RightButton.Icon
     };
 
-    this.RightMargin={ Left:2, Right:2, Top:4, Bottom:3 };
-    CopyMarginConfig(this.RightMargin, g_JSChartResource.CorssCursor.RightMargin);
+    this.RightMargin=CloneData(g_JSChartResource.CorssCursor.RightMargin);
+    this.BottomConfig=CloneData(g_JSChartResource.CorssCursor.BottomText);     //底部输出配置
+    this.LeftConfig=CloneData(g_JSChartResource.CorssCursor.LeftText);
 
     //内部使用
     this.Close=null;     //收盘价格
@@ -53522,36 +53531,48 @@ function ChartCorssCursor()
         {
             var text=this.StringFormatY.Text;
             this.Canvas.font=this.Font;
-            var textWidth=this.Canvas.measureText(text).width+4;    //前后各空2个像素
-            var textSize={ Width:textWidth, Height:this.TextHeight, Text:[] };
+            var textWidth=this.Canvas.measureText(text).width;    //前后各空2个像素
+            var textSize={ Width:textWidth+4, Height:this.TextHeight, Text:[] };
             var buttonData={Y:y, YValue:yValue, FrameID:yValueExtend.FrameID };
-            if (this.Frame.ChartBorder.Left>=30 && this.ShowTextMode.Left==1)
+
+            if (this.Frame.ChartBorder.Left>=30)    //左边
             {
-                if (left<textWidth ) //左边空白的地方太少了画布下
+                var margin=this.LeftConfig.Margin;
+                var textOffset=this.LeftConfig.TextOffset;
+
+                var rtBG=null;
+                if (this.ShowTextMode.Left==1)
                 {
-                    this.DrawTextBGRect(ToFixedPoint(2),ToFixedPoint(y-this.TextHeight/2),ToFixedRect(textWidth),ToFixedRect(this.TextHeight));
-                    this.Canvas.textAlign="left";
-                    this.Canvas.textBaseline="middle";
-                    this.Canvas.fillStyle=this.TextColor;
-                    this.Canvas.fillText(text,2+2,y,textWidth);
+                    var rtBG={ Right:left, Width:textWidth+margin.Left+margin.Right, YCenter:y, Height:textHeight+margin.Top+margin.Bottom };
+                    rtBG.Left=rtBG.Right-rtBG.Width;
+                    rtBG.Top=rtBG.YCenter-rtBG.Height/2;
+                    rtBG.Bottom=rtBG.Top+rtBG.Height;
+
+                    if (rtBG.Left<0) 
+                    {
+                        rtBG.Left=0;
+                        rtBG.Right=rtBG.Left+rtBG.Width;
+                    }
                 }
-                else
+                else if (this.ShowTextMode.Left==2) //在框架内显示
                 {
-                    this.DrawTextBGRect(left-2,y-this.TextHeight/2,-textWidth,this.TextHeight);
-                    this.Canvas.textAlign="right";
-                    this.Canvas.textBaseline="middle";
+                    var rtBG={ Left:left, Width:textWidth+margin.Left+margin.Right, YCenter:y, Height:textHeight+margin.Top+margin.Bottom };
+                    rtBG.Right=rtBG.Left+rtBG.Width;
+                    rtBG.Top=rtBG.YCenter-rtBG.Height/2;
+                    rtBG.Bottom=rtBG.Top+rtBG.Height;
+                }
+
+                if (rtBG)
+                {
+                    this.DrawTextBGRect(rtBG.Left,rtBG.Top,rtBG.Width,rtBG.Height);
+                    this.Canvas.textAlign="left";
+                    this.Canvas.textBaseline="bottom";
                     this.Canvas.fillStyle=this.TextColor;
-                    this.Canvas.fillText(text,left-4,y,textWidth);
+                    this.Canvas.fillText(text,rtBG.Left+textOffset.X, rtBG.Bottom+textOffset.Y);
                 }
             }
-            else if (this.ShowTextMode.Left==2) //在框架内显示
-            {
-                this.DrawTextBGRect(left,y-this.TextHeight/2,textWidth,this.TextHeight);
-                this.Canvas.textAlign="left";
-                this.Canvas.textBaseline="middle";
-                this.Canvas.fillStyle=this.TextColor;
-                this.Canvas.fillText(text,left+2,y,textWidth);
-            }
+
+            
 
             var complexText=
             { 
@@ -53693,26 +53714,42 @@ function ChartCorssCursor()
             var text=this.StringFormatX.Text;
             this.Canvas.font=this.Font;
             this.Canvas.fillStyle=this.TextBGColor;
-            var textWidth=this.Canvas.measureText(text).width+4;    //前后各空2个像素
+            var textWidth=this.Canvas.measureText(text).width;    //前后各空2个像素
+            var margin=this.BottomConfig.Margin;
+            var textOffset=this.BottomConfig.TextOffset;
+            var rtBG=
+            { 
+                Top:bottom, Height:margin.Top+margin.Bottom+textHeight, 
+                XCenter:x, Width:textWidth+margin.Left+margin.Right 
+            };
+            rtBG.Bottom=rtBG.Top+rtBG.Height;
+            rtBG.Left=rtBG.XCenter-rtBG.Width/2;
+            rtBG.Right=rtBG.Left+rtBG.Width;
+
+            if (rtBG.Left<=0)
+            {
+                rtBG.Left=0;
+                rtBG.Right=rtBG.Left+rtBG.Width;
+            }
+            else if (rtBG.Right>=right)
+            {
+                rtBG.Right=right;
+                rtBG.Left=rtBG.Right-rtBG.Width;
+            }
 
-            var yCenter=bottom+2+this.TextHeight/2;
-            var yTop=bottom+2;
             var bShowText=true;
             if (this.ShowTextMode.Bottom==2)
             {
-                yCenter=bottom-this.TextHeight/2-2;
-                yTop=bottom-this.TextHeight-2;
+                rtBG.Bottom=bottom;
+                rtBG.Top=rtBG.Bottom-rtBG.Height;
             }
             else if (this.ShowTextMode.Bottom==8)
             {
                 var event=this.GetEventCallback(JSCHART_EVENT_ID.ON_CUSTOM_CORSSCURSOR_POSITION);
                 if (event && event.Callback)
                 {
-                    var sendData={ YCenter:yCenter, YTop:yTop, Height:this.TextHeight, IsShowText:bShowText };
+                    var sendData={ RectText:rtBG, IsShowText:bShowText, X:x, Y:y };
                     event.Callback(event, sendData, this);
-
-                    yCenter=sendData.YCenter;
-                    yTop=sendData.YTop;
                     bShowText=sendData.IsShowText;
                 }
             }
@@ -53720,31 +53757,12 @@ function ChartCorssCursor()
             //JSConsole.Chart.Log('[ChartCorssCursor::Draw] ',yCenter);
             if (bShowText)
             {
-                if (x-textWidth/2<3)    //左边位置不够了, 顶着左边画
-                {
-                    this.DrawTextBGRect(x-1,yTop,textWidth,this.TextHeight);
-                    this.Canvas.textAlign="left";
-                    this.Canvas.textBaseline="middle";
-                    this.Canvas.fillStyle=this.TextColor;
-                    this.Canvas.fillText(text,x+1,yCenter,textWidth);
-                }
-                else if (x+textWidth/2>=right)
-                {
-                    this.DrawTextBGRect(right-textWidth,yTop,textWidth,this.TextHeight);
-                    this.Canvas.textAlign="right";
-                    this.Canvas.textBaseline="middle";
-                    this.Canvas.fillStyle=this.TextColor;
-                    this.Canvas.fillText(text,right-2,yCenter,textWidth);
-                }
-                else
-                {
-                    this.DrawTextBGRect(x-textWidth/2,yTop,textWidth,this.TextHeight);
-                    this.Canvas.textAlign="center";
-                    this.Canvas.textBaseline="middle";
-                    this.Canvas.fillStyle=this.TextColor;
-                    this.Canvas.fillText(text,x,yCenter,textWidth);
-                }
-            }
+                this.DrawTextBGRect(rtBG.Left,rtBG.Top,rtBG.Width,rtBG.Height);
+                this.Canvas.textAlign="left";
+                this.Canvas.textBaseline="bottom";
+                this.Canvas.fillStyle=this.TextColor;
+                this.Canvas.fillText(text,rtBG.Left+textOffset.X,rtBG.Bottom+textOffset.Y,textWidth);
+        }
         }
 
         //子坐标Y轴
@@ -71072,7 +71090,10 @@ function JSChartResource()
             Icon: { Text:'\ue6a3', Color:'rgb(255,255,255)', Family:"iconfont", Size:18 }
         },
 
-        RightMargin: { Left:2, Right:2, Top:5, Bottom:3 }
+        RightMargin: { Left:2, Right:2, Top:5, Bottom:3 },
+
+        BottomText:{ Margin: { Left:4, Right:4, Top:0, Bottom:0 }, TextOffset:{X:4, Y:-1 } },
+        LeftText:{ Margin: { Left:4, Right:4, Top:0, Bottom:0 }, TextOffset:{X:4, Y:-1 } }
     };
 
     this.LockBGColor = "rgb(220, 220, 220)";        //指标锁区域颜色

package/src/jscommon/umychart.testdata.js

@@ -1866,6 +1866,8 @@ HQData.Report_APIIndex=function(data, callback)
         HQData.APIIndex_DRAW_SIMPLE_RADAR(data, callback);
     else if (request.Data.indexname=="API_MULTI_BAR")
         HQData.APIIndex_MULTI_BAR(data, callback);
+    else if (request.Data.indexname=="API_MULTI_TEXT")
+        HQData.APIIndex_MULTI_TEXT(data, callback);
     
 }
 
@@ -2502,7 +2504,7 @@ HQData.APIIndex_MULTI_BAR=function(data, callback)
         [
             //{Date:20190916, Time: Value:15.5, Value2:0 },
         ],
-        Width:20
+        Width:5
     };
 
     for(var i=0;i<kData.Data.length;++i)
@@ -2531,3 +2533,54 @@ HQData.APIIndex_MULTI_BAR=function(data, callback)
 }
 
 
+HQData.APIIndex_MULTI_TEXT=function(data, callback)
+{
+    data.PreventDefault=true;
+    var hqchart=data.HQChart;
+    var kData=hqchart.GetKData();
+
+    var SVGData= 
+    { 
+        name:'MULTI_TEXT', type:1, 
+        Draw: 
+        { 
+            DrawType:'MULTI_TEXT', 
+            DrawData: []
+        } //绘制文字
+    };
+
+    var ARRAY_COLOR=['rgb(255,248,220)','rgb(230,230,250)','rgb(100,149,237)','rgb(32,178,170)','rgb(152,251,152)','rgb(128,128,0)','rgb(255,165,0)','rgb(255,160,122)','rgb(205,92,92)']
+
+    for(var i=0;i<kData.Data.length;++i)
+    {
+        var item=kData.Data[i];
+        if (i%5!=3) continue;
+
+        var colorIndex=Math.ceil(Math.random()*ARRAY_COLOR.length-1);
+        var drawItem=
+        { 
+            Date:item.Date, Time:item.Time, Value:"H", Text:`最高：${item.High.toFixed(2)}`,Color:ARRAY_COLOR[colorIndex], Baseline:2, YMove:-2
+        };
+
+        var colorIndex=Math.ceil(Math.random()*ARRAY_COLOR.length-1);
+        var drawItem2=
+        { 
+            Date:item.Date, Time:item.Time, Value:item.Low, Text:`最低:${item.Low.toFixed(2)}`,Color:ARRAY_COLOR[colorIndex], Baseline:1, YMove:2
+        };
+
+        SVGData.Draw.DrawData.push(drawItem);
+        SVGData.Draw.DrawData.push(drawItem2);
+    }
+
+    var apiData=
+    {
+        code:0, 
+        stock:{ name:hqchart.Name, symbol:hqchart.Symbol }, 
+        outdata: { date:kData.GetDate(), time:kData.GetTime(), outvar:[SVGData] } 
+    };
+
+    console.log('[HQData.APIIndex_MULTI_TEXT] apiData ', apiData);
+    callback(apiData);
+}
+
+