hqchart 1.1.13100 → 1.1.13107

package/src/jscommon/umychart.vue/umychart.vue.js

@@ -8334,6 +8334,8 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
             drag.LastMove.Y=touches[0].clientY;
 
             this.MouseDrag=drag;
+            var drawPictureActive=this.GetActiveDrawPicture();  //上一次选中的
+            var selectedChart={ Chart:this.SelectedChart.Selected.Chart, Identify:this.SelectedChart.Selected.Identify };   //上一次选中的图形
             this.PhoneTouchInfo={ Start:{X:touches[0].clientX, Y:touches[0].clientY }, End:{ X:touches[0].clientX, Y:touches[0].clientY } };
             if (this.SelectChartDrawPicture) this.SelectChartDrawPicture.IsSelected=false;
             this.SelectChartDrawPicture=null;
@@ -8347,7 +8349,11 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
                 {
                     this.SetChartDrawPictureFirstPoint(drag.Click.X,drag.Click.Y,true);
                     //只有1个点 直接完成
-                    if (this.FinishChartDrawPicturePoint()) this.DrawDynamicInfo({Corss:false, Tooltip:false});
+                    if (this.FinishChartDrawPicturePoint()) 
+                    {
+                        if (drawPicture.IsDrawMain) this.Draw();
+                        else this.DrawDynamicInfo( {Corss:false, Tooltip:false} );
+                    }
                 }
 
                 if (e.cancelable) e.preventDefault();
@@ -8373,6 +8379,12 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
                         event.Callback(event,sendData,this);
                     }
 
+                    var drawType=0;
+                    if (drawPictrueData.ChartDrawPicture.IsDrawMain) drawType=1;
+                    else if (drawPictureActive.Select.Guid && drawPictureActive.Select.Chart && drawPictureActive.Select.Chart.IsDrawMain)  drawType=1;
+
+                    if (drawType==1) this.Draw();
+
                     if (e.cancelable) e.preventDefault();
                     return;
                 }
@@ -8429,6 +8441,14 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
             }
             
             this.TouchEvent({ EventID:JSCHART_EVENT_ID.ON_PHONE_TOUCH, FunctionName:"OnTouchStart"}, e);
+
+            var drawType=0;
+            if (drawPictureActive.Select.Guid!=null)
+            {
+                if (drawPictureActive.Select.Guid && drawPictureActive.Select.Chart)  drawType=1;
+            }
+
+            if (drawType==1) this.Draw();
         }
         else if (this.IsPhonePinching(e))
         {
@@ -55272,6 +55292,7 @@ function DynamicChartTitlePainting()
     this.BGBorderColor=g_JSChartResource.IndexTitleBorderColor;
     this.BGBorderMoveOnColor=g_JSChartResource.IndexTitleBorderMoveOnColor;
     this.BorderRoundRadius=2;   //圆角矩形角度
+    this.NameButtonStyle=g_JSChartResource.IndexTitleBorderStyle,
 
     this.OnDrawEvent;
     this.ParamSpace=2;              //参数显示的间距
@@ -56567,7 +56588,6 @@ function DynamicChartTitlePainting()
         var roundRadius=this.BorderRoundRadius*pixelRatio;
         var bgWidth=textWidth+4*pixelRatio+roundRadius*2;
        
-
         rtButton.Top=rtButton.YCenter-bgHeight/2-1,
         rtButton.Width=bgWidth;
         rtButton.Height=bgHeight;
@@ -56585,19 +56605,33 @@ function DynamicChartTitlePainting()
             }
         }
 
-        this.Canvas.beginPath();
-        this.Canvas.roundRect( ToFixedPoint(rtButton.Left), ToFixedPoint(rtButton.Top), ToFixedRect(rtButton.Width), ToFixedRect(rtButton.Height), [roundRadius]);
-        this.Canvas.closePath();
+        if (this.NameButtonStyle==1)
+        {
+            this.Canvas.beginPath();
+            this.Canvas.roundRect(ToFixedPoint(rtButton.Left), ToFixedPoint(rtButton.Top), ToFixedRect(rtButton.Width), ToFixedRect(rtButton.Height), [roundRadius]);
+            this.Canvas.closePath();
 
-        this.Canvas.fillStyle=this.BGColor;
-        this.Canvas.fill();
+            this.Canvas.fillStyle=this.BGColor;
+            this.Canvas.fill();
 
-        if (borderColor)
+            if (borderColor)
+            {
+                this.Canvas.strokeStyle=borderColor;
+                this.Canvas.stroke();
+            }
+        }
+        else
         {
-            this.Canvas.strokeStyle=borderColor;
-            this.Canvas.stroke();
+            this.Canvas.fillStyle=this.BGColor;
+            this.Canvas.fillRect(rtButton.Left, rtButton.Top, rtButton.Width, rtButton.Height);
+    
+            if (borderColor)
+            {
+                this.Canvas.strokeStyle=borderColor;
+                this.Canvas.strokeRect(ToFixedPoint(rtButton.Left), ToFixedPoint(rtButton.Top), ToFixedRect(rtButton.Width), ToFixedRect(rtButton.Height), [roundRadius]);
+            }
         }
-       
+        
         this.Canvas.fillStyle=this.TitleColor;
         this.Canvas.fillText(title,rtButton.Left+roundRadius+2*pixelRatio,rtButton.YCenter,textWidth);
     }
@@ -58919,6 +58953,15 @@ function ChartDrawHLine()
 
     this.AryButton=[];
     this.ExtendData;    //扩展数据
+    this.ShowPriceTextConfig=
+    { 
+        IsShow:[false, false, true], //[0]=left内 [1]=right内 [2]=right外
+        Font:
+        [
+            `${12*GetDevicePixelRatio()}px 微软雅黑`,
+            `${12*GetDevicePixelRatio()}px 微软雅黑`,
+        ],
+    };  
 
     //内部变量
     this.ColseButtonSize=0;
@@ -58950,6 +58993,15 @@ function ChartDrawHLine()
                 if (item.SettingIcon) this.Button.SettingIcon=CloneData(item.SettingIcon);
             }
             if (option.ExtendData) this.ExtendData=option.ExtendData;
+
+            if (IFrameSplitOperator.IsNonEmptyArray(option.IsShowPriceText))
+            {
+                for(var i=0;i<option.IsShowPriceText.length && i<3;++i)
+                {
+                    var value=option.IsShowPriceText[i]
+                    if (IFrameSplitOperator.IsBool(value)) this.ShowPriceTextConfig.IsShow[i]=value;
+                }
+            }
         }
     }
 
@@ -59038,6 +59090,7 @@ function ChartDrawHLine()
         this.Canvas.stroke();
         this.RestoreLineWidth();
 
+        //画水平线段
         var line={Start:new Point(), End:new Point()};
         if (isHScreen)
         {
@@ -59055,6 +59108,18 @@ function ChartDrawHLine()
         }
         this.LinePoint.push(line);
 
+        var yValue=this.Frame.GetYData(drawPoint[0].Y);
+        var strPrice=yValue.toFixed(this.Precision);
+        if (this.ShowPriceTextConfig.IsShow[0])
+        {
+            this.DrawPriceText(strPrice, line.Start, line.End, 0);
+        }
+
+        if (this.ShowPriceTextConfig.IsShow[1])
+        {
+            this.DrawPriceText(strPrice, line.Start, line.End, 1);
+        }
+
         var labInfo;
         if (this.GetLabelCallback) labInfo=this.GetLabelCallback(this);
 
@@ -59069,14 +59134,17 @@ function ChartDrawHLine()
 
         this.Canvas.restore();
 
-        var rtDraw={ };
        
-        //显示价格
-        this.CalculateButtonSize();
-        this.DrawValueText(drawPoint[0].Y, rtDraw, labInfo); 
-        if (labInfo) 
-            this.DrawRightLab(labInfo, rtDraw);
+        //外部右侧显示价格
+        if (this.ShowPriceTextConfig.IsShow[2])
+        {
+            var rtDraw={ };
+            this.CalculateButtonSize();
+            this.DrawValueText(drawPoint[0].Y, rtDraw, labInfo); 
+            if (labInfo) this.DrawRightLab(labInfo, rtDraw);
+        }
         
+
         //鼠标是否在按钮上
         if (moveonPoint && mouseStatus)
         {
@@ -59256,6 +59324,39 @@ function ChartDrawHLine()
         this.DrawButton(rtBG.Top, rtBG.Right, lineHeight, rtDraw);
     }
 
+    this.DrawPriceText=function(text, ptStart, ptEnd, position)
+    {
+        if (position!=1 && position!=0) return;
+
+        var font=this.ShowPriceTextConfig.Font[position];
+        this.Canvas.fillStyle=this.LineColor;
+        this.Canvas.font=font;
+        var textWidth=this.Canvas.measureText(text).width;
+        var lineHeight=this.GetFontHeight();
+
+        var rtBG=null;
+        if (position==1)
+        {
+            var rtBG={ Left:ptStart.X, Top:ptStart.Y-lineHeight/2, Width:textWidth+4, Height:lineHeight };
+            rtBG.Right=rtBG.Left+rtBG.Width;
+            rtBG.Bottom=rtBG.Top+rtBG.Height;
+        }
+        else if (position==0)
+        {
+            var rtBG={ Right:ptEnd.X, Top:ptEnd.Y-lineHeight/2, Width:textWidth+4, Height:lineHeight };
+            rtBG.Left=rtBG.Right-rtBG.Width;
+            rtBG.Bottom=rtBG.Top+rtBG.Height;
+        }
+
+        this.Canvas.fillRect(ToFixedRect(rtBG.Left),ToFixedRect(rtBG.Top), ToFixedRect(rtBG.Width+this.ButtonBGWidth),ToFixedRect(rtBG.Height));
+
+        this.Canvas.fillStyle=this.ValueTextColor
+        this.Canvas.textAlign="left";
+        this.Canvas.textBaseline="middle";
+        this.Canvas.fillText(text,rtBG.Left+2,ptStart.Y);
+        
+    }
+
     this.CalculateButtonSize=function()
     {
         var pixelRatio=GetDevicePixelRatio();
@@ -59309,7 +59410,7 @@ function ChartDrawHLine()
 
         left+=1;
         var pixelRatio=GetDevicePixelRatio();
-        if (this.Button.SettingIcon)
+        if (this.Button.SettingIcon && this.Button.SettingIcon.Text)
         {
             var rtButton={Left:left, Top:drawTop, Width:this.SettingButtonSize, Height:drawHeight };
             rtButton.Right=rtButton.Left+rtButton.Width;
@@ -59342,7 +59443,7 @@ function ChartDrawHLine()
             left=rtButton.Right+this.ButtonSpace;
         }
 
-        if (this.Button.CloseIcon)
+        if (this.Button.CloseIcon && this.Button.CloseIcon.Text)
         {
             var rtButton={Left:left, Top:drawTop, Width:this.ColseButtonSize, Height:drawHeight };
             rtButton.Right=rtButton.Left+rtButton.Width;
@@ -66946,7 +67047,8 @@ function JSChartResource()
     this.TitleFont=13*GetDevicePixelRatio() +'px 微软雅黑';          //指标显示,tooltip显示字体
     this.IndexTitleBGColor='rgb(250,250,250)';                      //指标名字背景色
     this.IndexTitleBorderColor='rgb(180,180,180)';                  //指标名字边框颜色
-    this.IndexTitleBorderMoveOnColor='rgb(0,0,0)';            //指标名字边框颜色(鼠标在上面)
+    this.IndexTitleBorderMoveOnColor='rgb(0,0,0)';                   //指标名字边框颜色(鼠标在上面)
+    this.IndexTitleBorderStyle=1,                                   //0=直角边框 1=圆角边框
     this.IndexTitleColor="rgb(43,54,69)";                           //指标名字颜色
     this.IndexTitleSelectedColor="rgb(65,105,225)";
     this.OverlayIndexTitleBGColor='rgba(255,255,255,0.7)';
@@ -67920,6 +68022,16 @@ function JSChartResource()
 
             MoveRowColor:'rgb(240,128,128)',
             SrcRowColor:'rgb(180,240,240)',
+        },
+
+        VScrollbar:
+        {
+            ScrollBarHeight:60,
+            ButtonColor:"rgba(252,252,252,0.8)",
+            BarColor:"rgba(168,168,168,0.9)",
+            BorderColor:'rgba(180,180,180,0.9)',
+            BGColor:"rgba(234,239,248,0.9)",
+            BarWidth:{ Size:12 }
         }
     },
 
@@ -68110,6 +68222,7 @@ function JSChartResource()
         if (style.IndexTitleBGColor) this.IndexTitleBGColor=style.IndexTitleBGColor;
         if (style.IndexTitleBorderColor) this.IndexTitleBorderColor=style.IndexTitleBorderColor;
         if (style.IndexTitleBorderMoveOnColor) this.IndexTitleBorderMoveOnColor=style.IndexTitleBorderMoveOnColor;
+        if (IFrameSplitOperator.IsNumber(style.IndexTitleBorderStyle)) this.IndexTitleBorderStyle=style.IndexTitleBorderStyle;
         if (style.IndexTitleColor) this.IndexTitleColor=style.IndexTitleColor;
         if (style.IndexTitleSelectedColor) this.IndexTitleSelectedColor=style.IndexTitleSelectedColor;
         if (style.OverlayIndexTitleBGColor) this.OverlayIndexTitleBGColor=style.OverlayIndexTitleBGColor;
@@ -68557,205 +68670,8 @@ function JSChartResource()
             }
         }
 
-        if (style.Report)
-        {
-            var item=style.Report;
-            if (item.BorderColor) this.Report.BorderColor=item.BorderColor;
-            if (item.UpTextColor) this.Report.UpTextColor=item.UpTextColor;
-            if (item.DownTextColor) this.Report.DownTextColor=item.DownTextColor;
-            if (item.UnchagneTextColor) this.Report.UnchagneTextColor=item.UnchagneTextColor;
-            if (item.BorderColor) this.Report.SelectedColor=item.SelectedColor;
-           
-
-            if (item.CloseLine)
-            {
-                var closeLine=item.CloseLine;
-                if (closeLine.CloseColor) this.Report.CloseLine.CloseColor=closeLine.CloseColor;
-                if (closeLine.YCloseColor) this.Report.CloseLine.YCloseColor=closeLine.YCloseColor;
-                if (closeLine.AreaColor) this.Report.CloseLine.AreaColor=closeLine.AreaColor;
-            }
-
-            if (item.KLine)
-            {
-                var kline=item.KLine;
-                if (kline.UpColor) this.Report.KLine.UpColor=kline.UpColor;
-                if (kline.DownColor) this.Report.KLine.DownColor=kline.DownColor;
-                if (kline.UnchagneColor) this.Report.KLine.UnchagneColor=kline.UnchagneColor;
-
-                if (IFrameSplitOperator.IsNumber(kline.DataWidth)) this.Report.KLine.DataWidth=kline.DataWidth;
-                if (IFrameSplitOperator.IsNumber(kline.DistanceWidth)) this.Report.KLine.DistanceWidth=kline.DistanceWidth;
-            }
-
-            if (item.Header)
-            {
-                var header=item.Header;
-                if (header.Color) this.Report.Header.Color=header.Color;
-                if (header.SortColor) this.Report.Header.SortColor=header.SortColor;
-                if (header.Mergin)
-                {
-                    var mergin=header.Mergin;
-                    if (IFrameSplitOperator.IsNumber(mergin.Left)) this.Report.Header.Mergin.Left=mergin.Left;
-                    if (IFrameSplitOperator.IsNumber(mergin.Right)) this.Report.Header.Mergin.Left=mergin.Right;
-                    if (IFrameSplitOperator.IsNumber(mergin.Top)) this.Report.Header.Mergin.Top=mergin.Top;
-                    if (IFrameSplitOperator.IsNumber(mergin.Bottom)) this.Report.Header.Mergin.Bottom=mergin.Bottom;
-                }
-                if (header.Font)
-                {
-                    var font=header.Font;
-                    if (font.Name) this.Report.Header.Font.Name=font.Name;
-                    if (IFrameSplitOperator.IsNumber(font.Size)) this.Report.Header.Font.Size=font.Size;
-                }
-            }
-
-            if (item.Item)
-            {
-                var row=item.Item;
-                if (row.Mergin)
-                {
-                    var mergin=row.Mergin;
-                    if (IFrameSplitOperator.IsNumber(mergin.Left)) this.Report.Item.Mergin.Left=mergin.Left;
-                    if (IFrameSplitOperator.IsNumber(mergin.Right)) this.Report.Item.Mergin.Right=mergin.Right;
-                    if (IFrameSplitOperator.IsNumber(mergin.Top)) this.Report.Item.Mergin.Top=mergin.Top;
-                    if (IFrameSplitOperator.IsNumber(mergin.Bottom)) this.Report.Item.Mergin.Bottom=mergin.Bottom;
-                }
-
-                if (row.Font)
-                {
-                    var font=row.Font;
-                    if (font.Name) this.Report.Item.Font.Name=font.Name;
-                    if (IFrameSplitOperator.IsNumber(font.Size)) this.Report.Item.Font.Size=font.Size;
-                }
-
-                if (row.BarMergin)
-                {
-                    var mergin=row.BarMergin;
-                    if (IFrameSplitOperator.IsNumber(mergin.Left)) this.Report.Item.BarMergin.Left=mergin.Left;
-                    if (IFrameSplitOperator.IsNumber(mergin.Top)) this.Report.Item.BarMergin.Top=mergin.Top;
-                    if (IFrameSplitOperator.IsNumber(mergin.Right)) this.Report.Item.BarMergin.Right=mergin.Right;
-                    if (IFrameSplitOperator.IsNumber(mergin.Bottom)) this.Report.Item.BarMergin.Bottom=mergin.Bottom;
-                }
-
-                if (row.NameFont)
-                {
-                    var font=row.NameFont;
-                    if (font.Name) this.Report.Item.NameFont.Name=font.Name;
-                    if (IFrameSplitOperator.IsNumber(font.Size)) this.Report.Item.NameFont.Size=font.Size;
-                }
-
-                if (row.SymbolFont)
-                {
-                    var font=row.SymbolFont;
-                    if (font.Name) this.Report.Item.SymbolFont.Name=font.Name;
-                    if (IFrameSplitOperator.IsNumber(font.Size)) this.Report.Item.SymbolFont.Size=font.Size;
-                }
-            }
-
-            if (item.FixedItem)
-            {
-                var row=item.FixedItem;
-                if (row.Font)
-                {
-                    var font=row.Font;
-                    if (font.Name) this.Report.FixedItem.Font.Name=font.Name;
-                    if (IFrameSplitOperator.IsNumber(font.Size)) this.Report.FixedItem.Font.Size=font.Size;
-                }
-            }
-
-            if (item.LimitBorder)
-            {
-                var limit=item.LimitBorder;
-                if (limit.Color) this.Report.LimitBorder.Color=limit.Color;
-                if (limit.Mergin)
-                {
-                    var mergin=limit.Mergin;
-                    if (IFrameSplitOperator.IsNumber(mergin.Left)) this.Report.LimitBorder.Mergin.Left=mergin.Left;
-                    if (IFrameSplitOperator.IsNumber(mergin.Top)) this.Report.LimitBorder.Mergin.Top=mergin.Top;
-                    if (IFrameSplitOperator.IsNumber(mergin.Right)) this.Report.LimitBorder.Mergin.Right=mergin.Right;
-                    if (IFrameSplitOperator.IsNumber(mergin.Bottom)) this.Report.LimitBorder.Mergin.Bottom=mergin.Bottom;
-                }
-            }
-
-            if (item.LimitColor)
-            {
-                var limit=item.LimitColor;
-                if (limit.UpColor) this.Report.LimitColor.UpColor=limit.UpColor;
-                if (limit.DownColor) this.Report.LimitColor.DownColor=limit.DownColor;
-                if (limit.TextColor) this.Report.LimitColor.UpColor=limit.TextColor;
-            }
-
-            if (item.FieldColor)
-            {
-                var filed=item.FieldColor;
-                if (filed.Name) this.Report.FieldColor.Name=filed.Name;
-                if (filed.Symbol) this.Report.FieldColor.Symbol=filed.Symbol;
-                if (filed.Vol) this.Report.FieldColor.Vol=filed.Vol;
-                if (filed.Amount) this.Report.FieldColor.Amount=filed.Amount;
-                if (filed.Index) this.Report.FieldColor.Index=filed.Index;
-                if (filed.BarTitle) this.Report.FieldColor.BarTitle=filed.BarTitle;
-                if (filed.Text) this.Report.FieldColor.Text=filed.Text;
-
-                if (IFrameSplitOperator.IsNonEmptyArray(filed.Bar))
-                {
-                    for(var i=0;i<filed.Bar.length;++i)
-                        this.Report.FieldColor.Bar[i]=filed.Bar[i];
-                }
-            }
-
-            if (item.Tab)
-            {
-                var tab=item.Tab;
-                if (tab.Font)
-                {
-                    var font=tab.Font;
-                    if (font.Name) this.Report.Tab.Font.Name=font.Name;
-                    if (IFrameSplitOperator.IsNumber(font.Size)) this.Report.Tab.Font.Size=font.Size;
-                }
-
-                if (IFrameSplitOperator.IsNumber(tab.ScrollBarWidth)) this.Report.Tab.ScrollBarWidth=tab.ScrollBarWidth;
-                if (tab.ButtonColor) this.Report.Tab.ButtonColor=tab.ButtonColor;
-                if (tab.BarColor) this.Report.Tab.BarColor=tab.BarColor;
-                if (tab.BorderColor) this.Report.Tab.BorderColor=tab.BorderColor;
-
-                if (tab.TabTitleColor) this.Report.Tab.TabTitleColor=tab.TabTitleColor;
-                if (tab.TabSelectedTitleColor) this.Report.Tab.TabSelectedTitleColor=tab.TabSelectedTitleColor;
-                if (tab.TabSelectedBGColor) this.Report.Tab.TabSelectedBGColor=tab.TabSelectedBGColor;
-                if (tab.TabMoveOnTitleColor) this.Report.Tab.TabMoveOnTitleColor=tab.TabMoveOnTitleColor;
-                if (tab.TabBGColor) this.Report.Tab.TabBGColor=tab.TabBGColor;
-            }
-
-            if (item.PageInfo)
-            {
-                var pageinfo=item.PageInfo;
-                if (pageinfo.Font)
-                {
-                    var font=pageinfo.Font;
-                    if (font.Name) this.Report.PageInfo.Font.Name=font.Name;
-                    if (IFrameSplitOperator.IsNumber(font.Size)) this.Report.PageInfo.Font.Size=font.Size;
-                }
-
-                if (pageinfo.TextColor) this.Report.PageInfo.TextColor=pageinfo.TextColor;
-                if (pageinfo.BGColor) this.Report.PageInfo.BGColor=pageinfo.BGColor;
-
-                if (pageinfo.Mergin)
-                {
-                    var mergin=pageinfo.Mergin;
-                    if (IFrameSplitOperator.IsNumber(mergin.Left)) this.Report.PageInfo.Mergin.Left=mergin.Left;
-                    if (IFrameSplitOperator.IsNumber(mergin.Top)) this.Report.PageInfo.Mergin.Top=mergin.Top;
-                    if (IFrameSplitOperator.IsNumber(mergin.Right)) this.Report.PageInfo.Mergin.Right=mergin.Right;
-                    if (IFrameSplitOperator.IsNumber(mergin.Bottom)) this.Report.PageInfo.Mergin.Bottom=mergin.Bottom;
-                }
-            }
-
-            if (item.DragRow)
-            {
-                var dragRow=item.DragRow;
-                if (dragRow.Color) this.Report.DragRow.Color=dragRow.Color;
-                if (dragRow.TextColor) this.Report.DragRow.TextColor=dragRow.TextColor;
-                if (dragRow.MoveRowColor) this.Report.DragRow.MoveRowColor=dragRow.MoveRowColor;
-                if (dragRow.SrcRowColor) this.Report.DragRow.SrcRowColor=dragRow.SrcRowColor;
-            }
-        }
-
+        if (style.Report) this.SetReportStyle(style.Report);
+       
         if (style.TReport) this.SetTReportStyle(style.TReport);
 
         if (style.SelectedChart)
@@ -68858,6 +68774,218 @@ function JSChartResource()
         }
     }
 
+    this.SetReportStyle=function(style)
+    {
+        var item=style;
+        var dest=this.Report;
+
+        if (item.BorderColor) this.Report.BorderColor=item.BorderColor;
+        if (item.UpTextColor) this.Report.UpTextColor=item.UpTextColor;
+        if (item.DownTextColor) this.Report.DownTextColor=item.DownTextColor;
+        if (item.UnchagneTextColor) this.Report.UnchagneTextColor=item.UnchagneTextColor;
+        if (item.BorderColor) this.Report.SelectedColor=item.SelectedColor;
+           
+
+        if (item.CloseLine)
+        {
+            var closeLine=item.CloseLine;
+            if (closeLine.CloseColor) this.Report.CloseLine.CloseColor=closeLine.CloseColor;
+            if (closeLine.YCloseColor) this.Report.CloseLine.YCloseColor=closeLine.YCloseColor;
+            if (closeLine.AreaColor) this.Report.CloseLine.AreaColor=closeLine.AreaColor;
+        }
+
+        if (item.KLine)
+        {
+            var kline=item.KLine;
+            if (kline.UpColor) this.Report.KLine.UpColor=kline.UpColor;
+            if (kline.DownColor) this.Report.KLine.DownColor=kline.DownColor;
+            if (kline.UnchagneColor) this.Report.KLine.UnchagneColor=kline.UnchagneColor;
+
+            if (IFrameSplitOperator.IsNumber(kline.DataWidth)) this.Report.KLine.DataWidth=kline.DataWidth;
+            if (IFrameSplitOperator.IsNumber(kline.DistanceWidth)) this.Report.KLine.DistanceWidth=kline.DistanceWidth;
+        }
+
+        if (item.Header)
+        {
+            var header=item.Header;
+            if (header.Color) this.Report.Header.Color=header.Color;
+            if (header.SortColor) this.Report.Header.SortColor=header.SortColor;
+            if (header.Mergin)
+            {
+                var mergin=header.Mergin;
+                if (IFrameSplitOperator.IsNumber(mergin.Left)) this.Report.Header.Mergin.Left=mergin.Left;
+                if (IFrameSplitOperator.IsNumber(mergin.Right)) this.Report.Header.Mergin.Left=mergin.Right;
+                if (IFrameSplitOperator.IsNumber(mergin.Top)) this.Report.Header.Mergin.Top=mergin.Top;
+                if (IFrameSplitOperator.IsNumber(mergin.Bottom)) this.Report.Header.Mergin.Bottom=mergin.Bottom;
+            }
+            if (header.Font)
+            {
+                var font=header.Font;
+                if (font.Name) this.Report.Header.Font.Name=font.Name;
+                if (IFrameSplitOperator.IsNumber(font.Size)) this.Report.Header.Font.Size=font.Size;
+            }
+        }
+
+        if (item.Item)
+        {
+            var row=item.Item;
+            if (row.Mergin)
+            {
+                var mergin=row.Mergin;
+                if (IFrameSplitOperator.IsNumber(mergin.Left)) this.Report.Item.Mergin.Left=mergin.Left;
+                if (IFrameSplitOperator.IsNumber(mergin.Right)) this.Report.Item.Mergin.Right=mergin.Right;
+                if (IFrameSplitOperator.IsNumber(mergin.Top)) this.Report.Item.Mergin.Top=mergin.Top;
+                if (IFrameSplitOperator.IsNumber(mergin.Bottom)) this.Report.Item.Mergin.Bottom=mergin.Bottom;
+            }
+
+            if (row.Font)
+            {
+                var font=row.Font;
+                if (font.Name) this.Report.Item.Font.Name=font.Name;
+                if (IFrameSplitOperator.IsNumber(font.Size)) this.Report.Item.Font.Size=font.Size;
+            }
+
+            if (row.BarMergin)
+            {
+                var mergin=row.BarMergin;
+                if (IFrameSplitOperator.IsNumber(mergin.Left)) this.Report.Item.BarMergin.Left=mergin.Left;
+                if (IFrameSplitOperator.IsNumber(mergin.Top)) this.Report.Item.BarMergin.Top=mergin.Top;
+                if (IFrameSplitOperator.IsNumber(mergin.Right)) this.Report.Item.BarMergin.Right=mergin.Right;
+                if (IFrameSplitOperator.IsNumber(mergin.Bottom)) this.Report.Item.BarMergin.Bottom=mergin.Bottom;
+            }
+
+            if (row.NameFont)
+            {
+                var font=row.NameFont;
+                if (font.Name) this.Report.Item.NameFont.Name=font.Name;
+                if (IFrameSplitOperator.IsNumber(font.Size)) this.Report.Item.NameFont.Size=font.Size;
+            }
+
+            if (row.SymbolFont)
+            {
+                var font=row.SymbolFont;
+                if (font.Name) this.Report.Item.SymbolFont.Name=font.Name;
+                if (IFrameSplitOperator.IsNumber(font.Size)) this.Report.Item.SymbolFont.Size=font.Size;
+            }
+        }
+
+        if (item.FixedItem)
+        {
+            var row=item.FixedItem;
+            if (row.Font)
+            {
+                var font=row.Font;
+                if (font.Name) this.Report.FixedItem.Font.Name=font.Name;
+                if (IFrameSplitOperator.IsNumber(font.Size)) this.Report.FixedItem.Font.Size=font.Size;
+            }
+        }
+
+        if (item.LimitBorder)
+        {
+            var limit=item.LimitBorder;
+            if (limit.Color) this.Report.LimitBorder.Color=limit.Color;
+            if (limit.Mergin)
+            {
+                var mergin=limit.Mergin;
+                if (IFrameSplitOperator.IsNumber(mergin.Left)) this.Report.LimitBorder.Mergin.Left=mergin.Left;
+                if (IFrameSplitOperator.IsNumber(mergin.Top)) this.Report.LimitBorder.Mergin.Top=mergin.Top;
+                if (IFrameSplitOperator.IsNumber(mergin.Right)) this.Report.LimitBorder.Mergin.Right=mergin.Right;
+                if (IFrameSplitOperator.IsNumber(mergin.Bottom)) this.Report.LimitBorder.Mergin.Bottom=mergin.Bottom;
+            }
+        }
+
+        if (item.LimitColor)
+        {
+            var limit=item.LimitColor;
+            if (limit.UpColor) this.Report.LimitColor.UpColor=limit.UpColor;
+            if (limit.DownColor) this.Report.LimitColor.DownColor=limit.DownColor;
+            if (limit.TextColor) this.Report.LimitColor.UpColor=limit.TextColor;
+        }
+
+        if (item.FieldColor)
+        {
+            var filed=item.FieldColor;
+            if (filed.Name) this.Report.FieldColor.Name=filed.Name;
+            if (filed.Symbol) this.Report.FieldColor.Symbol=filed.Symbol;
+            if (filed.Vol) this.Report.FieldColor.Vol=filed.Vol;
+            if (filed.Amount) this.Report.FieldColor.Amount=filed.Amount;
+            if (filed.Index) this.Report.FieldColor.Index=filed.Index;
+            if (filed.BarTitle) this.Report.FieldColor.BarTitle=filed.BarTitle;
+            if (filed.Text) this.Report.FieldColor.Text=filed.Text;
+
+            if (IFrameSplitOperator.IsNonEmptyArray(filed.Bar))
+            {
+                for(var i=0;i<filed.Bar.length;++i)
+                    this.Report.FieldColor.Bar[i]=filed.Bar[i];
+            }
+        }
+
+        if (item.Tab)
+        {
+            var tab=item.Tab;
+            if (tab.Font)
+            {
+                var font=tab.Font;
+                if (font.Name) this.Report.Tab.Font.Name=font.Name;
+                if (IFrameSplitOperator.IsNumber(font.Size)) this.Report.Tab.Font.Size=font.Size;
+            }
+
+            if (IFrameSplitOperator.IsNumber(tab.ScrollBarWidth)) this.Report.Tab.ScrollBarWidth=tab.ScrollBarWidth;
+            if (tab.ButtonColor) this.Report.Tab.ButtonColor=tab.ButtonColor;
+            if (tab.BarColor) this.Report.Tab.BarColor=tab.BarColor;
+            if (tab.BorderColor) this.Report.Tab.BorderColor=tab.BorderColor;
+
+            if (tab.TabTitleColor) this.Report.Tab.TabTitleColor=tab.TabTitleColor;
+            if (tab.TabSelectedTitleColor) this.Report.Tab.TabSelectedTitleColor=tab.TabSelectedTitleColor;
+            if (tab.TabSelectedBGColor) this.Report.Tab.TabSelectedBGColor=tab.TabSelectedBGColor;
+            if (tab.TabMoveOnTitleColor) this.Report.Tab.TabMoveOnTitleColor=tab.TabMoveOnTitleColor;
+            if (tab.TabBGColor) this.Report.Tab.TabBGColor=tab.TabBGColor;
+        }
+
+        if (item.PageInfo)
+        {
+            var pageinfo=item.PageInfo;
+            if (pageinfo.Font)
+            {
+                var font=pageinfo.Font;
+                if (font.Name) this.Report.PageInfo.Font.Name=font.Name;
+                if (IFrameSplitOperator.IsNumber(font.Size)) this.Report.PageInfo.Font.Size=font.Size;
+            }
+
+            if (pageinfo.TextColor) this.Report.PageInfo.TextColor=pageinfo.TextColor;
+            if (pageinfo.BGColor) this.Report.PageInfo.BGColor=pageinfo.BGColor;
+
+            if (pageinfo.Mergin)
+            {
+                var mergin=pageinfo.Mergin;
+                if (IFrameSplitOperator.IsNumber(mergin.Left)) this.Report.PageInfo.Mergin.Left=mergin.Left;
+                if (IFrameSplitOperator.IsNumber(mergin.Top)) this.Report.PageInfo.Mergin.Top=mergin.Top;
+                if (IFrameSplitOperator.IsNumber(mergin.Right)) this.Report.PageInfo.Mergin.Right=mergin.Right;
+                if (IFrameSplitOperator.IsNumber(mergin.Bottom)) this.Report.PageInfo.Mergin.Bottom=mergin.Bottom;
+            }
+        }
+
+        if (item.DragRow)
+        {
+            var dragRow=item.DragRow;
+            if (dragRow.Color) this.Report.DragRow.Color=dragRow.Color;
+            if (dragRow.TextColor) this.Report.DragRow.TextColor=dragRow.TextColor;
+            if (dragRow.MoveRowColor) this.Report.DragRow.MoveRowColor=dragRow.MoveRowColor;
+            if (dragRow.SrcRowColor) this.Report.DragRow.SrcRowColor=dragRow.SrcRowColor;
+        }
+
+        if (item.VScrollbar)
+        {
+            var subItem=item.VScrollbar;
+            if (IFrameSplitOperator.IsNumber(subItem.ScrollBarHeight)) dest.VScrollbar.ScrollBarHeight=subItem.ScrollBarHeight;
+            if (subItem.ButtonColor) dest.VScrollbar.ButtonColor=subItem.ButtonColor;
+            if (subItem.BarColor) dest.VScrollbar.BarColor=subItem.BarColor;
+            if (subItem.BorderColor) dest.VScrollbar.BorderColor=subItem.BorderColor;
+            if (subItem.BGColor) dest.VScrollbar.BGColor=subItem.BGColor;
+        }
+        
+    }
+
     this.SetTReportStyle=function(style)
     {
         var item=style;
@@ -120631,6 +120759,16 @@ function GetBlackStyle()
 
                 MoveRowColor:'rgb(135,206,250)',
                 SrcRowColor:'rgb(49,48,56)',
+            },
+
+            VScrollbar:
+            {
+                BarWidth:40,
+                ScrollBarHeight:60,
+                ButtonColor:"rgba(13,12,15,0.8)",
+                BarColor:"rgba(48,48,48,0.9)",
+                BorderColor:'rgba(48,48,48,0.9)',
+                BGColor:"rgba(211,211,211,0.5)",
             }
         },
 
@@ -122276,6 +122414,7 @@ function JSReportChart(divElement)
         if (IFrameSplitOperator.IsBool(option.EnableDragRow)) chart.EnableDragRow=option.EnableDragRow;
         if (IFrameSplitOperator.IsNumber(option.DragRowType)) chart.DragRowType=option.DragRowType;
         if (IFrameSplitOperator.IsBool(option.EnableDragHeader)) chart.EnableDragHeader=option.EnableDragHeader;
+        if (option.VScrollbar) chart.SetVScrollbar(option.VScrollbar);
         if (option.SortInfo)
         {
             var item=option.SortInfo;
@@ -122472,7 +122611,7 @@ function JSReportChartContainer(uielement)
 
     this.FlashBG=new Map();  
     this.FlashBGTimer=null;                            //闪烁背景 Value:{ LastTime:数据最后的时间, Data: { Key:ID, BGColor:, Time: , Count: 次数 } };
-    this.GlobalOption={ FlashBGCount:0 }
+    this.GlobalOption={ FlashBGCount:0 };
 
     //this.FixedRowData.Data=[ [null, {Value:11, Text:"11" }], [null, null, null, {Value:12, Text:"ddddd", Color:"rgb(45,200,4)"}]];
 
@@ -122514,6 +122653,8 @@ function JSReportChartContainer(uielement)
 
     //拖拽滚动条
     this.DragXScroll=null;  //{Start:{x,y}, End:{x, y}}
+    this.DragYScroll=null;
+    this.IsShowVScrollbar=false;
 
     this.IsDestroy=false;        //是否已经销毁了
 
@@ -122630,11 +122771,24 @@ function JSReportChartContainer(uielement)
         chart.GlobalOption=this.GlobalOption;
         chart.FixedRowData=this.FixedRowData;
         chart.SortInfo=this.SortInfo;
+
         chart.Tab=new ChartReportTab();
         chart.Tab.Frame=this.Frame;
         chart.Tab.Canvas=this.Canvas;
         chart.Tab.ChartBorder=this.Frame.ChartBorder;
         chart.Tab.Report=chart;
+
+        chart.VScrollbar=new ChartVScrollbar();
+        chart.VScrollbar.Frame=this.Frame;
+        chart.VScrollbar.Canvas=this.Canvas;
+        chart.VScrollbar.ChartBorder=this.Frame.ChartBorder;
+        chart.VScrollbar.Report=chart;
+        chart.VScrollbar.IsShowCallback=()=>
+        { 
+            if (this.DragYScroll) return true;
+            return this.IsShowVScrollbar;
+        }
+
         this.ChartPaint[0]=chart;
 
         //页脚
@@ -123536,6 +123690,7 @@ function JSReportChartContainer(uielement)
     this.UIOnMouseDown=function(e)
     {
         this.DragXScroll=null;
+        this.DragYScroll=null;
         this.DragHeader=null;
         this.DragColumnWidth=null;
         this.DragMove={ Click:{ X:e.clientX, Y:e.clientY }, Move:{X:e.clientX, Y:e.clientY}, PreMove:{X:e.clientX, Y:e.clientY } };
@@ -123612,6 +123767,38 @@ function JSReportChartContainer(uielement)
                         this.OnClickTab(tabData, e);
                     }
                 }
+                else if (clickData.Type==5 && e.button==0)  //右侧滚动条
+                {
+                    var scroll=clickData.VScrollbar;
+                    if (scroll.Type==1) //顶部按钮
+                    {
+                        if (this.MoveYOffset(-1)) 
+                        {
+                            this.Draw();
+                            this.DelayUpdateStockData();
+                        }
+                    }
+                    else if (scroll.Type==2)   //底部按钮
+                    {
+                        if (this.MoveYOffset(1)) 
+                        {
+                            this.Draw();
+                            this.DelayUpdateStockData();
+                        }
+                    }
+                    else if (scroll.Type==3)    //滚动条
+                    {
+                        this.DragYScroll={ Click:{X:x, Y:y}, LastMove:{X:x, Y:y} };
+                    }
+                    else if (scroll.Type==4)    //滚动条内部
+                    {
+                        if (this.SetYOffset(scroll.Pos)) 
+                        {
+                            this.Draw();
+                            this.DelayUpdateStockData();
+                        }
+                    }
+                }
             }
         }
 
@@ -123658,6 +123845,7 @@ function JSReportChartContainer(uielement)
         var mouseStatus={ Cursor:"default", Name:"Default"};;   //鼠标状态
         var report=this.GetReportChart();
         var cell=null;
+        var bDraw=false;
         if (report)
         {
             var dragHeaderWidth=report.PtInHeaderDragBorder(x,y);
@@ -123670,6 +123858,18 @@ function JSReportChartContainer(uielement)
             {
                 cell=report.PtInCell(x,y);  //是否在单元格(EnableTooltip)
             }
+
+            var scrollbar=report.VScrollbar;
+            if (scrollbar.Enable)
+            {
+                var bShowScrollbar=report.PtInClient(x,y);
+                this.IsShowVScrollbar=bShowScrollbar;
+                if (!this.DragYScroll)
+                {
+                    if (bShowScrollbar && !scrollbar.LastStatus.Draw) bDraw=true;
+                    else if (!bShowScrollbar && scrollbar.LastStatus.Draw) bDraw=true;
+                }
+            }
         }
 
         var event=this.GetEventCallback(JSCHART_EVENT_ID.ON_REPORT_MOUSE_MOVE);
@@ -123680,16 +123880,32 @@ function JSReportChartContainer(uielement)
         }
 
         if (mouseStatus) this.UIElement.style.cursor=mouseStatus.Cursor;
+
+        if (bDraw) this.Draw();
     }
 
     this.UIOnMounseOut=function(e)
     {
+        var bDraw=false;
         var tabChart=this.GetTabChart();
         if (tabChart && tabChart.MoveOnTabIndex>=0)
         {
             tabChart.MoveOnTabIndex=-1;
+            bDraw=true;
             this.Draw();
         }
+
+        var scrollbar=this.GetVScrollbarChart();
+        if (scrollbar.Enable)
+        {
+            this.IsShowVScrollbar=false;
+            if (!this.DragYScroll)
+            {
+                if (scrollbar.LastStatus.Draw) bDraw=true;
+            }
+        }
+
+        if (bDraw) this.Draw();
     }
 
     this.UIOnMouseleave=function(e)
@@ -123781,6 +123997,21 @@ function JSReportChartContainer(uielement)
             var pos=chart.Tab.GetScrollPostionByPoint(x,y);
             if (this.SetXOffset(pos)) this.Draw();
         }
+        else if (this.DragYScroll)
+        {
+            var chart=this.ChartPaint[0];
+            if (!chart || !chart.VScrollbar) return;
+
+            this.DragYScroll.LastMove.X=x;
+            this.DragYScroll.LastMove.Y=y;
+
+            var pos=chart.VScrollbar.GetScrollPostionByPoint(x,y);
+            if (this.SetYOffset(pos)) 
+            {
+                this.Draw();
+                this.DelayUpdateStockData();
+            }
+        }
         else if (this.DragHeader && this.DragHeader.ClickData)   //表头拖拽
         {
             if (this.DragHeader.ClickData.Header.IsFixed) return;
@@ -123923,6 +124154,11 @@ function JSReportChartContainer(uielement)
 
         this.DragHeader=null;
         this.DragXScroll=null;
+        if (this.DragYScroll) 
+        {
+            bRedraw=true;
+            this.DragYScroll=null;
+        }
         this.DragRow=null;
         this.DragMove=null;
         this.DragColumnWidth=null;
@@ -124231,6 +124467,14 @@ function JSReportChartContainer(uielement)
         return chart.Tab;
     }
 
+    this.GetVScrollbarChart=function()
+    {
+        var chart=this.ChartPaint[0];
+        if (!chart) return null;
+
+        return chart.VScrollbar;
+    }
+
     this.GetReportChart=function()
     {
         var chart=this.ChartPaint[0];
@@ -124522,6 +124766,21 @@ function JSReportChartContainer(uielement)
         return true;
     }
 
+    this.SetYOffset=function(pos)
+    {
+        if (!IFrameSplitOperator.IsNumber(pos)) return false;
+        var chart=this.ChartPaint[0];
+        if (!chart) return false;
+
+        var maxOffset=chart.GetYScrollRange();
+        if (pos<0) pos=0;
+        if (pos>maxOffset) pos=maxOffset;
+
+        this.Data.YOffset=pos;
+
+        return true;
+    }
+
     this.GotoLastPage=function()
     {
         var chart=this.ChartPaint[0];
@@ -124558,6 +124817,17 @@ function JSReportChartContainer(uielement)
         if (option && option.Redraw) this.Draw();
     }
 
+    this.SetVScrollbar=function(option)
+    {
+        var chart=this.GetReportChart();
+        if (!chart) return;
+
+        var scrollbar=chart.VScrollbar;
+        if (!scrollbar) return;
+
+        if (IFrameSplitOperator.IsBool(option.Enable)) scrollbar.Enable=option.Enable;
+    }
+
     this.SetSelectedTab=function(index, opiton)
     {
         var chart=this.ChartPaint[0];;
@@ -125251,6 +125521,7 @@ function ChartReport()
     this.DragRow;                       //拖拽行
 
     this.Tab;
+    this.VScrollbar;
 
     this.GlobalOption;
 
@@ -125433,6 +125704,7 @@ function ChartReport()
         }
 
         if (this.Tab) this.Tab.ReloadResource(resource);
+        if (this.VScrollbar) this.VScrollbar.ReloadResource(resource);
     }
 
     this.SetColumn=function(aryColumn)
@@ -125532,6 +125804,15 @@ function ChartReport()
         var maxOffset=this.Column.length-this.FixedColumn-3;
         if (maxOffset<0) return 0;
 
+        return maxOffset;
+    } 
+
+    this.GetYScrollRange=function()
+    {
+        if (!IFrameSplitOperator.IsNonEmptyArray(this.Data.Data)) return 0;
+
+        var maxOffset=this.Data.Data.length-this.RowCount;
+
         return maxOffset;
     }
 
@@ -125628,6 +125909,12 @@ function ChartReport()
 
         this.DrawDragRow();
 
+        if (this.VScrollbar)
+        {
+            var bottom=this.ChartBorder.GetBottom();
+            this.VScrollbar.DrawScrollbar(this.RectClient.Left,this.RectClient.Top+this.HeaderHeight, this.RectClient.Right, bottom-this.BottomToolbarHeight-4);
+        }
+
         this.SizeChange=false;
     }
 
@@ -125681,6 +125968,8 @@ function ChartReport()
             this.BottomToolbarHeight=0;
         }
 
+        if (this.VScrollbar && this.VScrollbar.Enable) this.VScrollbar.CalculateSize();
+
         this.UpdateCacheData();
 
         var pixelRatio=GetDevicePixelRatio();
@@ -127241,7 +127530,7 @@ function ChartReport()
         return GetFontHeight(this.Canvas, font, word);
     }
 
-    this.OnMouseDown=function(x,y,e)    //Type: 1=tab  4=固定行 2=行 3=表头
+    this.OnMouseDown=function(x,y,e)    //Type: 1=tab  4=固定行 2=行 3=表头 5=右侧滚动条
     {
         if (!this.Data) return null;
 
@@ -127251,6 +127540,12 @@ function ChartReport()
             if (tab) return { Type:1, Tab: tab };   //底部工具栏
         }
 
+        if (this.VScrollbar)
+        {
+            var item=this.VScrollbar.OnMouseDown(x,y,e);
+            if (item) return { Type:5, VScrollbar:item };   //右侧滚动条
+        }
+
         var pixelTatio = GetDevicePixelRatio();
         var insidePoint={X:x/pixelTatio, Y:y/pixelTatio};
 
@@ -127375,6 +127670,13 @@ function ChartReport()
         return false;
     }
 
+    this.PtInClient=function(x,y)
+    {
+        if (x>this.RectClient.Left && x<this.RectClient.Right && y>this.RectClient.Top && y<this.RectClient.Bottom) return true;
+
+        return false;
+    }
+
     this.PtInBody=function(x,y)
     {
         if (!this.Data) return null;
@@ -128005,6 +128307,164 @@ function ChartReportPageInfo()
         this.SizeChange=false;
     }
 }
+
+
+function ChartVScrollbar()
+{
+    this.Canvas;                        //画布
+    this.ChartBorder;                   //边框信息
+    this.ChartFrame;                    //框架画法
+    this.Name;                          //名称
+    this.ClassName='ChartReportTab';       //类名
+    this.IsDrawFirst=false;
+    this.GetEventCallback;              //获取事件
+    this.Report;
+
+    this.MaxPos=15;             //滚动条可移动长度
+    this.CurrentPos=15;         //当前滚动条移动位置
+    this.Step=1;                //滚动条移动步长
+    this.ButtonSize=25;
+    this.Enable=false;    
+    this.LastStatus={ Draw:false, };    
+    this.GlobalOption; 
+
+    this.ScrollBarHeight=g_JSChartResource.Report.VScrollbar.ScrollBarHeight;
+    this.ButtonColor=g_JSChartResource.Report.VScrollbar.ButtonColor;
+    this.BarColor=g_JSChartResource.Report.VScrollbar.BarColor;
+    this.BorderColor=g_JSChartResource.Report.VScrollbar.BorderColor;
+    this.BGColor=g_JSChartResource.Report.VScrollbar.BGColor;
+    this.Mergin={ Left:2, Right:2, Top:2, Bottom:2 };
+    this.BarWithConfig={ Size:g_JSChartResource.Report.VScrollbar.BarWidth.Size };
+
+    this.RectScroll={ Top:null, Bottom:null, Bar:null, Client:null };   //滚动条区域  
+    
+    this.ReloadResource=function(resource)
+    {
+        this.ScrollBarHeight=g_JSChartResource.Report.VScrollbar.ScrollBarHeight;
+        this.ButtonColor=g_JSChartResource.Report.VScrollbar.ButtonColor;
+        this.BarColor=g_JSChartResource.Report.VScrollbar.BarColor;
+        this.BorderColor=g_JSChartResource.Report.VScrollbar.BorderColor;
+        this.BGColor=g_JSChartResource.Report.VScrollbar.BGColor;
+        this.BarWithConfig={ Size:g_JSChartResource.Report.VScrollbar.BarWidth.Size };
+    }
+
+    this.CalculateSize=function()
+    {
+        var pixelRatio=GetDevicePixelRatio();
+
+        var width=this.BarWithConfig.Size*pixelRatio+this.Mergin.Left+this.Mergin.Right;
+        this.ButtonSize=Math.min(25, width);
+    }
+
+    this.DrawScrollbar=function(left, top, right, bottom)
+    {
+        this.LastStatus.Draw=false;
+        this.RectScroll={ Left:null, Right:null, Bar:null, Client:null };
+        if (!this.Enable) return;
+
+        var isShow=this.IsShowCallback();
+        if (!isShow) return;
+        
+        var pageInfo=this.Report.GetCurrentPageStatus();
+        if (pageInfo.IsSinglePage) return;
+
+        var xOffset=pageInfo.Start;
+        var dataCount=pageInfo.DataCount-pageInfo.PageSize;
+        var buttonSize=this.ButtonSize;
+
+        this.MaxPos=dataCount;
+        this.CurrentPos=xOffset;
+
+        var rtTop={ Right:right-this.Mergin.Right, Top:top+this.Mergin.Top, Width:buttonSize, Height:buttonSize };
+        rtTop.Left=rtTop.Right-buttonSize;
+        rtTop.Bottom=rtTop.Top+buttonSize;
+
+        var rtBottom={ Right:right-this.Mergin.Right, Bottom:bottom-this.Mergin.Bottom, Width:buttonSize, Height:buttonSize };
+        rtBottom.Left=rtBottom.Right-buttonSize;
+        rtBottom.Top=rtBottom.Bottom-buttonSize;
+
+        var centerHeight=(rtBottom.Top-2)-(rtTop.Bottom+2);
+        var value = centerHeight - this.ScrollBarHeight;
+	    var yOffset = (value * this.CurrentPos) / this.MaxPos;
+	    var y = rtTop.Bottom + 2 + yOffset;
+
+        var rtBar = {Right:right-this.Mergin.Right, Top:y, Width:buttonSize, Height: this.ScrollBarHeight };
+        rtBar.Left=rtBar.Right-buttonSize;
+        rtBar.Bottom=rtBar.Top+rtBar.Height;
+
+        this.RectScroll.Top=rtTop;
+        this.RectScroll.Bottom=rtBottom;
+        this.RectScroll.Bar=rtBar;
+        this.RectScroll.Client={ Left:rtTop.Left, Right: rtTop.Right, Top:rtTop.Bottom, Bottom:rtBottom.Top };
+
+        var rtBG={ Right:right, Top:top, Bottom:bottom, Width:buttonSize+this.Mergin.Right+this.Mergin.Left };
+        rtBG.Left=rtBG.Right-rtBG.Width;
+        rtBG.Height=rtBG.Bottom-rtBG.Top;
+        this.Canvas.fillStyle=this.BGColor;
+        this.Canvas.fillRect(rtBG.Left,rtBG.Top,rtBG.Width,rtBG.Height);   
+
+        this.Canvas.fillStyle=this.ButtonColor;
+        this.Canvas.fillRect(rtTop.Left,rtTop.Top,rtTop.Width,rtTop.Height);   
+        this.Canvas.fillRect(rtBottom.Left,rtBottom.Top,rtBottom.Width,rtBottom.Height); 
+
+        this.Canvas.strokeStyle=this.BorderColor;
+        this.Canvas.strokeRect(rtTop.Left,rtTop.Top,rtTop.Width,rtTop.Height);
+        this.Canvas.strokeRect(rtBottom.Left,rtBottom.Top,rtBottom.Width,rtBottom.Height);
+
+        this.Canvas.fillStyle=this.BarColor;
+        this.Canvas.fillRect(rtBar.Left,rtBar.Top,rtBar.Width,rtBar.Height);
+
+        this.LastStatus.Draw=true;
+    }
+
+    this.OnMouseDown=function(x,y, e)
+    {
+        return this.PtInScroll(x,y);
+    }
+
+    // Type 1-4 滚动条
+    this.PtInScroll=function(x,y)
+    {
+        if (!this.RectScroll) return null;
+
+        if (this.RectScroll.Top)
+        {
+            var rtItem=this.RectScroll.Top;
+            if (x>=rtItem.Left && x<=rtItem.Right && y>=rtItem.Top && y<=rtItem.Bottom) return { Type: 1, Rect: rtItem };
+        }
+
+        if (this.RectScroll.Bottom)
+        {
+            var rtItem=this.RectScroll.Bottom;
+            if (x>=rtItem.Left && x<=rtItem.Right && y>=rtItem.Top && y<=rtItem.Bottom) return { Type: 2, Rect: rtItem };
+        }
+
+        if (this.RectScroll.Bar)
+        {
+            var rtItem=this.RectScroll.Bar;
+            if (x>=rtItem.Left && x<=rtItem.Right && y>=rtItem.Top && y<=rtItem.Bottom) return { Type: 3, Rect: rtItem };
+        }
+
+        if (this.RectScroll.Client)
+        {
+            var rtItem=this.RectScroll.Client;
+            if (x>=rtItem.Left && x<=rtItem.Right && y>=rtItem.Top && y<=rtItem.Bottom) 
+            {
+                return { Type: 4, Rect: rtItem , Pos: this.GetScrollPostionByPoint(x,y) };
+            }
+        }
+
+        return null;
+    }
+
+    this.GetScrollPostionByPoint=function(x,y)
+    {
+        var rtItem=this.RectScroll.Client;
+        var value=rtItem.Bottom-rtItem.Top-this.ScrollBarHeight;
+        var pos =parseInt((this.MaxPos * (y - rtItem.Top)) / value);
+        return pos;
+    }
+}
 /*
    Copyright (c) 2018 jones
  
@@ -133543,7 +134003,7 @@ function HQChartScriptWorker()
 
 
 
-var HQCHART_VERSION="1.1.13099";
+var HQCHART_VERSION="1.1.13106";
 
 function PrintHQChartVersion()
 {