hqchart 1.1.14643 → 1.1.14651

package/src/jscommon/umychart.js

@@ -3147,7 +3147,10 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
         },          
 
         //锁十字光标
-        LockCorssCursor:{ X:{ Enable:false } }
+        LockCorssCursor:{ X:{ Enable:false } },
+
+        //图形中的单元选中状态
+        MapIndexChartCache:new Map(),      //key 指标GUID
     };  
 
     this.VerticalDrag;              //通过X轴左右拖动数据(手势才有)
@@ -3824,6 +3827,56 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
         return false;
     }
 
+    //点击图新内部元素
+    this.TryClickChartCell=function(x, y, e)
+    {
+        var result=null;
+        for(var i=0;i<this.ChartPaint.length;++i)
+        {
+            var item=this.ChartPaint[i];
+            if (!item.ClickCell) continue;
+            if (item.IsHideScriptIndex()) continue;
+            
+            result=item.ClickCell(x,y,e);
+            if (result) return result;
+        }
+
+        for(var i=0;i<this.OverlayChartPaint.length;++i)
+        {
+            var item=this.OverlayChartPaint[i];
+            if (!item.ClickCell) continue;
+
+            result=item.ClickCell(x,y,e);
+            if (result) return result;
+        }
+
+        for(var i=0,j=0,k=0;i<this.Frame.SubFrame.length;++i)
+        {
+            var item=this.Frame.SubFrame[i];
+            if (!IFrameSplitOperator.IsNonEmptyArray(item.OverlayIndex)) continue;
+
+            for(j=0;j<item.OverlayIndex.length;++j)
+            {
+                var overlayItem=item.OverlayIndex[j];
+                if (!IFrameSplitOperator.IsNonEmptyArray(overlayItem.ChartPaint)) continue;
+
+                for(var k=0;k<overlayItem.ChartPaint.length; ++k)
+                {
+                    var chart=overlayItem.ChartPaint[k];
+                    if (!chart.IsShow) continue;
+                    if (chart.IsHideScriptIndex()) continue;
+                    if (chart.ClickCell) 
+                    {
+                        result=chart.ClickCell(x,y,e);
+                        if (result) return result;
+                    }
+                }
+            }
+        }
+
+        return null;
+    }
+
     this.TryMouseMove_CustomChartDrag=function(sendData)
     {
         var event=this.GetEventCallback(JSCHART_EVENT_ID.ON_CUSTOM_DRAG_MOUSE_MOVE);
@@ -4135,23 +4188,41 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
                 }, 250);
 
                 var bSelectedChartChanged=false;
-                if (this.SelectedChart.EnableSelected)
+                var clickCellData=this.TryClickChartCell(x,y,e);    //点击图形子元素
+
+                if (clickCellData)
+                {
+                    if (clickCellData.Redraw===true) bRedraw=true;
+                }
+                else
                 {
-                    var selectChart=this.PtInChart(x,y);
-                    if (selectChart)
+                    if (this.SelectedChart.EnableSelected)  //整体图形选中
                     {
-                        if (this.SelectedChart.Selected.Identify!=selectChart.Identify) 
+                        var selectChart=this.PtInChart(x,y);
+                        if (selectChart)
                         {
-                            this.SelectedChart.Selected.Identify=selectChart.Identify;
-                            this.SelectedChart.Selected.Chart=selectChart.Chart;
-                            bSelectedChartChanged=true;
-                        }
+                            if (this.SelectedChart.Selected.Identify!=selectChart.Identify) 
+                            {
+                                this.SelectedChart.Selected.Identify=selectChart.Identify;
+                                this.SelectedChart.Selected.Chart=selectChart.Chart;
+                                bSelectedChartChanged=true;
+                            }
 
-                        if (this.EnableIndexChartDrag)
+                            if (this.EnableIndexChartDrag)
+                            {
+                                this.IndexChartDrag={ SelectedChart:selectChart, LastMove:{X:x, Y:y}, Click:{X:x, Y:y } };
+                                this.IndexChartDrag.Info=this.GetSelectedChartInfo(selectChart);
+                                if (this.IndexChartDrag.Info) this.IndexChartDrag.Info.FrameID=this.Frame.PtInFrame(x,y);
+                            }
+                        }
+                        else
                         {
-                            this.IndexChartDrag={ SelectedChart:selectChart, LastMove:{X:x, Y:y}, Click:{X:x, Y:y } };
-                            this.IndexChartDrag.Info=this.GetSelectedChartInfo(selectChart);
-                            if (this.IndexChartDrag.Info) this.IndexChartDrag.Info.FrameID=this.Frame.PtInFrame(x,y);
+                            if (this.SelectedChart.Selected.Identify)
+                            {
+                                this.SelectedChart.Selected.Identify=null;
+                                this.SelectedChart.Selected.Chart=null;
+                                bSelectedChartChanged=true;
+                            }
                         }
                     }
                     else
@@ -4159,19 +4230,10 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
                         if (this.SelectedChart.Selected.Identify)
                         {
                             this.SelectedChart.Selected.Identify=null;
-                            this.SelectedChart.Selected.Chart=null;
                             bSelectedChartChanged=true;
                         }
                     }
                 }
-                else
-                {
-                    if (this.SelectedChart.Selected.Identify)
-                    {
-                        this.SelectedChart.Selected.Identify=null;
-                        bSelectedChartChanged=true;
-                    }
-                }
                 
                 if ((drawPictureActive.Select.Guid!=null && this.SelectChartDrawPicture==null) || bSelectedChartChanged)
                 {
@@ -7052,8 +7114,18 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
         var sendData={ MouseStatus:null, X:x, Y:y, FrameID:frameID, e:e };
         if (this.TryMouseMove_CustomChartDrag(sendData))
         {
-            if (sendData.MouseStatus) 
-                mouseStatus=sendData.MouseStatus;
+            if (sendData.MouseStatus)
+            {
+                if (sendData.MouseStatus.Level==1)  //高等级 覆盖状态
+                {
+                    mouseStatus=sendData.MouseStatus;
+                }
+                else
+                {
+                    if (!mouseStatus) mouseStatus=sendData.MouseStatus;
+                }
+            }
+                
         }
         
         var bDrawPicture=false; //是否正在画图
@@ -10017,6 +10089,7 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
             frame.Canvas=this.Canvas;
             frame.MainFrame=subFrame.Frame;
             frame.ChartBorder=subFrame.Frame.ChartBorder;
+            frame.GlobalOption=this.GlobalOption;
             if (findOverlayItem) frame.IsShow=findOverlayItem.Frame.IsShow;
             //if (obj.IsShareY===true) frame.IsShareY=true;   
             frame.YSplitOperator=new FrameSplitY();
@@ -25485,6 +25558,59 @@ function IChartPainting()
         else return item.Date;
     }
 
+    //保存图形状态
+    this.SaveCacheData=function(name, value)
+    {
+        if (!this.ChartFrame || !this.ChartFrame.GlobalOption) return false;
+        var mapIndexCache=this.ChartFrame.GlobalOption.MapIndexChartCache;
+        if (!mapIndexCache) return false;
+
+        if (!this.Script || !this.Script.Guid) return false;
+        if (!this.Name) return false;
+
+        var id=this.Script.Guid;    //指标ID;
+        if (!mapIndexCache.has(id))
+        {
+            mapIndexCache.set(id, { MapData:new Map() });
+        }
+
+        var mapItem=mapIndexCache.get(id);
+        var key=`${this.Name}-${name}`;
+        mapItem.MapData.set(key, value);
+
+        return true;
+    }
+
+    //获取缓存数据 返回数据 out:{ Data, Key, IndexGuid }
+    this.GetCacheData=function(name, out)
+    {
+        if (!this.ChartFrame || !this.ChartFrame.GlobalOption) return false;
+        var mapIndexCache=this.ChartFrame.GlobalOption.MapIndexChartCache;
+        if (!mapIndexCache) return false;
+
+        if (!this.Script || !this.Script.Guid) return false;
+        if (!this.Name) return false;
+
+        var id=this.Script.Guid;    //指标ID;
+        if (!mapIndexCache.has(id)) return false;
+
+        var mapItem=mapIndexCache.get(id);
+        var key=`${this.Name}-${name}`;
+
+        if (!mapItem.MapData.has(key)) return false;
+
+        var value=mapItem.MapData.get(key);
+        if (out) 
+        {
+            out.Data=value;
+            out.Key=key;
+            out.IndexGuid=id;
+        }
+
+        return true;
+    }
+
+        
     //数据导出 数据格式 [{ Title:数据名称, Data:[] }]
     //this.ExportData=function(aryKData) { }  
 
@@ -26198,6 +26324,12 @@ function IChartPainting()
     }
 }
 
+//缓存键值
+IChartPainting.CACHE_KEY=
+{
+    SELECTED:"_Selected_Key_",  //图形元素选中(单选)
+}
+
 
 //缩放因子
 /*
@@ -32603,7 +32735,7 @@ function ChartKLineTable()
     this.newMethod();
     delete this.newMethod;
 
-    this.ClassName='ChartKlineTable';    //类名
+    this.ClassName='ChartKLineTable';    //类名
     this.Data;
     this.RowName;
     this.RowNamePosition=1; //0=不显示 1=左边内部  2=左边外部 3=右边外部
@@ -44000,8 +44132,11 @@ function ChartDrawSVG()
     this.BuildKeyCallback=null;
     this.MapCache=null;         //key=date/date-time  value={ Data:[] }
 
-    this.AryDrawDetail=[];              //需要绘制的文字信息
-    this.EnalbeDetailNoOverlap=false;     //详情重叠不显示
+    this.AryDrawDetail=[];                  //需要绘制的文字信息
+    this.EnalbeDetailNoOverlap=false;       //详情重叠不显示
+    this.EnableClick=false;                 //是否支持点击
+    this.PixelRatio=GetDevicePixelRatio();
+    this.SelectedItemCache=null;
 
     this.BuildKey=function(item)
     {
@@ -44039,6 +44174,7 @@ function ChartDrawSVG()
         this.AryDrawRect=[];
         this.AryDrawDetail=[];
         this.AutoYOffset=0;
+        this.SelectedItemCache=null;
 
         if (!this.IsShow || this.ChartFrame.IsMinSize || !this.IsVisible) return;
         if (this.IsShowIndexTitleOnly()) return;
@@ -44049,13 +44185,17 @@ function ChartDrawSVG()
 
         if (this.EnalbeDetailNoOverlap) this.DrawOnVerlapDetail();
 
+        this.DrawSelectedItem();
+
         this.AryDrawDetail=[];
+        this.SelectedItemCache=null;
     }
 
     this.DrawDetail=function(rtSVG, data, svgItem)
     {
         if (!IFrameSplitOperator.IsNonEmptyArray(data.Content)) return;
         
+        var bSelected=this.IsSelectedItem(svgItem);    //是否是选中点 
         var lefMargin=2;
         var rightMargin=2;
         var itemSpace=2;
@@ -44116,13 +44256,15 @@ function ChartDrawSVG()
             }
         }
 
+        if (bSelected) this.SelectedItemCache.Detail={ AryText:aryText, Rect:rtBorder, Data:svgItem };
+
         if (this.EnalbeDetailNoOverlap)  //启动重叠不会 先不画只计算位置, 后面统一画
         {
             this.AryDrawDetail.push({ Rect:rtBorder, AryText:aryText, Data:svgItem });
             return;
         }
 
-        this.DrawDetailText(data,aryText,rtBorder);
+        if (!bSelected) this.DrawDetailText(data,aryText,rtBorder);
 
         this.AryDrawRect.push( {Left:rtBorder.Left, Top:rtBorder.Top, Right:rtBorder.Right, Bottom:rtBorder.Bottom, Type:"Detail", Data:svgItem } );
     }
@@ -44169,7 +44311,9 @@ function ChartDrawSVG()
 
             if (this.IsRectOverlap(rtBorder)) continue;
 
-            this.DrawDetailText(drawItem.Data.Detail, drawItem.AryText, rtBorder);
+            var bSelected=this.IsSelectedItem(drawItem.Data);    //是否是选中点 
+
+            if (!bSelected) this.DrawDetailText(drawItem.Data.Detail, drawItem.AryText, rtBorder);
 
             this.AryDrawRect.push( {Left:rtBorder.Left, Top:rtBorder.Top, Right:rtBorder.Right, Bottom:rtBorder.Bottom, Type:"Detail", Data:drawItem.Data } );
         }
@@ -44334,6 +44478,12 @@ function ChartDrawSVG()
         }
     }
 
+    this.IsSelectedItem=function(item)
+    {
+        if (!this.SelectedItemCache) return false;
+        return this.SelectedItemCache.ID==item.ID;
+    }
+
     this.DrawSVGV2=function()
     {
         if (!this.IsShow || this.ChartFrame.IsMinSize) return;
@@ -44349,7 +44499,7 @@ function ChartDrawSVG()
         var distanceWidth=this.ChartFrame.DistanceWidth;
         var isMinute=this.IsMinuteFrame();
         var border=this.GetBorder();
-        var pixelRatio = GetDevicePixelRatio();
+        this.PixelRatio=GetDevicePixelRatio();
 
         if (this.IsHScreen)
         {
@@ -44364,7 +44514,11 @@ function ChartDrawSVG()
             var bottom=border.BottomEx;
         }
 
-        var x,y,price;
+        var selectedData={ };   
+        if (this.GetCacheData(IChartPainting.CACHE_KEY.SELECTED, selectedData)) //选中图标
+            this.SelectedItemCache={ ID:selectedData.Data.ID };
+
+        var x;
         var setKey=new Set();   //已经画过的Key就不再用了
         for(var i=this.Data.DataOffset,j=0;i<this.Data.Data.length && j<xPointCount;++i,++j,xOffset+=(dataWidth+distanceWidth))
         {
@@ -44391,147 +44545,200 @@ function ChartDrawSVG()
             {
                 var item=mapItem.Data[k];
 
-                if (item.Value=="Top") y=top;
-                else if (item.Value=="Bottom") y=bottom;
-                else 
+                if (this.IsSelectedItem(item))
                 {
-                    if (IFrameSplitOperator.IsString(item.Value)) price=this.GetKValue(kItem,item.Value);
-                    else price=item.Value;
-
-                    y=this.ChartFrame.GetYFromData(price, false);
+                    this.SelectedItemCache.Item=item;
+                    this.SelectedItemCache.KItem=kItem;
+                    this.SelectedItemCache.Index=i;
+                    this.SelectedItemCache.X=x;
+                    this.SelectedItemCache.Top=top;
+                    this.SelectedItemCache.Bottom=bottom;
                 }
-                if (IFrameSplitOperator.IsNumber(item.YOffset)) y+=item.YOffset;    //Y轴偏移
 
-                var svgItem=item.SVG;
-                if (IFrameSplitOperator.IsNumber(svgItem.YOffset)) y+=svgItem.YOffset;
+                this.DrawSVGItem(item, kItem, i, x, top, bottom);
+            }
 
-                if (this.AutoPosition) 
-                {
-                    var pt={ X:x, Y:y };
-                    this.CalculateShowPosition(item, pt);   //重新计算位置
-                    x=pt.X;
-                    y=pt.Y;
-                }
+            setKey.add(key);
+        }
+    }
 
-                var fontSVG=`${svgItem.Size}px ${this.Family}`;
-                this.Canvas.font=fontSVG;
-                var halfSize=svgItem.Size/2;
-                var textBaseline='bottom';
-                var rtSVG={ Left:x-halfSize, Right:x+halfSize, Top:y-svgItem.Size, Bottom:y, Height:svgItem.Size, Width:svgItem.Size };
-                if (svgItem.VAlign===0) 
-                {
-                    textBaseline="top";
-                    rtSVG.Top=y;
-                    rtSVG.Bottom=rtSVG.Top+svgItem.Size;
-                }
-                else if (svgItem.VAlign===1) 
-                {
-                    textBaseline='middle';
-                    rtSVG.Top=y-svgItem.Size/2;
-                    rtSVG.Bottom=rtSVG.Top+svgItem.Size;
-                }
 
-                if (rtSVG.Top<0) 
-                {
-                    rtSVG.Top=0;
-                    rtSVG.Bottom=svgItem.Size;
-                    y=rtSVG.Bottom;
-                }
+    this.GetYFromData=function(value, kItem, top, bottom)
+    {
+        if (value=="Top") return top;
+        if (value=="Bottom") return bottom;
+        
+        var price;
+        if (IFrameSplitOperator.IsString(value)) price=this.GetKValue(kItem,value);
+        else price=value;
 
-                this.Canvas.textBaseline=textBaseline;
-                this.Canvas.textAlign='center';
-                this.Canvas.fillStyle = svgItem.Color;
-                this.Canvas.fillText(svgItem.Symbol, x, y);
+        var y=this.ChartFrame.GetYFromData(price, false);
 
-                this.AryDrawRect.push( {Left:rtSVG.Left, Top:rtSVG.Top, Right:rtSVG.Right, Bottom:rtSVG.Bottom, Type:"SVG", Data:item } );
+        return y;
+    }
 
-                if (this.EnableTooltip) this.TooltipRect.push({ Rect:rtSVG, Index:i, Item:item });
+    this.DrawSVGItem=function(item, kItem, index, x, top, bottom)
+    {
+        var y=this.GetYFromData(item.Value, kItem, top, bottom);
+        if (IFrameSplitOperator.IsNumber(item.YOffset)) y+=item.YOffset;    //Y轴偏移
 
-                //文字
-                if (item.Text && item.Text.Content && this.TextFont)
-                {
-                    var textItem=item.Text;
-                    this.Canvas.font=this.TextFont;
-                    this.Canvas.fillStyle=textItem.Color;
-                    var yText=y;
-                    if (IFrameSplitOperator.IsNumber(textItem.YOffset)) yText+=textItem.YOffset;
-                    this.Canvas.fillText(textItem.Content, x, yText);
-                }
+        var svgItem=item.SVG;
+        if (IFrameSplitOperator.IsNumber(svgItem.YOffset)) y+=svgItem.YOffset;
 
-                if (item.Detail)
-                {
-                    this.DrawDetail(rtSVG,item.Detail, item);
-                }
-                
-                //连线
-                if (item.Line)
-                {
-                    var lineItem=item.Line;
-                    var price=null, yPrice=null;
-                    if (lineItem.Value=="Bottom")
-                    {
-                        yPrice=bottom;
-                    }
-                    else if (lineItem.Value=="Top")
-                    {
-                        yPrice=top;
-                    }
-                    else  
-                    {
-                        if (IFrameSplitOperator.IsString(lineItem.Value)) price=this.GetKValue(kItem,lineItem.Value);
-                        else if (IFrameSplitOperator.IsNumber(lineItem.Value)) price=lineItem.Value;
+        if (this.AutoPosition) 
+        {
+            var pt={ X:x, Y:y };
+            this.CalculateShowPosition(item, pt);   //重新计算位置
+            x=pt.X;
+            y=pt.Y;
+        }
 
-                        if (!IFrameSplitOperator.IsNumber(price)) continue;
-                        yPrice=this.ChartFrame.GetYFromData(price);
-                    }
-                    
-                    if (yPrice>=rtSVG.Top && yPrice<=rtSVG.Bottom) continue;
+        var bSelected=this.IsSelectedItem(item);    //是否是选中点 
 
-                    var yText;
-                    if (yPrice<rtSVG.Top) 
-                    {
-                        yText=rtSVG.Top;
-                        if (IFrameSplitOperator.IsNumber(lineItem.SVGBlank))
-                        {
-                            //yPrice+=lineItem.Blank;
-                            yText-=lineItem.SVGBlank;
-                        }
-                    }
-                    else
-                    {
-                        yText=rtSVG.Bottom;
-                        if (IFrameSplitOperator.IsNumber(lineItem.SVGBlank))
-                        {
-                            //yPrice-=lineItem.Blank;
-                            yText+=lineItem.SVGBlank;
-                        }
-                    }
+        var fontSVG=`${svgItem.Size}px ${this.Family}`;
+        this.Canvas.font=fontSVG;
+        var halfSize=svgItem.Size/2;
+        var textBaseline='bottom';
+        var rtSVG={ Left:x-halfSize, Right:x+halfSize, Top:y-svgItem.Size, Bottom:y, Height:svgItem.Size, Width:svgItem.Size };
+        if (svgItem.VAlign===0) 
+        {
+            textBaseline="top";
+            rtSVG.Top=y;
+            rtSVG.Bottom=rtSVG.Top+svgItem.Size;
+        }
+        else if (svgItem.VAlign===1) 
+        {
+            textBaseline='middle';
+            rtSVG.Top=y-svgItem.Size/2;
+            rtSVG.Bottom=rtSVG.Top+svgItem.Size;
+        }
 
-                    if (lineItem.Dash) this.Canvas.setLineDash(lineItem.Dash);    //虚线
-                    var lineWidth=1*pixelRatio;
-                    if (lineItem.Width>0) lineWidth=lineItem.Width*pixelRatio;
-                    this.Canvas.lineWidth=lineWidth;   //线宽
-                    this.Canvas.strokeStyle = lineItem.Color;
-                    this.Canvas.beginPath();
+        if (rtSVG.Top<0) 
+        {
+            rtSVG.Top=0;
+            rtSVG.Bottom=svgItem.Size;
+            y=rtSVG.Bottom;
+        }
 
-                    if (this.IsHScreen)
-                    {
-                        this.Canvas.moveTo(yText, ToFixedPoint(x));
-                        this.Canvas.lineTo(yPrice,ToFixedPoint(x));
-                    }
-                    else
-                    {
-                        this.Canvas.moveTo(ToFixedPoint2(lineWidth,x),yText);
-                        this.Canvas.lineTo(ToFixedPoint2(lineWidth,x),yPrice);
-                    }
-                    
-                    this.Canvas.stroke();
-                    this.Canvas.setLineDash([]);
-                }
+        if (!bSelected)
+        {
+            this.Canvas.textBaseline=textBaseline;
+            this.Canvas.textAlign='center';
+            this.Canvas.fillStyle = svgItem.Color;
+            this.Canvas.fillText(svgItem.Symbol, x, y);
+        }
+        else
+        {
+            this.SelectedItemCache.RectSVG=rtSVG;   //保存图标的位置
+            this.SelectedItemCache.SVGConfig={ Font:fontSVG, TextBaseline:textBaseline, X:x, Y:y };
+        }
+
+        this.AryDrawRect.push( {Left:rtSVG.Left, Top:rtSVG.Top, Right:rtSVG.Right, Bottom:rtSVG.Bottom, Type:"SVG", Data:item } );
+
+        if (this.EnableTooltip) this.TooltipRect.push({ Rect:rtSVG, Index:index, Item:item });
+
+        //图标内的文字
+        if (!bSelected && item.Text && item.Text.Content && this.TextFont)
+        {
+            var textItem=item.Text;
+            this.Canvas.font=this.TextFont;
+            this.Canvas.fillStyle=textItem.Color;
+            var yText=y;
+            if (IFrameSplitOperator.IsNumber(textItem.YOffset)) yText+=textItem.YOffset;
+            this.Canvas.fillText(textItem.Content, x, yText);
+        }
+
+        //图标左右两边文字
+        if (item.Detail) this.DrawDetail(rtSVG, item.Detail, item);
+        
+        //连线
+        if (!bSelected && item.Line)  this.DrawVerticalLine(item,kItem,x, rtSVG, top, bottom);
+    }
+
+    //绘制垂直连线
+    this.DrawVerticalLine=function(item, kItem, x, rtSVG, top, bottom)
+    {
+        if (!item.Line) return;
+
+        var lineItem=item.Line;
+        var yPrice=this.GetYFromData(lineItem.Value, kItem, top, bottom)
+        if (yPrice>=rtSVG.Top && yPrice<=rtSVG.Bottom) return;
+
+        var yText;
+        if (yPrice<rtSVG.Top) 
+        {
+            yText=rtSVG.Top;
+            if (IFrameSplitOperator.IsNumber(lineItem.SVGBlank))
+            {
+                //yPrice+=lineItem.Blank;
+                yText-=lineItem.SVGBlank;
+            }
+        }
+        else
+        {
+            yText=rtSVG.Bottom;
+            if (IFrameSplitOperator.IsNumber(lineItem.SVGBlank))
+            {
+                //yPrice-=lineItem.Blank;
+                yText+=lineItem.SVGBlank;
             }
+        }
 
-            setKey.add(key);
+        if (lineItem.Dash) this.Canvas.setLineDash(lineItem.Dash);    //虚线
+        var lineWidth=1*this.PixelRatio;
+        if (lineItem.Width>0) lineWidth=lineItem.Width*this.PixelRatio;
+        this.Canvas.lineWidth=lineWidth;   //线宽
+        this.Canvas.strokeStyle = lineItem.Color;
+        this.Canvas.beginPath();
+
+        if (this.IsHScreen)
+        {
+            this.Canvas.moveTo(yText, ToFixedPoint(x));
+            this.Canvas.lineTo(yPrice,ToFixedPoint(x));
+        }
+        else
+        {
+            this.Canvas.moveTo(ToFixedPoint2(lineWidth,x),yText);
+            this.Canvas.lineTo(ToFixedPoint2(lineWidth,x),yPrice);
         }
+        
+        this.Canvas.stroke();
+        this.Canvas.setLineDash([]);
+    }
+
+    this.DrawSelectedItem=function()
+    {
+        if (!this.SelectedItemCache || !this.SelectedItemCache.Item) return;
+
+        var selecteItem=this.SelectedItemCache;
+        var item=selecteItem.Item;
+        var kItem=selecteItem.KItem;
+        var top=selecteItem.Top;
+        var bottom=selecteItem.Bottom;
+        var rtSVG=selecteItem.RectSVG;
+        var svgItem=item.SVG;
+        var config=selecteItem.SVGConfig;
+
+        var x=config.X, y=config.Y;
+        this.Canvas.font=config.Font;
+        this.Canvas.textBaseline=config.TextBaseline;
+        this.Canvas.textAlign='center';
+        this.Canvas.fillStyle = svgItem.Color;
+        this.Canvas.fillText(svgItem.Symbol, config.X, config.Y);
+        
+        if (item.Text && item.Text.Content && this.TextFont)
+        {
+            var textItem=item.Text;
+            this.Canvas.font=this.TextFont;
+            this.Canvas.fillStyle=textItem.Color;
+            var yText=y;
+            if (IFrameSplitOperator.IsNumber(textItem.YOffset)) yText+=textItem.YOffset;
+            this.Canvas.fillText(textItem.Content, x, yText);
+        }
+
+        if (item.Line)  this.DrawVerticalLine(item, kItem, x, rtSVG, top, bottom);
+
+        if (selecteItem.Detail) this.DrawDetailText(selecteItem.Item.Detail, selecteItem.Detail.AryText, selecteItem.Detail.Rect);
     }
 
     this.GetMaxMin=function()
@@ -44570,8 +44777,9 @@ function ChartDrawSVG()
     this.GetTooltipData=function(x,y,tooltip)
     {
         if (!this.IsShow) return false;
+        if (!IFrameSplitOperator.IsNonEmptyArray(this.TooltipRect)) return;
 
-        for(var i=0;i<this.TooltipRect.length;++i)
+        for(var i=this.TooltipRect.length-1; i>=0; --i)
         {
             var item=this.TooltipRect[i];
             if (!item.Rect) continue;
@@ -44591,6 +44799,38 @@ function ChartDrawSVG()
 
         return false;
     }
+
+    this.ClickCell=function(x,y,e)
+    {
+        if (!this.IsShow) return null;
+        if (!this.EnableClick) return null;
+
+        for(var i=this.TooltipRect.length-1; i>=0; --i)
+        {
+            var item=this.TooltipRect[i];
+            if (!item.Rect) continue;
+
+            var rect=item.Rect;
+            if (x>=rect.Left && x<=rect.Right && y>=rect.Top && y<=rect.Bottom)
+            {
+                var svgItem=item.Item;
+                var id=svgItem.ID;
+                var result={ Data:svgItem, Redraw:false, ChartPaint:this };
+                var oldSelectedID=null;
+                var out={ };
+                if (this.GetCacheData(IChartPainting.CACHE_KEY.SELECTED, out)) oldSelectedID=out.Data.ID;
+                if (id!=oldSelectedID) 
+                {
+                    this.SaveCacheData(IChartPainting.CACHE_KEY.SELECTED, { ID:id } );
+                    result.Redraw=true;
+                }
+
+                return result;
+            }
+        }
+
+        return null;
+    }
 }
 
 // OX图 支持横屏
@@ -81260,6 +81500,7 @@ function KLineChartContainer(uielement,OffscreenElement, cacheElement)
         frame.Canvas=this.Canvas;
         frame.MainFrame=subFrame.Frame;
         frame.ChartBorder=subFrame.Frame.ChartBorder;
+        frame.GlobalOption=this.GlobalOption;
         frame.GetEventCallback=(id)=> { return this.GetEventCallback(id); };
         if (obj.ShowRightText===true) frame.IsShow=true;
         else if (obj.ShowRightText===false) frame.IsShow=false;