hqchart 1.1.12687 → 1.1.12706

package/src/jscommon/umychart.scrollbar.js

@@ -1,1345 +0,0 @@
-/*
-   Copyright (c) 2018 jones
- 
-    http://www.apache.org/licenses/LICENSE-2.0
-
-   开源项目 https://github.com/jones2000/HQChart
- 
-   jones_2000@163.com
-
-   封装滚动条控件 (H5版本)
-*/
-
-
-function JSScrollBarChart(divElement)
-{
-    this.DivElement=divElement;
-    this.JSChartContainer;              //表格控件
-
-     //h5 canvas
-     this.CanvasElement=document.createElement("canvas");
-     this.CanvasElement.className='jsscrollbar-drawing';
-     this.CanvasElement.id=Guid();
-     this.CanvasElement.setAttribute("tabindex",0);
-     if (this.CanvasElement.style) this.CanvasElement.style.outline='none';
-     if(divElement.hasChildNodes())
-     {
-         JSConsole.Chart.Log("[JSScrollBarChart::JSScrollBarChart] divElement hasChildNodes", divElement.childNodes);
-     }
-     divElement.appendChild(this.CanvasElement);
-
-
-    this.OnSize=function()
-    {
-        //画布大小通过div获取
-        var height=parseInt(this.DivElement.style.height.replace("px",""));
-        this.CanvasElement.height=height;
-        this.CanvasElement.width=parseInt(this.DivElement.style.width.replace("px",""));
-        this.CanvasElement.style.width=this.CanvasElement.width+'px';
-        this.CanvasElement.style.height=this.CanvasElement.height+'px';
-
-        var pixelTatio = GetDevicePixelRatio(); //获取设备的分辨率
-        this.CanvasElement.height*=pixelTatio;
-        this.CanvasElement.width*=pixelTatio;
-
-        JSConsole.Chart.Log(`[JSScrollBarChart::OnSize] devicePixelRatio=${window.devicePixelRatio}, height=${this.CanvasElement.height}, width=${this.CanvasElement.width}`);
-
-        if (this.JSChartContainer && this.JSChartContainer.OnSize)
-        {
-            this.JSChartContainer.OnSize();
-        } 
-    }
-
-    this.SetOption=function(option)
-    {
-        var chart=this.CreateJSScrollBarChartContainer(option);
-
-        if (!chart) return false;
-
-        if (option.OnCreatedCallback) option.OnCreatedCallback(chart);
-
-        chart.Draw();
-
-        this.JSChartContainer=chart;
-        this.DivElement.JSChart=this;   //div中保存一份
-    }
-
-    this.CreateJSScrollBarChartContainer=function(option)
-    {
-        var chart=new JSScrollBarChartContainer(this.CanvasElement);
-        chart.Create(option);
-
-        if (IFrameSplitOperator.IsNumber(option.DelayDragFrequency)) chart.DelayDragFrequency=option.DelayDragFrequency;
-
-        this.SetChartBorder(chart, option);
-
-        //注册事件
-        if (option.EventCallback)
-        {
-            for(var i=0;i<option.EventCallback.length;++i)
-            {
-                var item=option.EventCallback[i];
-                chart.AddEventCallback(item);
-            }
-        }
-
-        return chart;
-    }
-
-    this.SetChartBorder=function(chart, option)
-    {
-        if (!option.Border) return;
-
-        var item=option.Border;
-        if (IFrameSplitOperator.IsNumber(option.Border.Left)) chart.Frame.ChartBorder.Left=option.Border.Left;
-        if (IFrameSplitOperator.IsNumber(option.Border.Right)) chart.Frame.ChartBorder.Right=option.Border.Right;
-        if (IFrameSplitOperator.IsNumber(option.Border.Top)) chart.Frame.ChartBorder.Top=option.Border.Top;
-        if (IFrameSplitOperator.IsNumber(option.Border.Bottom)) chart.Frame.ChartBorder.Bottom=option.Border.Bottom;
-
-        var pixelTatio = GetDevicePixelRatio(); //获取设备的分辨率
-        chart.Frame.ChartBorder.Left*=pixelTatio;
-        chart.Frame.ChartBorder.Right*=pixelTatio;
-        chart.Frame.ChartBorder.Top*=pixelTatio;
-        chart.Frame.ChartBorder.Bottom*=pixelTatio;
-
-        if (IFrameSplitOperator.IsBool(item.AutoLeft)) chart.AutoMargin.Left=item.AutoLeft;
-        if (IFrameSplitOperator.IsBool(item.AutoRight)) chart.AutoMargin.Right=item.AutoRight;
-    }
-
-    /////////////////////////////////////////////////////////////////////////////
-    //对外接口
-    
-    //事件回调
-    this.AddEventCallback=function(obj)
-    {
-        if(this.JSChartContainer && typeof(this.JSChartContainer.AddEventCallback)=='function')
-        {
-            JSConsole.Chart.Log('[JSScrollBarChart:AddEventCallback] obj=', obj);
-            this.JSChartContainer.AddEventCallback(obj);
-        }
-    }
-
-    //重新加载配置
-    this.ReloadResource=function(option)
-    {
-        if(this.JSChartContainer && typeof(this.JSChartContainer.ReloadResource)=='function')
-        {
-            JSConsole.Chart.Log('[JSScrollBarChart:ReloadResource] ');
-            this.JSChartContainer.ReloadResource(option);
-        }
-    }
-
-    this.ChartDestory=function()
-    {
-        if (this.JSChartContainer && typeof (this.JSChartContainer.ChartDestory) == 'function') 
-        {
-            this.JSChartContainer.ChartDestory();
-        }
-    }
-
-    this.Draw=function()
-    {
-        if(this.JSChartContainer && typeof(this.JSChartContainer.Draw)=='function')
-        {
-            JSConsole.Chart.Log('[JSScrollBarChart:Draw] ');
-            this.JSChartContainer.Draw();
-        }
-    }
-
-    this.RecvData=function(data, option)
-    {
-        if(this.JSChartContainer && typeof(this.JSChartContainer.RecvData)=='function')
-        {
-            JSConsole.Chart.Log('[JSScrollBarChart:RecvData] ');
-            this.JSChartContainer.RecvData(data,option);
-        }
-    }
-
-    this.UpdateSlider=function(obj)
-    {
-        if(this.JSChartContainer && typeof(this.JSChartContainer.UpdateSlider)=='function')
-        {
-            JSConsole.Chart.Log('[JSScrollBarChart:UpdateSlider] ');
-            this.JSChartContainer.UpdateSlider(obj);
-        }
-    }
-
-    this.Reset=function(option)
-    {
-        if(this.JSChartContainer && typeof(this.JSChartContainer.Reset)=='function')
-        {
-            JSConsole.Chart.Log('[JSScrollBarChart:Reset] ');
-            this.JSChartContainer.Reset(option);
-        }
-    }
-
-    //重新加载配置
-    this.ReloadResource=function(option)
-    {
-        if(this.JSChartContainer && typeof(this.JSChartContainer.ReloadResource)=='function')
-        {
-            JSConsole.Chart.Log('[JSScrollBarChart:ReloadResource] ');
-            this.JSChartContainer.ReloadResource(option);
-        }
-    }
-}
-
-
-JSScrollBarChart.Init=function(divElement)
-{
-    var jsChartControl=new JSScrollBarChart(divElement);
-    jsChartControl.OnSize();
-
-    return jsChartControl;
-}
-
-//自定义风格
-JSScrollBarChart.SetStyle=function(option)
-{
-    if (option) g_JSChartResource.SetStyle(option);
-}
-
-//获取颜色配置 (设置配必须啊在JSChart.Init()之前)
-JSScrollBarChart.GetResource=function()  
-{
-    return g_JSChartResource;
-}
-
-
-
-//////////////////////////////////////////////////////////////////////////////////////////////////////////
-//
-//
-//
-//////////////////////////////////////////////////////////////////////////////////////////////////////////
-function JSScrollBarChartContainer(uielement)
-{
-    this.ClassName='JSScrollBarChartContainer';
-    this.Frame;                                     //框架画法
-    this.ChartPaint=[];                             //图形画法
-    this.ChartSplashPaint=null;                     //等待提示
-    this.LoadDataSplashTitle="无数据";           //下载数据提示信息
-
-    this.Canvas=uielement.getContext("2d");         //画布
-    this.ShowCanvas=null;
-
-    this.XOffsetData={ Start:-1, End:-1, Count:0 };         //Count:一共的数据个数   
-    this.SourceData//   new ChartData();                   //K线数据
-
-    this.SliderChart;    //滑块
-    
-    this.DragMove;  //={ Click:{ 点击的点}, Move:{最后移动的点}, PreMove:{上一个点的位置} };
-    this.DragSlider;
-    this.DragTimer; //拖拽延迟定时器
-    this.DelayDragFrequency=150;
-
-    this.AutoMargin={ Left:false, Right:false };    //左右2边间距是否跟K线一致
-
-    //事件回调
-    this.mapEvent=new Map();   //通知外部调用 key:JSCHART_EVENT_ID value:{Callback:回调,}
-
-    this.UIElement=uielement;
-    this.LastPoint=new Point();     //鼠标位置
-    
-    //this.XStepPixel=10*GetDevicePixelRatio();   
-    this.IsDestroy=false;        //是否已经销毁了
-
-    this.HQChart=null;
-
-    this.ChartDestory=function()    //销毁
-    {
-        this.IsDestroy=true;
-    }
-
-    //设置事件回调
-    //{event:事件id, callback:回调函数}
-    this.AddEventCallback=function(object)
-    {
-        if (!object || !object.event || !object.callback) return;
-
-        var data={Callback:object.callback, Source:object};
-        this.mapEvent.set(object.event,data);
-    }
-
-    this.RemoveEventCallback=function(eventid)
-    {
-        if (!this.mapEvent.has(eventid)) return;
-
-        this.mapEvent.delete(eventid);
-    }
-
-    this.GetEventCallback=function(id)  //获取事件回调
-    {
-        if (!this.mapEvent.has(id)) return null;
-        var item=this.mapEvent.get(id);
-        return item;
-    }
-
-    //创建
-    this.Create=function(option)
-    {
-        this.UIElement.JSChartContainer=this;
-
-        //创建等待提示
-        this.ChartSplashPaint = new ChartSplashPaint();
-        this.ChartSplashPaint.Canvas = this.Canvas;
-        this.ChartSplashPaint.SetTitle(this.LoadDataSplashTitle);
-        this.ChartSplashPaint.IsEnableSplash=true;
-
-        //创建框架
-        this.Frame=new JSScrollBarFrame();
-        this.Frame.ChartBorder=new ChartBorder();
-        this.Frame.ChartBorder.UIElement=this.UIElement;
-        this.Frame.ChartBorder.Top=30;
-        this.Frame.ChartBorder.Left=5;
-        this.Frame.ChartBorder.Bottom=20;
-        this.Frame.Canvas=this.Canvas;
-
-        this.ChartSplashPaint.Frame = this.Frame;
-
-        //背景
-        var chart=new ScrollBarBGChart();
-        chart.ChartFrame=this.Frame;
-        chart.ChartBorder=this.Frame.ChartBorder;
-        chart.Canvas=this.Canvas;
-        chart.GetEventCallback=(id)=> { return this.GetEventCallback(id); }
-        this.ChartPaint.push(chart);
-
-        //创建滑块
-        var chart=new SliderChart();
-        chart.ChartFrame=this.Frame;
-        chart.ChartBorder=this.Frame.ChartBorder;
-        chart.Canvas=this.Canvas;
-        chart.OffsetData=this.XOffsetData;
-        chart.GetEventCallback=(id)=> { return this.GetEventCallback(id); }
-        this.SliderChart=chart;
-        this.ChartPaint.push(chart);
-
-        //this.UIElement.ondblclick=(e)=>{ this.UIOnDblClick(e); }
-        this.UIElement.onmousedown=(e)=> { this.UIOnMouseDown(e); }
-        this.UIElement.oncontextmenu=(e)=> { this.UIOnContextMenu(e); }
-        this.UIElement.onmousemove=(e)=>{ this.UIOnMouseMove(e);}
-        this.UIElement.onmouseout=(e)=>{ this.UIOnMounseOut(e); }
-        this.UIElement.onmouseleave=(e)=>{ this.UIOnMouseleave(e); }
-        
-
-        //手机拖拽
-        //this.UIElement.ontouchstart=(e)=> { this.OnTouchStart(e); } 
-        //this.UIElement.ontouchmove=(e)=> {this.OnTouchMove(e); }
-        //this.UIElement.ontouchend=(e)=> {this.OnTouchEnd(e); } 
-    }
-
-    this.Draw=function()
-    {
-        if (this.UIElement.width<=0 || this.UIElement.height<=0) return; 
-
-        this.Canvas.clearRect(0,0,this.UIElement.width,this.UIElement.height);
-        var pixelTatio = GetDevicePixelRatio(); //获取设备的分辨率
-        this.Canvas.lineWidth=pixelTatio;       //手机端需要根据分辨率比调整线段宽度
-
-        if (this.ChartSplashPaint && this.ChartSplashPaint.IsEnableSplash)
-        {
-            this.Frame.Draw( { IsEnableSplash:this.ChartSplashPaint.IsEnableSplash} );
-            this.ChartSplashPaint.Draw();
-            return;
-        }
-
-        this.Frame.Draw();
-        this.Frame.DrawLogo();
-       
-        //框架内图形
-        for(var i=0;i<this.ChartPaint.length;++i)
-        {
-            var item=this.ChartPaint[i];
-            if (item.IsDrawFirst)
-                item.Draw();
-        }
-
-        for(var i=0; i<this.ChartPaint.length; ++i)
-        {
-            var item=this.ChartPaint[i];
-            if (!item.IsDrawFirst)
-                item.Draw();
-        }
-    }
-
-    
-    this.OnSize=function()
-    {
-        if (!this.Frame) return;
-
-        this.SetSizeChange(true);
-        this.Draw();
-    }
-
-    this.SetSizeChange=function(bChanged)
-    {
-        for(var i=0;i<this.ChartPaint.length;++i)
-        {
-            var chart=this.ChartPaint[i];
-            if (chart) chart.SizeChange=bChanged;
-        }
-    }
-
-    this.UpdateFrameMaxMin=function()
-    {
-        var max=null, min=null;
-        for(var i=0;i<this.ChartPaint.length;++i)
-        {
-            var item=this.ChartPaint[i];
-            if (!item.GetMaxMin) continue;
-
-            var range=item.GetMaxMin();
-            if (range==null || range.Max==null || range.Min==null) continue;
-
-            if (max==null || max<range.Max) max=range.Max;
-            if (min==null || min>range.Min) min=range.Min;
-        }
-
-        if (IFrameSplitOperator.IsNumber(max) && IFrameSplitOperator.IsNumber(min))
-        {
-            this.Frame.HorizontalMax=max;
-            this.Frame.HorizontalMin=min;
-        }
-    }
-
-    //未启动
-    this.UIOnDblClick=function(e)
-    {
-      
-    }
-
-    this.CancelDragTimer=function()
-    {
-        if (this.DragTimer)
-        {
-            clearTimeout(this.DragTimer);
-            this.DragTimer=null;
-        }
-    }
-
-    this.UIOnMouseDown=function(e)
-    {
-        this.CancelDragTimer();
-        this.DragSlider=null;
-        this.DragMove={ Click:{ X:e.clientX, Y:e.clientY }, Move:{X:e.clientX, Y:e.clientY}, PreMove:{X:e.clientX, Y:e.clientY } };
-
-        var pixelTatio = GetDevicePixelRatio();
-        var x = (e.clientX-this.UIElement.getBoundingClientRect().left)*pixelTatio;
-        var y = (e.clientY-this.UIElement.getBoundingClientRect().top)*pixelTatio;
-
-        if (this.SliderChart) 
-        {
-            var clickData=this.SliderChart.PtInChart(x,y);
-            if (!clickData) return;
-
-            this.DragSlider={ Click:{ X:e.clientX, Y:e.clientY }, LastMove:{X:e.clientX, Y:e.clientY}, Data:clickData };
-            this.DragSlider.DrawCount=0;    //重绘次数
-        }
-
-        document.onmousemove=(e)=>{ this.DocOnMouseMove(e); }
-        document.onmouseup=(e)=> { this.DocOnMouseUp(e); }
-    }
-
-    //去掉右键菜单
-    this.UIOnContextMenu=function(e)
-    {
-        e.preventDefault();
-    }
-
-    this.UIOnMouseMove=function(e)
-    {
-        var pixelTatio = GetDevicePixelRatio();
-        var x = (e.clientX-this.UIElement.getBoundingClientRect().left)*pixelTatio;
-        var y = (e.clientY-this.UIElement.getBoundingClientRect().top)*pixelTatio;
-        
-        if (this.DragSlider) return;
-
-        var mouseStatus= mouseStatus={ Cursor:"default" };;   //鼠标状态
-        var item=this.SliderChart.PtInChart(x,y);
-        if (item)
-        {
-            switch(item.Data.Type)
-            {
-                case 0:
-                    mouseStatus={ Cursor:"move", Name:"SliderChart"};
-                    break;
-                case 1:
-                case 2:
-                    mouseStatus={ Cursor:"ew-resize", Name:"SliderChart"};
-                    break;
-            }
-        }
-
-        if (mouseStatus)
-            this.UIElement.style.cursor=mouseStatus.Cursor;
-    }
-
-    this.UIOnMounseOut=function(e)
-    {
-        
-    }
-
-    this.UIOnMouseleave=function(e)
-    {
-        
-    }
-
-    this.DocOnMouseMove=function(e)
-    {
-        this.DragMove.PreMove.X=this.DragMove.Move.X;
-        this.DragMove.PreMove.Y=this.DragMove.Move.Y;
-        this.DragMove.Move.X=e.clientX;
-        this.DragMove.Move.Y=e.clientX;
-
-        if (this.ChartSplashPaint && this.ChartSplashPaint.IsEnableSplash == true) return;
-
-        var pixelTatio = GetDevicePixelRatio();
-        var x = (e.clientX-this.UIElement.getBoundingClientRect().left)*pixelTatio;
-        var y = (e.clientY-this.UIElement.getBoundingClientRect().top)*pixelTatio;
-
-        JSConsole.Chart.Log(`[JSScrollBarChartContainer::DocOnMouseMove] x=${x}, y=${y}`);
-        
-        if (this.DragSlider)
-        {
-            var drag=this.DragSlider;
-            var moveSetp=(e.clientX-drag.LastMove.X)*pixelTatio;
-            if (Math.abs(moveSetp)<1) return;
-
-            var pageRange=this.GetPageRange();
-            var left=this.Frame.ChartBorder.GetLeft();
-            var right=this.Frame.ChartBorder.GetRight();
-            this.SliderChart.DragMode=true;
-            var type=drag.Data.Data.Type;
-            var xStart=this.SliderChart.XStart+moveSetp;
-            var xEnd=this.SliderChart.XEnd+moveSetp;
-
-            if (type==0) //整体移动
-            {
-                if (xStart<left)    //第1页
-                {
-                    xStart=pageRange.First.XStart;
-                    xEnd=pageRange.First.XEnd;
-                }
-                else if (xEnd>=right)
-                {
-                    xStart=pageRange.Last.XStart;
-                    xEnd=pageRange.Last.XEnd;
-                }
-
-                this.SliderChart.XStart=xStart;
-                this.SliderChart.XEnd=xEnd;
-            }
-            else if (type==1)    //左移动
-            {
-                if (xStart<=left)
-                {
-                    xStart=pageRange.First.XStart;
-                }
-
-                this.SliderChart.XStart=xStart;
-            }
-            else if (type==2)
-            {
-                if (xEnd>=right) 
-                {
-                    xEnd=pageRange.Last.XEnd;
-                }
-
-                this.SliderChart.XEnd=xEnd;
-            }
-
-            drag.UpdateData={  XStart:xStart, XEnd:xEnd, Type:type };
-            drag.LastMove.X=e.clientX;
-            drag.LastMove.Y=e.clientY;
-
-            if (drag.DrawCount==0)
-            {
-                this.DragUpdate(drag);
-            }
-            else
-            {
-                this.DragTimer=setTimeout(()=>
-                {
-                    this.DragUpdate(this.DragSlider);
-                }, this.DelayDragFrequency);
-            }
-        }
-    }
-
-    this.DocOnMouseUp=function(e)
-    {
-        //清空事件
-        document.onmousemove=null;
-        document.onmouseup=null;
-
-        this.CancelDragTimer();
-        var dragSlider=this.DragSlider;
-        this.DragMove=null;
-        this.DragSlider=null;
-        this.SliderChart.DragMode=false;
-
-        this.DragUpdate(dragSlider);
-    }
-
-    this.DragUpdate=function(dragData)
-    {
-        if (!dragData || !dragData.UpdateData) return;
-
-        this.UpdateXDataOffset(dragData.UpdateData);
-        this.Draw();
-        ++dragData.DrawCount;
-    }
-
-    this.Reset=function(option)
-    {
-        this.SourceData=null;
-        this.XOffsetData.Start=-1;
-        this.XOffsetData.End=-1;
-        this.XOffsetData.Count=0;
-
-        this.Frame.Data=null;
-        for(var i=0;i<this.ChartPaint.length;++i)
-        {
-            var item=this.ChartPaint[i];
-            item.Data=null;
-        }
-
-        if (this.ChartSplashPaint)
-            this.ChartSplashPaint.IsEnableSplash=true;
-
-        if (option.Draw) this.Draw();
-    }
-
-    //外部更新滑块 obj={ Start: , End: }
-    this.UpdateSlider=function(obj)
-    {
-        if (this.SliderChart.DragMode) return;
-
-        var bSizeChange=false;
-        if ((this.AutoMargin.Left || this.AutoMargin.Right) && obj.Border)
-        {
-            if (this.AutoMargin.Left)
-            {
-                if (this.Frame.ChartBorder.Left!=obj.Border.Left) bSizeChange=true;
-            }
-
-            if (this.AutoMargin.Right)
-            {
-                if (this.Frame.ChartBorder.Right!=obj.Border.Right) bSizeChange=true;
-            }
-        }
-        
-        var data=obj.Data;
-        if (this.XOffsetData.Start==obj.Start && this.XOffsetData.End==obj.End && this.SourceData==data && !bSizeChange) return;
-            
-        this.SourceData=data;
-        var count=data.Data.length;
-        if (IFrameSplitOperator.IsNumber(obj.RightSpaceCount)) count+=obj.RightSpaceCount;
-        this.Frame.XPointCount=count;
-        this.Frame.Data=data;
-        this.XOffsetData.Count=count;
-        this.XOffsetData.Start=obj.Start;
-        this.XOffsetData.End=obj.End;
-
-        for(var i=0;i<this.ChartPaint.length;++i)
-        {
-            var item=this.ChartPaint[i];
-            item.Data=data;
-        }
-
-        if (this.AutoMargin.Left && obj.Border)
-        {
-            if (IFrameSplitOperator.IsNumber(obj.Border.Left)) 
-                this.Frame.ChartBorder.Left=obj.Border.Left;
-        }
-
-        if (this.AutoMargin.Right && obj.Border)
-        {
-            if (IFrameSplitOperator.IsNumber(obj.Border.Right)) 
-                this.Frame.ChartBorder.Right=obj.Border.Right;
-        }
-
-        this.UpdateFrameMaxMin();
-
-        if (this.ChartSplashPaint)
-            this.ChartSplashPaint.IsEnableSplash=false;
-
-        if (obj.Draw) this.Draw();
-    }
-
-    //移动滑块
-    this.UpdateXDataOffset=function(obj)
-    {
-        if (obj.Type==0)
-        {
-            var start=this.Frame.GetXData(obj.XStart);
-            start=parseInt(start);
-            var moveSetp=start-this.XOffsetData.Start;
-
-            this.XOffsetData.Start=start;
-            this.XOffsetData.End+=moveSetp;
-        }
-        else if (obj.Type==1)
-        {
-            var start=this.Frame.GetXData(obj.XStart);
-            start=parseInt(start);
-            this.XOffsetData.Start=start;
-        }
-        else if (obj.Type==2)
-        {
-            var end=this.Frame.GetXData(obj.XEnd);
-            end=parseInt(end);
-            this.XOffsetData.End=end;
-        }
-
-        var endItem=this.SourceData.Data[this.XOffsetData.End];
-        var startItem=this.SourceData.Data[this.XOffsetData.Start];
-
-        var sendData={ Type:obj.Type, Count:this.XOffsetData.Count };
-        if (this.XOffsetData.End>this.XOffsetData.Start)
-        {
-            sendData.Start={ Index:this.XOffsetData.Start, Item:startItem};
-            sendData.End={ Index:this.XOffsetData.End, Item:endItem};
-        }
-        else
-        {
-            sendData.Start={ Index:this.XOffsetData.End, Item:endItem };
-            sendData.End={ Index:this.XOffsetData.Start, Item:startItem };
-        }
-
-        if (this.HQChart && this.HQChart.JSChartContainer)
-        {
-            var internalChart=this.HQChart.JSChartContainer;
-            if (internalChart.ChartOperator)
-            {
-                var obj={ ID:JSCHART_OPERATOR_ID.OP_SCROOLBAR_SLIDER_CHANGED, Start:sendData.Start, End:sendData.End, Type:sendData.Type };
-                internalChart.ChartOperator(obj);
-            }
-        }
-
-        var event=this.GetEventCallback(JSCHART_EVENT_ID.ON_SCROLLBAR_SLIDER_CHANGED);
-        if (event)
-        {
-            event.Callback(event,sendData,this);
-        }
-    }
-
-    
-    this.ReloadResource=function(option)
-    {
-        this.Frame.ReloadResource(option);
-        
-        for(var i=0;i<this.ChartPaint.length;++i)
-        {
-            var item=this.ChartPaint[i];
-            if (item.ReloadResource) item.ReloadResource(option);
-        }
-
-        if (option && option.Redraw)
-        {
-            this.SetSizeChange(true);
-            this.Draw();
-        }
-    }
-
-    this.GetPageRange=function()
-    {
-        var result={};
-        var showCount=Math.abs(this.XOffsetData.Start-this.XOffsetData.End);
-        result.ShowCount=showCount;
-
-        //第1页
-        var xStart=this.Frame.GetXFromIndex(0);
-        var xEnd=this.Frame.GetXFromIndex(showCount);
-        result.First={ XStart:xStart, XEnd:xEnd };
-
-        //最后一页
-        var end=this.Frame.XPointCount-1;
-        var xEnd=this.Frame.GetXFromIndex(end);
-        var xStart=this.Frame.GetXFromIndex(end-showCount);
-        result.Last={ XStart:xStart, XEnd:xEnd };
-
-        return result;
-    }
-
-    this.ReloadResource=function(option)
-    {
-        this.Frame.ReloadResource(option);
-        for(var i=0; i<this.ChartPaint.length; ++i)
-        {
-            var item=this.ChartPaint[i];
-            if (item.ReloadResource) item.ReloadResource(option);
-        }
-
-        if (option.Draw==true) this.Draw(); //是否立即重绘
-    }
-}
-
-/////////////////////////////////////////////////////////////////////////////////////////
-//  框子
-//
-//
-/////////////////////////////////////////////////////////////////////////////////////////
-
-function JSScrollBarFrame()
-{
-    this.ChartBorder;
-    this.Canvas;                            //画布
-    this.BorderLine=null;                   //1=上 2=下 4=左 8=右
-    this.Data;
-    this.Count=0;
-    this.ClassName='JSScrollBarFrame';     //类名
-
-    this.HorizontalMax=10;                 //Y轴最大值
-    this.HorizontalMin=5;                  //Y轴最小值
-    this.XPointCount=0;
-
-    this.XSplitTextFont=g_JSChartResource.ScrollBar.XSplitTextFont;
-    this.XSplitTextColor=g_JSChartResource.ScrollBar.XSplitTextColor;
-    this.XSplitLineColor=g_JSChartResource.ScrollBar.XSplitLineColor;
-
-    this.BorderColor=g_JSChartResource.ScrollBar.BorderColor;    //边框线
-    this.LogoTextColor=g_JSChartResource.FrameLogo.TextColor;
-    this.LogoTextFont=g_JSChartResource.FrameLogo.Font;
-
-    this.ReloadResource=function(resource)
-    {
-        this.BorderColor=g_JSChartResource.ScrollBar.BorderColor;    //边框线
-        this.LogoTextColor=g_JSChartResource.FrameLogo.TextColor;
-        this.LogoTextFont=g_JSChartResource.FrameLogo.Font;
-    }
-
-    this.Draw=function()
-    {
-        this.DrawBorder();
-        this.DrawLogo();
-        this.DrawVertical();
-    }
-
-    this.DrawLogo=function()
-    {
-        var text=g_JSChartResource.FrameLogo.Text;
-        if (!IFrameSplitOperator.IsString(text)) return;
-
-        this.Canvas.fillStyle=this.LogoTextColor;
-        this.Canvas.font=this.LogoTextFont;
-        this.Canvas.textAlign = 'left';
-        this.Canvas.textBaseline = 'top';
-       
-        var x=this.ChartBorder.GetLeft()+2;
-        var y=this.ChartBorder.GetTop()+2;
-        this.Canvas.fillText(text,x,y); 
-    }
-
-    this.DrawBorder=function()
-    {
-        var left=ToFixedPoint(this.ChartBorder.GetLeft());
-        var top=ToFixedPoint(this.ChartBorder.GetTop());
-        var right=ToFixedPoint(this.ChartBorder.GetRight());
-        var bottom=ToFixedPoint(this.ChartBorder.GetBottom());
-        var width=right-left;
-        var height=bottom-top;
-
-        //JSConsole.Chart.Log(`[JSScrollBarFrame.DrawBorder] left=${left} `);
-        if (!IFrameSplitOperator.IsNumber(this.BorderLine))
-        {
-            this.Canvas.strokeStyle=this.BorderColor;
-            this.Canvas.strokeRect(left,top,width,height);
-        }
-        else
-        {
-            this.Canvas.strokeStyle=this.BorderColor;
-            this.Canvas.beginPath();
-
-            if ((this.BorderLine&1)>0) //上
-            {
-                this.Canvas.moveTo(left,top);
-                this.Canvas.lineTo(right,top);
-            }
-
-            if ((this.BorderLine&2)>0)  //下
-            {
-                this.Canvas.moveTo(left,bottom);
-                this.Canvas.lineTo(right,bottom);
-            }
-
-            if ((this.BorderLine&4)>0)  //左
-            {
-                this.Canvas.moveTo(left,top);
-                this.Canvas.lineTo(left,bottom);
-            }
-
-            if ((this.BorderLine&8)>0)    //右
-            {
-                this.Canvas.moveTo(right,top);
-                this.Canvas.lineTo(right,bottom);
-            }
-              
-            this.Canvas.stroke();
-        }
-    }
-
-    this.GetXFromIndex=function(index)
-    {
-        var count=this.XPointCount;
-        if (count==1)
-        {
-            if (index==0) return this.ChartBorder.GetLeft();
-            else return this.ChartBorder.GetRight();
-        }
-        else if (count<=0)
-        {
-            return this.ChartBorder.GetLeft();
-        }
-        else if (index>=count)
-        {
-            return this.ChartBorder.GetRight();
-        }
-        else
-        {
-            var offset=this.ChartBorder.GetLeft()+this.ChartBorder.GetWidth()*index/count;
-            return offset;
-        }
-    }
-
-    this.GetYFromData=function(value)
-    {
-        if(value<=this.HorizontalMin) return this.ChartBorder.GetBottomEx();
-        if(value>=this.HorizontalMax) return this.ChartBorder.GetTopEx();
-
-        var height=this.ChartBorder.GetHeightEx()*(value-this.HorizontalMin)/(this.HorizontalMax-this.HorizontalMin);
-        return this.ChartBorder.GetBottomEx()-height;
-    }
-
-    //X坐标转x轴数值
-    this.GetXData=function(x)
-    {
-        if (x<=this.ChartBorder.GetLeft()) return 0;
-		if (x>=this.ChartBorder.GetRight()) return this.XPointCount;
-
-		return (x-this.ChartBorder.GetLeft())*(this.XPointCount*1.0/this.ChartBorder.GetWidth());
-    }
-
-    this.GetPreSetpWidth=function()
-    {
-        return this.XPointCount*1.0/this.ChartBorder.GetWidth();
-    }
-
-    this.DrawVertical=function()
-    {
-        if (this.ChartBorder.Bottom<=5) return;
-        if (!this.Data || !IFrameSplitOperator.IsNonEmptyArray(this.Data.Data)) return
-
-        var item=this.Data.Data[0];
-        var preYear=parseInt(item.Date/10000);
-        var preDay=item.Date%10000;
-
-        this.Canvas.font=this.XSplitTextFont;
-        this.Canvas.fillStyle=this.XSplitTextColor;
-        this.Canvas.textBaseline="top";
-        var yText=this.ChartBorder.GetBottom()+2;
-        var top=this.ChartBorder.GetTop();
-        var bottom=this.ChartBorder.GetBottom();
-        var preXText=0;
-        
-        if (ChartData.IsMilliSecondPeriod(this.Data.Period))
-        {
-            var preHour=null;
-            for(var i=0;i<this.Data.Data.length;++i)
-            {
-                var item=this.Data.Data[i];
-                var day=item.Date%10000;
-                var time=parseInt(item.Time/1000);
-                var hour=parseInt(time/10000);
-                if (i==0)
-                {
-                    var text=IFrameSplitOperator.FormatDateString(item.Date, "MM-DD");
-                    var x=this.ChartBorder.GetLeft();
-                    this.Canvas.textAlign="left";
-                    this.Canvas.fillText(text,x,yText);
-                    var textWidth=this.Canvas.measureText(text).width+2;
-                    preXText=x+textWidth;
-                    preDay=day;
-                    preHour=hour;
-                    continue;
-                }
-
-                if (hour!=preHour)
-                {
-                    var text=IFrameSplitOperator.FormatTimeString(item.Time, "HH:MM:SS.fff");
-                    var x=this.GetXFromIndex(i);
-                    var textWidth=this.Canvas.measureText(text).width+2;
-                    if (x-textWidth/2>preXText)
-                    {
-                        this.Canvas.textAlign="center";
-                        this.Canvas.fillText(text,x,yText);
-                        preXText=x+textWidth/2;
-                    }
-    
-                    x=ToFixedPoint(x);
-                    this.Canvas.strokeStyle=this.XSplitLineColor;
-                    this.Canvas.beginPath();
-                    this.Canvas.moveTo(x,top);
-                    this.Canvas.lineTo(x,bottom);
-                    this.Canvas.stroke();
-    
-                    preHour=hour;
-                }
-            }
-        }
-        else if (ChartData.IsMinutePeriod(this.Data.Period,true))
-        {
-            for(var i=0;i<this.Data.Data.length;++i)
-            {
-                var item=this.Data.Data[i];
-                var day=item.Date%10000;
-                if (i==0)
-                {
-                    var text=IFrameSplitOperator.FormatDateString(item.Date, "MM-DD");
-                    var x=this.ChartBorder.GetLeft();
-                    this.Canvas.textAlign="left";
-                    this.Canvas.fillText(text,x,yText);
-                    var textWidth=this.Canvas.measureText(text).width+2;
-                    preXText=x+textWidth;
-                    preDay=day;
-                    continue;
-                }
-
-                if (day!=preDay)
-                {
-                    var text=IFrameSplitOperator.FormatDateString(item.Date, "MM-DD");
-                    var x=this.GetXFromIndex(i);
-                    var textWidth=this.Canvas.measureText(text).width+2;
-                    if (x-textWidth/2>preXText)
-                    {
-                        this.Canvas.textAlign="center";
-                        this.Canvas.fillText(text,x,yText);
-                        preXText=x+textWidth/2;
-                    }
-    
-                    x=ToFixedPoint(x);
-                    this.Canvas.strokeStyle=this.XSplitLineColor;
-                    this.Canvas.beginPath();
-                    this.Canvas.moveTo(x,top);
-                    this.Canvas.lineTo(x,bottom);
-                    this.Canvas.stroke();
-    
-                    preDay=day;
-                }
-            }
-        }
-        else
-        {
-            for(var i=0;i<this.Data.Data.length;++i)
-            {
-                var item=this.Data.Data[i];
-                var year=parseInt(item.Date/10000);
-                if (i==0)
-                {
-                    var text=`${year}`;
-                    var x=this.ChartBorder.GetLeft();
-                    var textWidth=this.Canvas.measureText(text).width+2;
-                    this.Canvas.textAlign="left";
-                    this.Canvas.fillText(text,x,yText);
-                    preXText=x+textWidth;
-                    preYear=year;
-                    continue;
-                }
-
-                if (year!=preYear)
-                {
-                    var text=`${year}`;
-                    var x=this.GetXFromIndex(i);
-                    var textWidth=this.Canvas.measureText(text).width+2;
-                    if (x-textWidth/2>preXText)
-                    {
-                        this.Canvas.textAlign="center";
-                        this.Canvas.fillText(text,x,yText);
-                        preXText=x+textWidth/2;
-                    }
-    
-                    x=ToFixedPoint(x);
-                    this.Canvas.strokeStyle=this.XSplitLineColor;
-                    this.Canvas.beginPath();
-                    this.Canvas.moveTo(x,top);
-                    this.Canvas.lineTo(x,bottom);
-                    this.Canvas.stroke();
-    
-                    preYear=year;
-                }
-            }
-        }
-    }
-}
-
-
-/////////////////////////////////////////////////////////////////////////////////////////////////
-// 滑块
-//
-/////////////////////////////////////////////////////////////////////////////////////////////////
-function SliderChart()
-{
-    this.Canvas;                        //画布
-    this.ChartBorder;                   //边框信息
-    this.ChartFrame;                    //框架画法
-    this.Name;                          //名称
-    this.ClassName='SliderChart';       //类名
-    this.OffsetData;
-    this.Color=g_JSChartResource.ScrollBar.Slider.BarAreaColor;
-
-    this.BarColor=g_JSChartResource.ScrollBar.Slider.BarColor;
-    this.BarWidth=10;
-    this.BarPadding=10;  //上下留白
-
-    this.DateFont=g_JSChartResource.ScrollBar.Slider.DateFont;
-    this.DateColor=g_JSChartResource.ScrollBar.Slider.DateColor;
-
-    this.AryRect=[];    //[{ Rect:{Left, Top, Right:, Bottom:, Width, Height:}, Type:0中间 1=左 2=右 }]
-    this.XStart;
-    this.XEnd;
-
-    this.SizeChange=true;
-    this.DragMode=false;
-
-    this.ReloadResource=function(resource)
-    {
-        this.Color=g_JSChartResource.ScrollBar.Slider.BarAreaColor;
-        this.BarColor=g_JSChartResource.ScrollBar.Slider.BarColor;
-
-        this.DateFont=g_JSChartResource.ScrollBar.Slider.DateFont;
-        this.DateColor=g_JSChartResource.ScrollBar.Slider.DateColor;
-    }
-
-    this.Draw=function()
-    {
-        this.AryRect=[];
-
-        if (!this.OffsetData || !IFrameSplitOperator.IsPlusNumber(this.OffsetData.Count)) return;
-        if (!IFrameSplitOperator.IsNumber(this.OffsetData.Start) || !IFrameSplitOperator.IsNumber(this.OffsetData.End)) return;
-
-        var top=this.ChartBorder.GetTop();
-        var bottom=this.ChartBorder.GetBottom();
-        var startData, endData;
-        if (this.DragMode)
-        {
-            var xStart=this.XStart;
-            var xEnd=this.XEnd;
-
-            var startIndex=this.ChartFrame.GetXData(xStart);
-            var endIndx=this.ChartFrame.GetXData(xEnd);
-
-            startIndex=parseInt(startIndex);
-            endIndx=parseInt(endIndx);
-
-            startData={ Data:this.Data.Data[this.OffsetData.Start], X:xStart, Type:startIndex<endIndx?0:1 };
-            endData={Data:this.Data.Data[this.OffsetData.End], X:xEnd, Type:endIndx>startIndex?1:0 };
-        }
-        else
-        {
-            var start=this.OffsetData.Start, end=this.OffsetData.End;
-            var xStart=this.ChartFrame.GetXFromIndex(start);
-            var xEnd=this.ChartFrame.GetXFromIndex(end);
-            this.XStart=xStart;
-            this.XEnd=xEnd;
-            startData={ Data:this.Data.Data[this.OffsetData.Start], X:xStart, Type:xStart<xEnd?0:1 };
-            endData={Data:this.Data.Data[this.OffsetData.End], X:xEnd, Type:xEnd>xStart?1:0 };
-        }
-        
-        this.Canvas.fillStyle=this.Color;
-        var rtBar={ Left:Math.min(xStart,xEnd), Top:top, Width:Math.abs(xEnd-xStart), Height: bottom-top};
-        rtBar.Right=rtBar.Left+rtBar.Width;
-        rtBar.Bottom=rtBar.Top+rtBar.Height;
-        this.Canvas.fillRect(rtBar.Left, rtBar.Top, rtBar.Width, rtBar.Height);
-        this.AryRect.push({ Rect:rtBar, Type:0});
-
-
-        //左右拖拽块
-        var pixelRatio=GetDevicePixelRatio();
-        var barWidth=this.BarWidth*pixelRatio;
-        var barHeight=bottom-top-(this.BarPadding*2)*pixelRatio;
-        var xBar=xStart-this.BarWidth/2;
-        var yBar=top+this.BarPadding*pixelRatio;
-        
-        this.Canvas.fillStyle=this.BarColor;
-        var rtBar={Left:xBar, Top:yBar, Width:barWidth, Height:barHeight};
-        rtBar.Right=rtBar.Left+rtBar.Width;
-        rtBar.Bottom=rtBar.Top+rtBar.Height;
-        this.Canvas.fillRect(rtBar.Left, rtBar.Top, rtBar.Width, rtBar.Height);
-        this.AryRect.push({ Rect:rtBar, Type:1});
-
-        var xBar=xEnd-this.BarWidth/2;
-        var rtBar={Left:xBar, Top:yBar, Width:barWidth, Height:barHeight};
-        rtBar.Right=rtBar.Left+rtBar.Width;
-        rtBar.Bottom=rtBar.Top+rtBar.Height;
-        this.Canvas.fillRect(rtBar.Left, rtBar.Top, rtBar.Width, rtBar.Height);
-        this.AryRect.push({ Rect:rtBar, Type:2});
-
-        this.DrawDateTime(startData);
-        this.DrawDateTime(endData);
-    }
-
-    this.DrawDateTime=function(data)
-    {
-        if (!data || !data.Data) return;
-        var text=IFrameSplitOperator.FormatDateString(data.Data.Date);
-        var top=this.ChartBorder.GetTop();
-        var bottom=this.ChartBorder.GetBottom();
-        var timeText=null;
-
-        if (ChartData.IsMilliSecondPeriod(this.Data.Period))
-        {
-            var time=parseInt(data.Data.Time/1000);
-            text=IFrameSplitOperator.FormatTimeString(time,"HH:MM:SS");
-        }
-        else if (ChartData.IsMinutePeriod(this.Data.Period, true)) 
-        {
-            timeText=IFrameSplitOperator.FormatTimeString(data.Data.Time,"HH:MM");
-        }
-
-        if (data.Type==0) 
-        {
-            this.Canvas.textAlign="right";
-            var x=data.X-this.BarWidth/2;
-        }
-        else if (data.Type==1) 
-        {
-            this.Canvas.textAlign="left";
-            var x=data.X+this.BarWidth/2;
-        }
-
-        this.Canvas.font=this.DateFont;
-        var fontHeight=this.Canvas.measureText("擎").width;
-        this.Canvas.textBaseline="middle";
-        this.Canvas.fillStyle=this.DateColor;
-
-        var yText=top+(bottom-top)/2;
-        this.Canvas.fillText(text,x,yText);
-
-        if (timeText)
-        {
-            yText+=fontHeight;
-            this.Canvas.fillText(timeText,x,yText);
-        }
-    }
-
-    this.PtInChart=function(x,y)
-    {
-        if (!IFrameSplitOperator.IsNonEmptyArray(this.AryRect)) return null;
-
-        for(var i=this.AryRect.length-1; i>=0; --i)
-        {
-            var item=this.AryRect[i];
-            var rt=item.Rect;
-            if (x>=rt.Left && x<=rt.Right && y>=rt.Top && y<=rt.Bottom)
-            {
-                return { Data:item };
-            }
-        }
-
-        return null;
-    }
-}
-
-///////////////////////////////////////////////////////////////////////////////////////////////
-// 滚动条K线背景色
-//
-//
-/////////////////////////////////////////////////////////////////////////////////////////////////
-function ScrollBarBGChart()
-{
-    this.Canvas;                        //画布
-    this.ChartBorder;                   //边框信息
-    this.ChartFrame;                    //框架画法
-    this.Name;                          //名称
-    this.ClassName='ScrollBarBGChart';  //类名
-
-    this.SizeChange=true;
-    this.Data;
-
-    this.Color=g_JSChartResource.ScrollBar.BGChart.Color;                       //线段颜色
-    this.LineWidth=g_JSChartResource.ScrollBar.BGChart.LineWidth;                 //线段宽度
-    this.AreaColor=g_JSChartResource.ScrollBar.BGChart.AreaColor;              //面积图颜色
-
-    this.ReloadResource=function(resource)
-    {
-        this.Color=g_JSChartResource.ScrollBar.BGChart.Color;                       //线段颜色
-        this.LineWidth=g_JSChartResource.ScrollBar.BGChart.LineWidth;                 //线段宽度
-        this.AreaColor=g_JSChartResource.ScrollBar.BGChart.AreaColor;              //面积图颜色
-    }
-
-    this.Draw=function()
-    {
-        if (!this.Data || !IFrameSplitOperator.IsNonEmptyArray(this.Data.Data)) return;
-
-        this.Canvas.save();
-        if (this.LineWidth>0) this.Canvas.lineWidth=this.LineWidth * GetDevicePixelRatio();
-
-        var bottom=this.ChartBorder.GetBottom();
-        this.Canvas.strokeStyle=this.Color;
-        var bFirstPoint=true;
-        var drawCount=0,x,y;
-        var firstPoint={ };
-        for(var i=0;i<this.Data.Data.length;++i)
-        {
-            var item=this.Data.Data[i];
-            var value=item.Close;
-            if (!IFrameSplitOperator.IsNumber(value)) continue;
-
-            x=this.ChartFrame.GetXFromIndex(i);
-            y=this.ChartFrame.GetYFromData(value);
-
-            if (bFirstPoint)
-            {
-                this.Canvas.beginPath();
-                this.Canvas.moveTo(x,y);
-                bFirstPoint=false;
-                firstPoint={ X:x, Y:y };
-            }
-            else
-            {
-                this.Canvas.lineTo(x,y);
-            }
-
-            ++drawCount;
-        }
-
-        if (drawCount>0) 
-        {
-            this.Canvas.stroke();
-
-            
-            this.Canvas.lineTo(x,bottom);
-            this.Canvas.lineTo(firstPoint.X,bottom);
-            this.Canvas.closePath();
-
-            this.Canvas.fillStyle=this.AreaColor;
-            this.Canvas.fill();
-            
-        }
-
-
-        this.Canvas.restore();
-    }
-
-    this.GetMaxMin=function()
-    {
-        var range={ Max:null, Min:null };
-        if (!this.Data || !IFrameSplitOperator.IsNonEmptyArray(this.Data.Data)) return range;
-        
-        for(var i=0;i<this.Data.Data.length;++i)
-        {
-            var item=this.Data.Data[i];
-            var value=item.Close;
-
-            if (!IFrameSplitOperator.IsNumber(value)) continue;
-
-            if (range.Max==null || range.Max<value) range.Max=value;
-            if (range.Min==null || range.Min>value) range.Min=value;
-        }
-
-        return range;
-    }
-}
-
-