hqchart 1.1.13526 → 1.1.13537

package/src/jscommon/umychart.report.js

@@ -38,7 +38,7 @@ function JSReportChart(divElement)
         var element=document.createElement("canvas");
         element.className='jsreportlist-drawing-extra';
         element.id=Guid();
-        if (name==JSChart.CorssCursorCanvasKey)  
+        if (name==JSReportChart.CorssCursorCanvasKey)  
             element.setAttribute("tabindex",5);
         else 
             element.setAttribute("tabindex",1);
@@ -90,9 +90,18 @@ function JSReportChart(divElement)
     this.OnSize=function()
     {
         //画布大小通过div获取
-        var height=parseInt(this.DivElement.style.height.replace("px",""));
+        var height=this.DivElement.offsetHeight;
+        var width=this.DivElement.offsetWidth;
+        if (this.DivElement.style.height && this.DivElement.style.width)
+        {
+            if (this.DivElement.style.height.includes("px"))
+                height=parseInt(this.DivElement.style.height.replace("px",""));
+            if (this.DivElement.style.width.includes("px"))
+                width=parseInt(this.DivElement.style.width.replace("px",""));
+        }
+        
         this.CanvasElement.height=height;
-        this.CanvasElement.width=parseInt(this.DivElement.style.width.replace("px",""));
+        this.CanvasElement.width=width;
         this.CanvasElement.style.width=this.CanvasElement.width+'px';
         this.CanvasElement.style.height=this.CanvasElement.height+'px';
 
@@ -132,7 +141,13 @@ function JSReportChart(divElement)
         this.JSChartContainer=chart;
         this.DivElement.JSChart=this;   //div中保存一份
 
+        if (option.EnableResize==true) this.CreateResizeListener();
+
         if (option.EnablePopMenuV2===true) chart.InitalPopMenu();
+        if (option.EnableTooltip) 
+        {
+            this.CreateExtraCanvasElement(JSReportChart.TooltipCursorCanvasKey, { ZIndex:99 });
+        }
 
         if (option.Symbol) chart.Symbol=option.Symbol;
         if (option.Name) chart.Name=option.Name;
@@ -154,6 +169,8 @@ function JSReportChart(divElement)
     this.CreateJSReportChartContainer=function(option)
     {
         var chart=new JSReportChartContainer(this.CanvasElement);
+        chart.GetExtraCanvas=(name)=>{ return this.GetExtraCanvas(name); }
+
         chart.Create(option);
 
         if (option.NetworkFilter) chart.NetworkFilter=option.NetworkFilter;
@@ -217,6 +234,19 @@ function JSReportChart(divElement)
         chart.Frame.ChartBorder.Bottom*=pixelTatio;
     }
 
+    this.CreateResizeListener=function()
+    {
+        this.ResizeListener = new ResizeObserver((entries)=>{ this.OnDivResize(entries); });
+        this.ResizeListener.observe(this.DivElement);
+    }
+
+    this.OnDivResize=function(entries)
+    {
+        JSConsole.Chart.Log("[JSReportChart::OnDivResize] entries=", entries);
+
+        this.OnSize();
+    }
+
     /////////////////////////////////////////////////////////////////////////////
     //对外接口
     
@@ -354,6 +384,9 @@ function JSReportChartContainer(uielement)
     this.SplashTitle={ StockList:"下载码表中.....", MemberList:"下载成分中....." } ;
 
     this.Canvas=uielement.getContext("2d");         //画布
+    
+    this.TooltipCanvas;
+    this.ChartTooltip;
 
     this.Tooltip=document.createElement("div");
     this.Tooltip.className='jsreport-tooltip';
@@ -425,6 +458,8 @@ function JSReportChartContainer(uielement)
     this.JSPopMenu;             //内置菜单
     this.IsShowRightMenu=true;
 
+    this.LastMouseStatus={ MoveStatus:null, TooltipStatus:null };
+   
     this.ChartDestory=function()    //销毁
     {
         this.IsDestroy=true;
@@ -575,6 +610,12 @@ function JSReportChartContainer(uielement)
 
         this.ChartPaint[0]=chart;
 
+         //提示信息
+        var chartTooltip=new ChartCellTooltip();
+        chartTooltip.Frame=this.Frame;
+        chartTooltip.ChartBorder=this.Frame.ChartBorder;
+        this.ChartTooltip=chartTooltip;
+
         //页脚
         if (option && option.PageInfo===true)
         {
@@ -686,6 +727,8 @@ function JSReportChartContainer(uielement)
         {
             this.DelayDraw(500);
         }
+
+        this.DrawTooltip(this.LastMouseStatus.TooltipStatus);
     }
 
     this.DelayDraw=function(frequency)
@@ -1452,6 +1495,7 @@ function JSReportChartContainer(uielement)
             console.log(`[OnWheel] wheelValue=${wheelValue}`);
             if (wheelValue<0)   //下
             {
+                this.LastMouseStatus.TooltipStatus=null;
                 if (this.GotoNextItem(1))
                 {
                     this.Draw();
@@ -1460,6 +1504,7 @@ function JSReportChartContainer(uielement)
             }
             else if (wheelValue>0)  //上
             {
+                this.LastMouseStatus.TooltipStatus=null;
                 if (this.GotoNextItem(-1))
                 {
                     this.Draw();
@@ -1471,6 +1516,7 @@ function JSReportChartContainer(uielement)
         {
             if (wheelValue<0)   //下一页
             {
+                this.LastMouseStatus.TooltipStatus=null;
                 if (this.GotoNextPage(this.PageUpDownCycle)) 
                 {
                     this.Draw();
@@ -1479,6 +1525,7 @@ function JSReportChartContainer(uielement)
             }
             else if (wheelValue>0)  //上一页
             {
+                this.LastMouseStatus.TooltipStatus=null;
                 if (this.GotoPreviousPage(this.PageUpDownCycle)) 
                 {
                     this.Draw();
@@ -1700,7 +1747,13 @@ function JSReportChartContainer(uielement)
         var pixelTatio = GetDevicePixelRatio();
         var x = (e.clientX-this.UIElement.getBoundingClientRect().left)*pixelTatio;
         var y = (e.clientY-this.UIElement.getBoundingClientRect().top)*pixelTatio;
+        
+        this.LastMouseStatus.OnMouseMove=null;
 
+        var bDrawTooltip=false;
+        if (this.LastMouseStatus.TooltipStatus) bDrawTooltip=true;
+        this.LastMouseStatus.TooltipStatus=null;
+        
         if (this.DragRow) return;
         if (this.DrawHeader) return;
         if (this.DragColumnWidth) return;
@@ -1720,10 +1773,11 @@ function JSReportChartContainer(uielement)
             }
         }
 
+        this.LastMouseStatus.OnMouseMove={ X:x, Y:y };
         var mouseStatus={ Cursor:"default", Name:"Default"};;   //鼠标状态
         var report=this.GetReportChart();
-        var cell=null;
         var bDraw=false;
+        
         if (report)
         {
             var dragHeaderWidth=report.PtInHeaderDragBorder(x,y);
@@ -1734,7 +1788,12 @@ function JSReportChartContainer(uielement)
             }
             else
             {
-                cell=report.PtInCell(x,y);  //是否在单元格(EnableTooltip)
+                var tooltipData=report.GetTooltipData(x,y);  //单元格提示信息
+                if (tooltipData)
+                {
+                    this.LastMouseStatus.TooltipStatus={ X:x, Y:y, Data:tooltipData };
+                    bDrawTooltip=true;
+                }
             }
 
             var scrollbar=report.VScrollbar;
@@ -1750,16 +1809,20 @@ function JSReportChartContainer(uielement)
             }
         }
 
+
+        /* 目前没有用到
         var event=this.GetEventCallback(JSCHART_EVENT_ID.ON_REPORT_MOUSE_MOVE);
         if (event)
         {
             var sendData={X:x, Y:y, Cell:cell };
             event.Callback(event,sendData,this);
         }
+        */
 
         if (mouseStatus) this.UIElement.style.cursor=mouseStatus.Cursor;
 
         if (bDraw) this.Draw();
+        else if (bDrawTooltip) this.DrawTooltip(this.LastMouseStatus.TooltipStatus);
     }
 
     this.UIOnMounseOut=function(e)
@@ -2940,6 +3003,7 @@ function JSReportChartContainer(uielement)
             {
                 this.ExecuteMenuCommand(tabData.Tab.CommandID,  [tabData.Tab.ID]);
                 this.SetSelectedTab(tabData.Index);
+                redraw=true;
             }
         }
 
@@ -3038,6 +3102,7 @@ function JSReportChartContainer(uielement)
 
             case REPORT_COLUMN_ID.VOL_IN_ID:
             case REPORT_COLUMN_ID.VOL_OUT_ID:
+            case REPORT_COLUMN_ID.DATE_ID:
             
                 return this.LocalNumberSort(left, right, column, sortType);
             case REPORT_COLUMN_ID.CUSTOM_NUMBER_TEXT_ID:    //自定义数值字段
@@ -3212,6 +3277,31 @@ function JSReportChartContainer(uielement)
         }
     }
 
+    this.LoacCustomStringSort=function(left, right, column, sortType)
+    {
+        var leftValue="", rightValue="";
+        if (sortType==2) rightValue=leftValue="啊啊啊啊啊";
+        
+        var value=this.GetStockExtendData(left, column);
+        if (IFrameSplitOperator.IsString(value)) leftValue=value;
+
+        var value=this.GetStockExtendData(right, column);
+        if (IFrameSplitOperator.IsString(value)) rightValue=value;
+        
+        if (sortType==1)
+        {
+            if (rightValue<leftValue) return -1;
+            else if (rightValue<leftValue) return 1;
+            else return 0;
+        }
+        else
+        {
+            if (leftValue<rightValue) return -1;
+            else if (leftValue>rightValue) return 1;
+            else return 0;
+        }
+    }
+
     this.RequestStockSortData=function(column, filedid, sortType)
     {
         var chart=this.ChartPaint[0];
@@ -3328,6 +3418,28 @@ function JSReportChartContainer(uielement)
 
         return true;
     }
+
+    this.DrawTooltip=function(tooltipStatus)
+    {
+        if (!this.GetExtraCanvas) return;
+        if (!this.TooltipCanvas)
+        {
+            var finder=this.GetExtraCanvas(JSReportChart.TooltipCursorCanvasKey);
+            if (!finder) return;
+            this.TooltipCanvas=finder.Canvas;
+        }
+
+        if (!this.TooltipCanvas) return;
+        this.ClearCanvas(this.TooltipCanvas);
+        if (!this.ChartTooltip) return;
+
+        if (!tooltipStatus || !tooltipStatus.Data) return;
+
+        this.ChartTooltip.Canvas=this.TooltipCanvas;
+        this.ChartTooltip.Point={ X:tooltipStatus.X, Y:tooltipStatus.Y };
+        this.ChartTooltip.Data=tooltipStatus.Data.Data;
+        this.ChartTooltip.Draw();
+    }
 }
 
 
@@ -3496,6 +3608,8 @@ var MAP_COLUMN_FIELD=new Map([
     [REPORT_COLUMN_ID.VOL_OUT_ID,"VolOut"],
 
     [REPORT_COLUMN_ID.NAME_EX_ID, "NameEx"],
+
+    [REPORT_COLUMN_ID.DATE_ID, "Date"],
 ]);
 
 function ChartReport()
@@ -3628,7 +3742,11 @@ function ChartReport()
     this.BottomToolbarHeight=0;  //底部工具条高度
     this.IsShowAllColumn=false;   //是否已显示所有列
 
-    this.Column=    //{ Type:列id, Title:标题, TextAlign:文字对齐方式, MaxText:文字最大宽度 , TextColor:文字颜色, Sort:0=不支持排序 1=本地排序 0=远程排序 }
+    //{ 
+    //  Type:列id, Title:标题, TextAlign:文字对齐方式, MaxText:文字最大宽度 , TextColor:文字颜色, Sort:0=不支持排序 1=本地排序 0=远程排序, 
+    //  Icon:{ Family:"iconfont", Size:12, Symbol:"", Margin: { Left:, Bottom }} 
+    //}
+    this.Column=   
     [
         { Type:REPORT_COLUMN_ID.INDEX_ID, Title:"序号", TextAlign:"center", Width:null, TextColor:g_JSChartResource.Report.FieldColor.Index, MaxText:"8888"},
         { Type:REPORT_COLUMN_ID.SYMBOL_ID, Title:"代码", TextAlign:"left", Width:null,  TextColor:g_JSChartResource.Report.FieldColor.Symbol, MaxText:"888888"},
@@ -3638,6 +3756,9 @@ function ChartReport()
 
     this.RectClient={};
 
+    //{ Rect:rtItem, Stock:stock, Index:index, Column:column, RowType:rowType, Type:drawInfo.Tooltip.Type, Data:{ AryText:[ {Text:xx} ]} };
+    //Type:1=数据截断
+    // { Text, Color, Title:, TitleColor, Space, Margin:{ Left, Top, Right, Bottom }}
     this.TooltipRect=[];
 
     this.ReloadResource=function(resource)
@@ -3736,11 +3857,11 @@ function ChartReport()
             if (item.FullColBGColor) colItem.FullColBGColor=item.FullColBGColor;    //整列背景色
             if (item.HeaderBGColor) colItem.HeaderBGColor=item.HeaderBGColor;       //表头背景色
             if (IFrameSplitOperator.IsNumber(item.Sort)) colItem.Sort=item.Sort;
-            if (IFrameSplitOperator.IsBool(item.EnableTooltip)) colItem.EnableTooltip=item.EnableTooltip;
             if (IFrameSplitOperator.IsNumber(item.FixedWidth)) colItem.FixedWidth=item.FixedWidth;
             if (IFrameSplitOperator.IsBool(item.EnableDragWidth)) colItem.EnableDragWidth=item.EnableDragWidth;
             if (IFrameSplitOperator.IsBool(item.IsDrawCallback)) colItem.IsDrawCallback=item.IsDrawCallback;
             else colItem.IsDrawCallback=false;
+            if (item.Icon) colItem.Icon=item.Icon;
 
             if (item.Sort==1 || item.Sort==2)   //1本地排序 2=远程排序
             {
@@ -4046,6 +4167,17 @@ function ChartReport()
 
                 item.Width=itemWidth+4+this.ItemMergin.Left+this.ItemMergin.Right;
             }
+
+            if (item.Icon && item.Icon.Symbol)
+            {
+                item.Width+=item.Icon.Size;
+                if (item.Icon.Margin)
+                {
+                    var margin=item.Icon.Margin;
+                    if (IFrameSplitOperator.IsNumber(margin.Left)) item.Width+=margin.Left;
+                    if (IFrameSplitOperator.IsNumber(margin.Right)) item.Width+=margin.Right;
+                } 
+            }
         }
 
         this.Canvas.font=this.HeaderFont;
@@ -4105,16 +4237,36 @@ function ChartReport()
                 this.DrawItemBG({ Rect:rtBG, BGColor:item.HeaderBGColor });
             }
 
+            var iconWidth=0;
+            if (item.Icon && item.Icon.Symbol)  //图标
+            {
+                var iconWidth=item.Icon.Size;
+                if (item.Icon.Margin)
+                {
+                    var margin=item.Icon.Margin;
+                    if (IFrameSplitOperator.IsNumber(margin.Left)) iconWidth+=margin.Left;
+                    if (IFrameSplitOperator.IsNumber(margin.Right)) iconWidth+=margin.Right;
+                }
+            }
+            textWidth-=iconWidth;
+
             if (item.HeaderColor) this.Canvas.fillStyle=item.HeaderColor;
             else this.Canvas.fillStyle=this.HeaderColor;
 
+            var textSize={ }
             if (this.SortInfo && this.SortInfo.Field==i && this.SortInfo.Sort>0)
             {
-                this.DrawSortHeader(item.Title,item.TextAlign,x,y,textWidth,this.SortInfo.Sort);
+                this.DrawSortHeader(item.Title,item.TextAlign,x,y,textWidth,this.SortInfo.Sort, textSize);
             }
             else
             {
-                this.DrawText(item.Title,item.TextAlign,x,y,textWidth);
+                this.DrawText(item.Title,item.TextAlign,x,y,textWidth,textSize);
+            }
+
+            if (iconWidth>0)
+            {
+                this.DrawHeaderIcon(item.Icon, textSize.Right, y, i, item);
+                this.Canvas.font=this.HeaderFont;
             }
 
            this.Canvas.fillStyle=this.HeaderColor;
@@ -4137,44 +4289,91 @@ function ChartReport()
                 this.DrawItemBG({ Rect:rtBG, BGColor:item.HeaderBGColor });
             }
 
+            var iconWidth=0;
+            if (item.Icon && item.Icon.Symbol)  //图标
+            {
+                var iconWidth=item.Icon.Size;
+                if (item.Icon.Margin)
+                {
+                    var margin=item.Icon.Margin;
+                    if (IFrameSplitOperator.IsNumber(margin.Left)) iconWidth+=margin.Left;
+                    if (IFrameSplitOperator.IsNumber(margin.Right)) iconWidth+=margin.Right;
+                }
+            }
+
+            textWidth-=iconWidth;
+
             if (item.HeaderColor) this.Canvas.fillStyle=item.HeaderColor;
             else this.Canvas.fillStyle=this.HeaderColor;
 
+            var textSize={ }
             if (this.SortInfo && this.SortInfo.Field==i && this.SortInfo.Sort>0)
             {
-                this.DrawSortHeader(item.Title,item.TextAlign,x,y,textWidth,this.SortInfo.Sort);
+                this.DrawSortHeader(item.Title,item.TextAlign,x,y,textWidth,this.SortInfo.Sort,textSize);
             }
             else
             {
-                this.DrawText(item.Title,item.TextAlign,x,y,textWidth);
+                this.DrawText(item.Title,item.TextAlign,x,y,textWidth,textSize);
+            }
+
+            if (iconWidth>0)
+            {
+                this.DrawHeaderIcon(item.Icon, textSize.Right, y, i, item);
+                this.Canvas.font=this.HeaderFont;
             }
 
             textLeft+=item.Width;
         } 
     }
 
-    this.DrawText=function(text, textAlign, x, y, textWidth)
+    this.DrawText=function(text, textAlign, x, y, cellWidth, textSize)
     {
+        var textWidth=this.Canvas.measureText(text).width;
         if (textAlign=='center')
         {
-            x=x+textWidth/2;
-            this.Canvas.textAlign="center";
+            x=x+(cellWidth-textWidth)/2;
         }
         else if (textAlign=='right')
         {
-            x=x+textWidth;
-            this.Canvas.textAlign="right";
-        }
-        else
-        {
-            this.Canvas.textAlign="left";
+            x=x+cellWidth-textWidth;
         }
 
+        this.Canvas.textAlign="left";
         this.Canvas.textBaseline="middle";
         this.Canvas.fillText(text,x,y);
+
+        if (textSize) 
+        {
+            textSize.Right=x+textWidth;
+            textSize.Width=textWidth;
+        }
+    }
+
+    this.DrawHeaderIcon=function(icon, x, y, index, column)
+    {
+        var iconFont=`${icon.Size}px ${icon.Family}`;
+        this.Canvas.font=iconFont;
+        this.Canvas.textAlign="left";
+        if (icon.Color) this.Canvas.fillStyle=icon.Color;
+
+        var xIcon=x;
+        var yIcon=y;
+        if (icon.Margin && IFrameSplitOperator.IsNumber(icon.Margin.Left)) xIcon+=icon.Margin.Left;
+        if (icon.Margin && IFrameSplitOperator.IsNumber(icon.Margin.Bottom)) yIcon-=icon.Margin.Bottom;
+        this.Canvas.fillText(icon.Symbol, xIcon, yIcon);
+
+        if (icon.Tooltip)
+        {
+            var rtIcon={ Left:xIcon, Top:yIcon-icon.Size/2, Width:icon.Size, Height:icon.Size };
+            rtIcon.Right=rtIcon.Left+rtIcon.Width;
+            rtIcon.Bottom=rtIcon.Top+rtIcon.Height;
+
+            var tooltipData={ Rect:rtIcon, Type:2, Column:column, Index:index, Data:icon.Tooltip.Data };
+            this.TooltipRect.push(tooltipData);
+        }
     }
 
-    this.DrawSortHeader=function(text, textAlign, x, y, width, sortType)
+    this.DrawSortHeader=function(text, textAlign, x, y, width, sortType,textSize)
     {
         var sortText=sortType==1?"↓":"↑";
         var sortTextWidth=this.Canvas.measureText(sortText).width;
@@ -4190,15 +4389,17 @@ function ChartReport()
         {
             x=(x+width)-sortTextWidth-textWidth;
         }
-        else
-        {
-            
-        }
 
         this.Canvas.fillText(text,x,y);
         this.Canvas.fillStyle=this.SortColor;
         this.Canvas.fillText(sortText,x+textWidth,y);
         this.Canvas.fillStyle=this.HeaderColor;
+
+        if (textSize)
+        {
+            textSize.Right=x+textWidth+sortTextWidth;
+            textSize.Width=textWidth+sortTextWidth;
+        }
     }
 
 
@@ -4452,7 +4653,7 @@ function ChartReport()
         var x=left+this.ItemMergin.Left;
         var textWidth=column.Width-this.ItemMergin.Left-this.ItemMergin.Right;
         var stock=data.Stock;
-        var drawInfo={ Text:null, TextColor:column.TextColor , TextAlign:column.TextAlign };
+        var drawInfo={ Text:null, TextColor:column.TextColor , TextAlign:column.TextAlign, Tooltip:null };
         var rtItem={ Left:left, Top:top,  Width:column.Width, Height:this.RowHeight };
         rtItem.Right=rtItem.Left+rtItem.Width;
         rtItem.Bottom=rtItem.Top+rtItem.Height;
@@ -4463,12 +4664,6 @@ function ChartReport()
             this.DrawItemBG({ Rect:rtItem, BGColor:column.FullColBGColor });
         }
         
-        //tooltip提示
-        if (column.EnableTooltip===true)
-        {
-            this.TooltipRect.push({ Rect:rtItem, Stock:stock, Index:index, Column:column, RowType:rowType })
-        }
-
         if (column.Type==REPORT_COLUMN_ID.INDEX_ID)
         {
             if (rowType==1) return; //固定行序号空
@@ -4716,6 +4911,14 @@ function ChartReport()
             else
                 this.DrawItemText(drawInfo.Text, drawInfo.TextColor, drawInfo.TextAlign, x, top, textWidth, drawInfo.BGColor);
         }
+
+        //tooltip提示
+        if (drawInfo.Tooltip)
+        {
+            //Type:1=数据截断
+            var tooltipData={ Rect:rtItem, Stock:stock, Index:index, Column:column, RowType:rowType, Type:drawInfo.Tooltip.Type, Data:drawInfo.Tooltip.Data };
+            this.TooltipRect.push(tooltipData);
+        }
     }
 
     this.DrawCustomText=function(drawInfo, column, left, top, cellWidth)
@@ -4764,6 +4967,13 @@ function ChartReport()
             this.Canvas.rect(rtCell.Left, rtCell.Top, rtCell.Width, rtCell.Height);
             //this.Canvas.stroke(); //调试用
             this.Canvas.clip();
+
+            //数据截断提示信息
+            drawInfo.Tooltip=
+            { 
+                Type:1, 
+                Data:{ AryText:[ {Text:drawInfo.Text} ] }
+            }
         }
 
         this.Canvas.textBaseline="middle";
@@ -6041,8 +6251,7 @@ function ChartReport()
 
     }
 
-    //坐标所在单元格
-    this.PtInCell=function(x,y)
+    this.GetTooltipData=function(x,y)
     {
         if (!IFrameSplitOperator.IsNonEmptyArray(this.TooltipRect)) return null;
 
@@ -6054,9 +6263,11 @@ function ChartReport()
 
             if (x>=rt.Left && x<=rt.Right && y>=rt.Top && y<=rt.Bottom)
             {
-                return { Rect:item.Rect, Stock:item.Stock, Column:item.Column, Index:item.Index };
+                return { Rect:item.Rect, Stock:item.Stock, Column:item.Column, Index:item.Index, Type:item.Type, Data:item.Data };
             }
         }
+
+        return null;
     }
 
     this.PtInHeaderDragBorder=function(x, y)
@@ -6648,3 +6859,166 @@ function ChartVScrollbar()
         return pos;
     }
 }
+
+
+function ChartCellTooltip()
+{
+    this.Canvas;                            //画布
+    this.ChartBorder;                       //边框信息
+    this.ChartFrame;                        //框架画法
+    this.Name;                              //名称
+    this.ClassName='ChartCellTooltip';      //类名
+    
+    this.BGColor="rgba(255,255,225, 0.9)";
+    this.BorderColor="rgb(0,0,0)";
+    this.Margin={ Left:5, Right:5, Top:4, Bottom:5 };
+    this.Font=`${13*GetDevicePixelRatio()}px 微软雅黑`;
+    this.TextColor="rgb(0,0,0)";
+    this.YOffset=20;
+    this.XOffset=5;
+
+    this.Point; //{ X, Y}
+    this.Data;  //{ AryText:[ { Text, Color, Title:, TitleColor, Space, Margin:{ Left, Top, Right, Bottom }}  ]}   
+    
+
+    this.Draw=function()
+    {
+        if (!this.Canvas) return;
+        if (!this.Data || !IFrameSplitOperator.IsNonEmptyArray(this.Data.AryText)) return;
+        if (!this.Point) return;
+
+        var size={ Width:0, Height:0, Text:[] };
+        this.CalculateTextSize(this.Data.AryText, size);
+        if (!IFrameSplitOperator.IsNonEmptyArray(size.Text)) return;
+
+        this.DrawTooltip(this.Data.AryText, size);
+    }
+
+    this.CalculateTextSize=function(aryText, size)
+    {
+        var width=0, height=0;
+        for(var i=0;i<aryText.length;++i)
+        {
+            var item=aryText[i];
+            var titleHeight=0, titleWidth=0;
+            if (!item.Title && !item.Text) continue;
+
+            if (item.Title)
+            {
+                if (item.TitleFont) this.Canvas.font=item.TitleFont;
+                else this.Canvas.font=this.Font;
+
+                titleWidth=this.Canvas.measureText(item.Title).width;   
+                titleHeight=this.Canvas.measureText("擎").width;
+            }
+
+            var textWidth=0, textHeight=0;
+            if (item.Text)
+            {
+                if (item.Font) this.Canvas.font=item.Font;
+                else this.Canvas.font=this.Font;
+
+                textWidth=this.Canvas.measureText(item.Text).width;   
+                textHeight=this.Canvas.measureText("擎").width;
+            }
+
+            var itemWidth=titleWidth+textWidth;
+            var itemHeight=Math.max(textHeight,titleHeight);
+
+            if (IFrameSplitOperator.IsNumber(item.Space)) itemWidth+=item.Space;
+
+            if (item.Margin)
+            {
+                var margin=item.Margin;
+                if (IFrameSplitOperator.IsNumber(margin.Left)) itemWidth+=margin.Left;
+                if (IFrameSplitOperator.IsNumber(margin.Right)) itemWidth+=margin.Right;
+                if (IFrameSplitOperator.IsNumber(margin.Top)) itemHeight+=margin.Top;
+                if (IFrameSplitOperator.IsNumber(margin.Bottom)) itemHeight+=margin.Bottom;
+            }
+
+            if (width<itemWidth) width=itemWidth;
+            height+=itemHeight;
+
+            size.Text[i]={ Width: itemWidth, Height:itemHeight, TitleWidth:titleWidth, TextWidth:textWidth };
+        }
+
+        if (this.Margin)
+        {
+            var margin=this.Margin;
+            if (IFrameSplitOperator.IsNumber(margin.Left)) width+=margin.Left;
+            if (IFrameSplitOperator.IsNumber(margin.Right)) width+=margin.Right;
+            if (IFrameSplitOperator.IsNumber(margin.Top)) height+=margin.Top;
+            if (IFrameSplitOperator.IsNumber(margin.Bottom)) height+=margin.Bottom;
+        }
+
+        size.Width=width;
+        size.Height=height;
+    }
+
+    this.DrawTooltip=function(aryText, size)
+    {
+        var rtBG={ Left:this.Point.X+this.XOffset, Top:this.Point.Y+this.YOffset, Width:size.Width, Height:size.Height };
+        rtBG.Right=rtBG.Left+rtBG.Width;
+        rtBG.Bottom=rtBG.Top+rtBG.Height;
+
+        var border=this.ChartBorder.GetBorder();
+        if (rtBG.Bottom>border.ChartHeight)
+        {
+            rtBG.Bottom=this.Point.Y;
+            rtBG.Top=rtBG.Bottom-rtBG.Height;
+        }
+
+        if (rtBG.Right>border.ChartWidth)
+        {
+            rtBG.Right=this.Point.X;
+            rtBG.Left=rtBG.Right-rtBG.Width;
+        }
+
+        if (this.BGColor)
+        {
+            this.Canvas.fillStyle=this.BGColor;
+            this.Canvas.fillRect(ToFixedPoint(rtBG.Left),ToFixedPoint(rtBG.Top),ToFixedRect(rtBG.Width),ToFixedRect(rtBG.Height));
+        }
+        
+        if (this.BorderColor)
+        {
+            this.Canvas.strokeStyle=this.BorderColor;
+            this.Canvas.strokeRect(ToFixedPoint(rtBG.Left),ToFixedPoint(rtBG.Top),ToFixedRect(rtBG.Width),ToFixedRect(rtBG.Height));
+        }
+
+        var left=rtBG.Left;
+        var top=rtBG.Top;
+        if (this.Margin && IFrameSplitOperator.IsNumber(this.Margin.Left)) left+=this.Margin.Left;
+        if (this.Margin && IFrameSplitOperator.IsNumber(this.Margin.Top)) top+=this.Margin.Top;
+
+        var xText, yText=top;
+        for(var i=0;i<aryText.length;++i)
+        {
+            var item=aryText[i];
+            if (!item.Title && !item.Text) continue;
+            var itemSize=size.Text[i];
+
+            xText=left;
+            yText+=itemSize.Height;
+
+            if (item.Margin && IFrameSplitOperator.IsNumber(item.Margin.Left)) xText+=item.Margin.Left;
+            if (item.Margin && IFrameSplitOperator.IsNumber(item.Margin.Bottom)) yText-=item.Margin.Bottom;
+            if (item.Title)
+            {
+                if (item.TitleColor) this.Canvas.fillStyle=item.TitleColor;
+                else this.Canvas.fillStyle=this.TextColor;
+                this.Canvas.fillText(item.Title,xText,yText,itemSize.TitleWidth);
+                xText+=itemSize.TitleWidth;
+                if (IFrameSplitOperator.IsNumber(item.Space)) xText+=item.Space;
+            }
+
+            if (item.Text)
+            {
+                if (item.Color) this.Canvas.fillStyle=item.Color;
+                else this.Canvas.fillStyle=this.TextColor;
+                this.Canvas.fillText(item.Text,xText,yText,itemSize.TextWidth);
+            }
+
+        }
+    }
+}