hqchart
Version:
HQChart - H5, 微信小程序 沪深/港股/数字货币/期货/美股 K线图(kline),走势图,缩放,拖拽,十字光标,画图工具,截图,筹码图. 分析家语法,通达信语法,(麦语法),第3方数据对接
212 lines • 674 kB
JavaScript
"use strict";/*
封装图形控件
*/function JSChart(divElement){this.DivElement=divElement;this.DivToolElement=null;//工具条
this.JSChartContainer;//画图控件
//h5 canvas
this.CanvasElement=document.createElement("canvas");this.CanvasElement.className='jschart-drawing';this.CanvasElement.id=Guid();this.CanvasElement.setAttribute("tabindex",0);if(!divElement.hasChildNodes("canvas")){divElement.appendChild(this.CanvasElement);}//改参数div
this.ModifyIndexDialog=new ModifyIndexDialog(divElement);this.ChangeIndexDialog=new ChangeIndexDialog(divElement);this.MinuteDialog=new MinuteDialog(divElement);this.OnSize=function(){//画布大小通过div获取
var height=parseInt(this.DivElement.style.height.replace("px",""));if(this.ToolElement){//TODO调整工具条大小
height-=this.ToolElement.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;console.log("[JSChart::OnSize] devicePixelRatio="+window.devicePixelRatio+", height="+this.CanvasElement.height+", width="+this.CanvasElement.width);if(this.JSChartContainer&&this.JSChartContainer.Frame)this.JSChartContainer.Frame.SetSizeChage(true);if(this.JSChartContainer)this.JSChartContainer.Draw();};//手机屏需要调整 间距
this.AdjustChartBorder=function(chart){var pixelTatio=GetDevicePixelRatio();//获取设备的分辨率
chart.Frame.ChartBorder.Left*=pixelTatio;chart.Frame.ChartBorder.Right*=pixelTatio;chart.Frame.ChartBorder.Top*=pixelTatio;chart.Frame.ChartBorder.Bottom*=pixelTatio;};this.AdjustTitleHeight=function(chart){var pixelTatio=GetDevicePixelRatio();//获取设备的分辨率
for(var i in chart.Frame.SubFrame){chart.Frame.SubFrame[i].Frame.ChartBorder.TitleHeight*=pixelTatio;}chart.ChartCorssCursor.TextHeight*=pixelTatio;//十字光标文本信息高度
};//历史K线图
this.CreateKLineChartContainer=function(option){var chart=null;if(option.Type==="历史K线图横屏")chart=new KLineChartHScreenContainer(this.CanvasElement);else chart=new KLineChartContainer(this.CanvasElement);//创建改参数div
chart.ModifyIndexDialog=this.ModifyIndexDialog;chart.ChangeIndexDialog=this.ChangeIndexDialog;chart.MinuteDialog=this.MinuteDialog;//右键菜单
if(option.IsShowRightMenu==true)chart.RightMenu=new KLineRightMenu(this.DivElement);if(option.ScriptError)chart.ScriptErrorCallback=option.ScriptError;chart.SelectRectRightMenu=new KLineSelectRightMenu(this.DivElement);if(option.KLine)//k线图的属性设置
{if(option.KLine.DragMode>=0)chart.DragMode=option.KLine.DragMode;if(option.KLine.Right>=0)chart.Right=option.KLine.Right;if(option.KLine.Period>=0)chart.Period=option.KLine.Period;if(option.KLine.MaxReqeustDataCount>0)chart.MaxReqeustDataCount=option.KLine.MaxReqeustDataCount;if(option.KLine.Info&&option.KLine.Info.length>0)chart.SetKLineInfo(option.KLine.Info,false);if(option.KLine.IndexTreeApiUrl)chart.ChangeIndexDialog.IndexTreeApiUrl=option.KLine.IndexTreeApiUrl;if(option.KLine.KLineDoubleClick==false)chart.MinuteDialog=this.MinuteDialog=null;if(option.KLine.IndexTreeApiUrl!=null)chart.ChangeIndexDialog.IndexTreeApiUrl=option.KLine.IndexTreeApiUrl;if(option.KLine.IsShowTooltip==false)chart.IsShowTooltip=false;if(option.KLine.MaxRequestMinuteDayCount>0)chart.MaxRequestMinuteDayCount=option.KLine.MaxRequestMinuteDayCount;if(option.KLine.DrawType)chart.KLineDrawType=option.KLine.DrawType;if(option.KLine.FirstShowDate>20000101)chart.CustomShow={Date:option.KLine.FirstShowDate};}if(option.DrawPicture)//画图工具
{if(option.DrawPicture.StorageKey&&chart.ChartDrawStorage)chart.ChartDrawStorage.Load(option.DrawPicture.StorageKey);}if(!option.Windows||option.Windows.length<=0)return null;//创建子窗口
chart.Create(option.Windows.length);if(option.Border){if(!isNaN(option.Border.Left))chart.Frame.ChartBorder.Left=option.Border.Left;if(!isNaN(option.Border.Right))chart.Frame.ChartBorder.Right=option.Border.Right;if(!isNaN(option.Border.Top))chart.Frame.ChartBorder.Top=option.Border.Top;if(!isNaN(option.Border.Bottom))chart.Frame.ChartBorder.Bottom=option.Border.Bottom;}this.AdjustChartBorder(chart);if(option.KLine){if(option.KLine.PageSize>0)//一屏显示的数据个数
{var pageSize=chart.GetMaxMinPageSize();if(pageSize.Max>10&&pageSize.Max<option.KLine.PageSize)chart.PageSize=pageSize.Max;else if(pageSize.Min>10&&pageSize.Min>option.KLine.PageSize)chart.PageSize=pageSize.Min;else chart.PageSize=option.KLine.PageSize;}}//取消显示十字光标刻度信息
if(option.IsShowCorssCursorInfo==false)chart.ChartCorssCursor.IsShowText=option.IsShowCorssCursorInfo;if(option.IsCorssOnlyDrawKLine===true)chart.ChartCorssCursor.IsOnlyDrawKLine=option.IsCorssOnlyDrawKLine;if(option.CorssCursorTouchEnd===true)chart.CorssCursorTouchEnd=option.CorssCursorTouchEnd;if(option.Frame){for(var i in option.Frame){var item=option.Frame[i];if(!chart.Frame.SubFrame[i])continue;if(item.SplitCount)chart.Frame.SubFrame[i].Frame.YSplitOperator.SplitCount=item.SplitCount;if(item.StringFormat)chart.Frame.SubFrame[i].Frame.YSplitOperator.StringFormat=item.StringFormat;if(!isNaN(item.Height))chart.Frame.SubFrame[i].Height=item.Height;if(item.IsShowLeftText==false)chart.Frame.SubFrame[i].Frame.YSplitOperator.IsShowLeftText=item.IsShowLeftText;//显示左边刻度
if(item.IsShowRightText==false)chart.Frame.SubFrame[i].Frame.YSplitOperator.IsShowRightText=item.IsShowRightText;//显示右边刻度
}}if(option.KLine){if(option.KLine.ShowKLine==false)chart.ChartPaint[0].IsShow=false;}if(option.KLineTitle){if(option.KLineTitle.IsShowName==false)chart.TitlePaint[0].IsShowName=false;if(option.KLineTitle.IsShowSettingInfo==false)chart.TitlePaint[0].IsShowSettingInfo=false;if(option.KLineTitle.IsShow==false)chart.TitlePaint[0].IsShow=false;}//叠加股票
if(option.Overlay&&option.Overlay.length){chart.OverlayChartPaint[0].Symbol=option.Overlay[0].Symbol;}if(option.ExtendChart){for(var i in option.ExtendChart){var item=option.ExtendChart[i];chart.CreateExtendChart(item.Name,item);}}//创建子窗口的指标
var scriptData=new JSIndexScript();if(option.ColorIndex)//五彩K线
{var item=option.ColorIndex;var indexInfo=scriptData.Get(item.Index);if(indexInfo){indexInfo.ID=item.Index;chart.ColorIndex=new ScriptIndex(indexInfo.Name,indexInfo.Script,indexInfo.Args,indexInfo);//脚本执行
}}if(option.TradeIndex)//交易指标
{var item=option.TradeIndex;var _indexInfo=scriptData.Get(item.Index);if(_indexInfo){_indexInfo.ID=item.Index;chart.TradeIndex=new ScriptIndex(_indexInfo.Name,_indexInfo.Script,_indexInfo.Args,_indexInfo);//脚本执行
}}for(var i in option.Windows){var item=option.Windows[i];if(item.Script){chart.WindowIndex[i]=new ScriptIndex(item.Name,item.Script,item.Args,item);//脚本执行
}else if(item.JsonData){chart.WindowIndex[i]=new JsonDataIndex(item.Name,item.Script,item.Args,item);//脚本执行
}else if(item.Local&&item.Local.Data){chart.WindowIndex[i]=new LocalJsonDataIndex(item.Local.Name,item.Local.Args,{JsonData:item.Local.Data});}else{var indexItem=JSIndexMap.Get(item.Index);if(indexItem){chart.WindowIndex[i]=indexItem.Create();chart.CreateWindowIndex(i);}else{var _indexInfo2=scriptData.Get(item.Index);if(!_indexInfo2)continue;if(item.Lock)_indexInfo2.Lock=item.Lock;_indexInfo2.ID=item.Index;chart.WindowIndex[i]=new ScriptIndex(_indexInfo2.Name,_indexInfo2.Script,_indexInfo2.Args,_indexInfo2);//脚本执行
}}if(item.Modify!=null)chart.Frame.SubFrame[i].Frame.ModifyIndex=item.Modify;if(item.Change!=null)chart.Frame.SubFrame[i].Frame.ChangeIndex=item.Change;if(item.Close!=null)chart.Frame.SubFrame[i].Frame.CloseIndex=item.Close;if(item.Overlay!=null)chart.Frame.SubFrame[i].Frame.OverlayIndex=item.Overlay;if(!isNaN(item.TitleHeight))chart.Frame.SubFrame[i].Frame.ChartBorder.TitleHeight=item.TitleHeight;}//叠加指标宽度
if(option.OverlayIndexFrameWidth>40)chart.OverlayIndexFrameWidth=option.OverlayIndexFrameWidth;//叠加指标
for(var i in option.OverlayIndex){var item=option.OverlayIndex[i];if(item.Windows>=chart.Frame.SubFrame.length)continue;chart.CreateOverlayWindowsIndex({WindowIndex:item.Windows,IndexName:item.Index,ShowRightText:item.ShowRightText});}this.AdjustTitleHeight(chart);return chart;};//自定义指数历史K线图
this.CreateCustomKLineChartContainer=function(option){var chart=new CustomKLineChartContainer(this.CanvasElement);//创建改参数div
chart.ModifyIndexDialog=this.ModifyIndexDialog;chart.ChangeIndexDialog=this.ChangeIndexDialog;chart.MinuteDialog=this.MinuteDialog;//右键菜单
if(option.IsShowRightMenu==true)chart.RightMenu=new KLineRightMenu(this.DivElement);if(option.KLine)//k线图的属性设置
{if(option.KLine.DragMode>=0)chart.DragMode=option.KLine.DragMode;if(option.KLine.Right>=0)chart.Right=option.KLine.Right;if(option.KLine.Period>=0)chart.Period=option.KLine.Period;if(option.KLine.MaxReqeustDataCount>0)chart.MaxReqeustDataCount=option.KLine.MaxReqeustDataCount;if(option.KLine.Info&&option.KLine.Info.length>0)chart.SetKLineInfo(option.KLine.Info,false);if(option.KLine.IndexTreeApiUrl)chart.ChangeIndexDialog.IndexTreeApiUrl=option.KLine.IndexTreeApiUrl;if(option.KLine.KLineDoubleClick==false)chart.MinuteDialog=this.MinuteDialog=null;if(option.KLine.IndexTreeApiUrl!=null)chart.ChangeIndexDialog.IndexTreeApiUrl=option.KLine.IndexTreeApiUrl;if(option.KLine.PageSize>0)chart.PageSize=option.KLine.PageSize;if(option.KLine.IsShowTooltip==false)chart.IsShowTooltip=false;}if(option.CustomStock)chart.CustomStock=option.CustomStock;if(option.QueryDate)chart.QueryDate=option.QueryDate;if(!option.Windows||option.Windows.length<=0)return null;//创建子窗口
chart.Create(option.Windows.length);if(option.Border){if(!isNaN(option.Border.Left))chart.Frame.ChartBorder.Left=option.Border.Left;if(!isNaN(option.Border.Right))chart.Frame.ChartBorder.Right=option.Border.Right;if(!isNaN(option.Border.Top))chart.Frame.ChartBorder.Top=option.Border.Top;}if(option.IsShowCorssCursorInfo==false)//取消显示十字光标刻度信息
{chart.ChartCorssCursor.IsShowText=option.IsShowCorssCursorInfo;}if(option.Frame){for(var i in option.Frame){var item=option.Frame[i];if(item.SplitCount)chart.Frame.SubFrame[i].Frame.YSplitOperator.SplitCount=item.SplitCount;if(item.StringFormat)chart.Frame.SubFrame[i].Frame.YSplitOperator.StringFormat=item.StringFormat;}}if(option.KLineTitle){if(option.KLineTitle.IsShowName==false)chart.TitlePaint[0].IsShowName=false;if(option.KLineTitle.IsShowSettingInfo==false)chart.TitlePaint[0].IsShowSettingInfo=false;}//创建子窗口的指标
var scriptData=new JSIndexScript();for(var i in option.Windows){var item=option.Windows[i];if(item.Script){chart.WindowIndex[i]=new ScriptIndex(item.Name,item.Script,item.Args,item);//脚本执行
}else{var indexItem=JSIndexMap.Get(item.Index);if(indexItem){chart.WindowIndex[i]=indexItem.Create();chart.CreateWindowIndex(i);}else{var indexInfo=scriptData.Get(item.Index);if(!indexInfo)continue;if(item.Lock)indexInfo.Lock=item.Lock;chart.WindowIndex[i]=new ScriptIndex(indexInfo.Name,indexInfo.Script,indexInfo.Args,indexInfo);//脚本执行
}}if(item.Modify!=null)chart.Frame.SubFrame[i].Frame.ModifyIndex=item.Modify;if(item.Change!=null)chart.Frame.SubFrame[i].Frame.ChangeIndex=item.Change;if(!isNaN(item.TitleHeight))chart.Frame.SubFrame[i].Frame.ChartBorder.TitleHeight=item.TitleHeight;}return chart;};//分钟走势图
this.CreateMinuteChartContainer=function(option){var chart=null;if(option.Type==="分钟走势图横屏")chart=new MinuteChartHScreenContainer(this.CanvasElement);else chart=new MinuteChartContainer(this.CanvasElement);var windowsCount=2;if(option.Windows&&option.Windows.length>0)windowsCount+=option.Windows.length;//指标窗口从第3个窗口开始
chart.Create(windowsCount);//创建子窗口
if(option.IsShowCorssCursorInfo==false)//取消显示十字光标刻度信息
{chart.ChartCorssCursor.IsShowText=option.IsShowCorssCursorInfo;}if(option.IsShowRightMenu==true)chart.RightMenu=new MinuteRightMenu(this.DivElement);if(option.DayCount>1)chart.DayCount=option.DayCount;if(option.Border){if(!isNaN(option.Border.Left))chart.Frame.ChartBorder.Left=option.Border.Left;if(!isNaN(option.Border.Right))chart.Frame.ChartBorder.Right=option.Border.Right;if(!isNaN(option.Border.Top))chart.Frame.ChartBorder.Top=option.Border.Top;if(!isNaN(option.Border.Bottom))chart.Frame.ChartBorder.Bottom=option.Border.Bottom;}this.AdjustChartBorder(chart);if(option.Frame){for(var i in option.Frame){var item=option.Frame[i];if(!chart.Frame.SubFrame[i])continue;if(item.SplitCount)chart.Frame.SubFrame[i].Frame.YSplitOperator.SplitCount=item.SplitCount;if(item.StringFormat)chart.Frame.SubFrame[i].Frame.YSplitOperator.StringFormat=item.StringFormat;}}//叠加股票
if(option.Overlay&&option.Overlay.length){chart.OverlayChartPaint[0].Symbol=option.Overlay[0].Symbol;}if(option.MinuteLine){if(option.MinuteLine.IsDrawAreaPrice==false)chart.ChartPaint[0].IsDrawArea=false;}if(option.CorssCursorTouchEnd===true)chart.CorssCursorTouchEnd=option.CorssCursorTouchEnd;if(option.IsShowBeforeData===true)chart.IsShowBeforeData=option.IsShowBeforeData;//分钟数据指标从第3个指标窗口设置
var scriptData=new JSIndexScript();for(var i in option.Windows){var item=option.Windows[i];if(item.Script){chart.WindowIndex[2+parseInt(i)]=new ScriptIndex(item.Name,item.Script,item.Args);//脚本执行
}else{var indexItem=JSIndexMap.Get(item.Index);if(indexItem){chart.WindowIndex[2+parseInt(i)]=indexItem.Create();//创建子窗口的指标
chart.CreateWindowIndex(2+parseInt(i));}else{var indexInfo=scriptData.Get(item.Index);if(!indexInfo)continue;indexInfo.ID=item.Index;chart.WindowIndex[2+parseInt(i)]=new ScriptIndex(indexInfo.Name,indexInfo.Script,indexInfo.Args,indexInfo);//脚本执行
}}if(!isNaN(item.TitleHeight))chart.Frame.SubFrame[2+parseInt(i)].Frame.ChartBorder.TitleHeight=item.TitleHeight;}this.AdjustTitleHeight(chart);if(option.Function){var func=option.Function;if(func.RequestMinuteData)chart.RequestMinuteData=func.RequestMinuteData;if(func.RecvMinuteData)chart.RecvMinuteData=func.RecvMinuteData;}return chart;};//历史分钟走势图
this.CreateHistoryMinuteChartContainer=function(option){var chart=new HistoryMinuteChartContainer(this.CanvasElement);var windowsCount=2;if(option.Windows&&option.Windows.length>0)windowsCount+=option.Windows.length;//指标窗口从第3个窗口开始
chart.Create(windowsCount);//创建子窗口
if(option.IsShowCorssCursorInfo==false)//取消显示十字光标刻度信息
{chart.ChartCorssCursor.IsShowText=option.IsShowCorssCursorInfo;}if(option.Border){if(!isNaN(option.Border.Left))chart.Frame.ChartBorder.Left=option.Border.Left;if(!isNaN(option.Border.Right))chart.Frame.ChartBorder.Right=option.Border.Right;if(!isNaN(option.Border.Top))chart.Frame.ChartBorder.Top=option.Border.Top;if(!isNaN(option.Border.Bottom))chart.Frame.ChartBorder.Bottom=option.Border.Bottom;}var scriptData=new JSIndexScript();for(var i in option.Windows){var item=option.Windows[i];if(item.Script){chart.WindowIndex[2+parseInt(i)]=new ScriptIndex(item.Name,item.Script,item.Args);//脚本执行
}else{var indexItem=JSIndexMap.Get(item.Index);if(indexItem){chart.WindowIndex[2+parseInt(i)]=indexItem.Create();//创建子窗口的指标
chart.CreateWindowIndex(2+parseInt(i));}else{var indexInfo=scriptData.Get(item.Index);if(!indexInfo)continue;chart.WindowIndex[2+parseInt(i)]=new ScriptIndex(indexInfo.Name,indexInfo.Script,indexInfo.Args);//脚本执行
}}if(!isNaN(item.TitleHeight))chart.Frame.SubFrame[2+parseInt(i)].Frame.ChartBorder.TitleHeight=item.TitleHeight;}chart.TradeDate=20181009;if(option.HistoryMinute.TradeDate)chart.TradeDate=option.HistoryMinute.TradeDate;if(option.HistoryMinute.IsShowName!=null)chart.TitlePaint[0].IsShowName=option.HistoryMinute.IsShowName;//动态标题是否显示股票名称
if(option.HistoryMinute.IsShowDate!=null)chart.TitlePaint[0].IsShowDate=option.HistoryMinute.IsShowDate;//动态标题是否显示日期
return chart;};this.CreateKLineTrainChartContainer=function(option){var bHScreen=option.Type=='K线训练横屏'?true:false;var chart=new KLineTrainChartContainer(this.CanvasElement,bHScreen);//创建改参数div
chart.ModifyIndexDialog=this.ModifyIndexDialog;chart.ChangeIndexDialog=this.ChangeIndexDialog;if(option.ScriptError)chart.ScriptErrorCallback=option.ScriptError;if(option.KLine)//k线图的属性设置
{if(option.KLine.Right>=0)chart.Right=option.KLine.Right;if(option.KLine.Period>=0)chart.Period=option.KLine.Period;if(option.KLine.MaxReqeustDataCount>0)chart.MaxReqeustDataCount=option.KLine.MaxReqeustDataCount;if(option.KLine.Info&&option.KLine.Info.length>0)chart.SetKLineInfo(option.KLine.Info,false);if(option.KLine.PageSize>0)chart.PageSize=option.KLine.PageSize;if(option.KLine.IsShowTooltip==false)chart.IsShowTooltip=false;if(option.KLine.MaxRequestMinuteDayCount>0)chart.MaxRequestMinuteDayCount=option.KLine.MaxRequestMinuteDayCount;if(option.KLine.DrawType)chart.KLineDrawType=option.KLine.DrawType;}if(option.Train){if(option.Train.DataCount)chart.TrainDataCount=option.Train.DataCount;if(option.Train.Callback)chart.TrainCallback=option.Train.Callback;}if(!option.Windows||option.Windows.length<=0)return null;//创建子窗口
chart.Create(option.Windows.length);if(option.Border){if(!isNaN(option.Border.Left))chart.Frame.ChartBorder.Left=option.Border.Left;if(!isNaN(option.Border.Right))chart.Frame.ChartBorder.Right=option.Border.Right;if(!isNaN(option.Border.Top))chart.Frame.ChartBorder.Top=option.Border.Top;if(!isNaN(option.Border.Bottom))chart.Frame.ChartBorder.Bottom=option.Border.Bottom;}this.AdjustChartBorder(chart);if(option.IsShowCorssCursorInfo==false)//取消显示十字光标刻度信息
{chart.ChartCorssCursor.IsShowText=option.IsShowCorssCursorInfo;}if(option.Frame){for(var i in option.Frame){var item=option.Frame[i];if(!chart.Frame.SubFrame[i])continue;if(item.SplitCount)chart.Frame.SubFrame[i].Frame.YSplitOperator.SplitCount=item.SplitCount;if(item.StringFormat)chart.Frame.SubFrame[i].Frame.YSplitOperator.StringFormat=item.StringFormat;if(item.IsShowLeftText==false)chart.Frame.SubFrame[i].Frame.YSplitOperator.IsShowLeftText=item.IsShowLeftText;//显示左边刻度
if(item.IsShowRightText==false)chart.Frame.SubFrame[i].Frame.YSplitOperator.IsShowRightText=item.IsShowRightText;//显示右边刻度
}}//股票名称 日期 周期都不显示
chart.TitlePaint[0].IsShowName=false;chart.TitlePaint[0].IsShowSettingInfo=false;chart.TitlePaint[0].IsShowDateTime=false;//创建子窗口的指标
var scriptData=new JSIndexScript();for(var i in option.Windows){var item=option.Windows[i];if(item.Script){chart.WindowIndex[i]=new ScriptIndex(item.Name,item.Script,item.Args,item);//脚本执行
}else{var indexItem=JSIndexMap.Get(item.Index);if(indexItem){chart.WindowIndex[i]=indexItem.Create();chart.CreateWindowIndex(i);}else{var indexInfo=scriptData.Get(item.Index);if(!indexInfo)continue;if(item.Lock)indexInfo.Lock=item.Lock;chart.WindowIndex[i]=new ScriptIndex(indexInfo.Name,indexInfo.Script,indexInfo.Args,indexInfo);//脚本执行
}}if(item.Modify!=null)chart.Frame.SubFrame[i].Frame.ModifyIndex=item.Modify;if(item.Change!=null)chart.Frame.SubFrame[i].Frame.ChangeIndex=item.Change;if(item.Close!=null)chart.Frame.SubFrame[i].Frame.CloseIndex=item.Close;if(!isNaN(item.TitleHeight))chart.Frame.SubFrame[i].Frame.ChartBorder.TitleHeight=item.TitleHeight;}this.AdjustTitleHeight(chart);return chart;};//根据option内容绘制图形
this.SetOption=function(option){var chart=null;switch(option.Type){case"历史K线图":case'历史K线图横屏':chart=this.CreateKLineChartContainer(option);break;case"自定义指数历史K线图":chart=this.CreateCustomKLineChartContainer(option);break;case"分钟走势图":case"分钟走势图横屏":chart=this.CreateMinuteChartContainer(option);break;case"历史分钟走势图":chart=this.CreateHistoryMinuteChartContainer(option);break;case'K线训练':case'K线训练横屏':chart=this.CreateKLineTrainChartContainer(option);break;case"简单图形":return this.CreateSimpleChart(option);case"饼图":case'雷达图':return this.CreatePieChart(option);case'地图':return this.CreateMapChart(option);default:return false;}if(!chart)return false;//是否自动更新
if(option.IsAutoUpdate!=null)chart.IsAutoUpdate=option.IsAutoUpdate;//设置股票代码
if(!option.Symbol)return false;chart.Draw();chart.ChangeSymbol(option.Symbol);this.JSChartContainer=chart;this.DivElement.JSChart=this;//div中保存一份
this.JSChartContainer.Draw();};this.CreateSimpleChart=function(option){var chart=new SimlpleChartContainer(this.CanvasElement);if(option.MainDataControl)chart.MainDataControl=option.MainDataControl;chart.Create();if(option.Border)//边框设置
{if(!isNaN(option.Border.Left))chart.Frame.ChartBorder.Left=option.Border.Left;if(!isNaN(option.Border.Right))chart.Frame.ChartBorder.Right=option.Border.Right;if(!isNaN(option.Border.Top))chart.Frame.ChartBorder.Top=option.Border.Top;}chart.Draw();chart.RequestData();this.JSChartContainer=chart;this.DivElement.JSChart=this;//div中保存一份
this.JSChartContainer.Draw();};//创建饼图
this.CreatePieChart=function(option){var chart=new PieChartContainer(this.CanvasElement);if(option.MainDataControl)chart.MainDataControl=option.MainDataControl;if(option.Radius)chart.Radius=option.Radius;chart.Create();if(option.Border)//边框设置
{if(!isNaN(option.Border.Left))chart.Frame.ChartBorder.Left=option.Border.Left;if(!isNaN(option.Border.Right))chart.Frame.ChartBorder.Right=option.Border.Right;if(!isNaN(option.Border.Top))chart.Frame.ChartBorder.Top=option.Border.Top;}this.AdjustChartBorder(chart);if(option.Frame){if(option.Frame[0].IsShowBorder==false)chart.Frame.IsShowBorder=option.Frame[0].IsShowBorder;}chart.Draw();chart.RequestData();this.JSChartContainer=chart;this.DivElement.JSChart=this;//div中保存一份
this.JSChartContainer.Draw();};this.CreateMapChart=function(option){var chart=new MapChartContainer(this.CanvasElement);if(option.MainDataControl)chart.MainDataControl=option.MainDataControl;chart.Create();if(option.Border)//边框设置
{if(!isNaN(option.Border.Left))chart.Frame.ChartBorder.Left=option.Border.Left;if(!isNaN(option.Border.Right))chart.Frame.ChartBorder.Right=option.Border.Right;if(!isNaN(option.Border.Top))chart.Frame.ChartBorder.Top=option.Border.Top;}chart.Draw();chart.RequestData();this.JSChartContainer=chart;this.DivElement.JSChart=this;//div中保存一份
this.JSChartContainer.Draw();};//创建工具条
this.CreateToolbar=function(option){};//创建设置div窗口
this.CreateSettingDiv=function(option){};this.Focus=function(){if(this.CanvasElement)this.CanvasElement.focus();};//切换股票代码接口
this.ChangeSymbol=function(symbol){if(this.JSChartContainer)this.JSChartContainer.ChangeSymbol(symbol);};//K线切换指标
this.ChangeIndex=function(windowIndex,indexName){if(this.JSChartContainer&&typeof this.JSChartContainer.ChangeIndex=='function')this.JSChartContainer.ChangeIndex(windowIndex,indexName);};this.ChangeScriptIndex=function(windowIndex,indexData){if(this.JSChartContainer&&typeof this.JSChartContainer.ChangeScriptIndex=='function')this.JSChartContainer.ChangeScriptIndex(windowIndex,indexData);};this.ChangePyScriptIndex=function(windowIndex,indexData)//切换py指标
{if(this.JSChartContainer&&typeof this.JSChartContainer.ChangePyScriptIndex=='function')this.JSChartContainer.ChangePyScriptIndex(windowIndex,indexData);};this.GetIndexInfo=function(){if(this.JSChartContainer&&typeof this.JSChartContainer.GetIndexInfo=='function')return this.JSChartContainer.GetIndexInfo();else return[];};this.ChangeInstructionIndex=function(indexName){if(this.JSChartContainer&&typeof this.JSChartContainer.ChangeInstructionIndex=='function')this.JSChartContainer.ChangeInstructionIndex(indexName);};this.ChangeInstructionScriptIndex=function(indexData){if(this.JSChartContainer&&typeof this.JSChartContainer.ChangeInstructionIndex=='function')this.JSChartContainer.ChangeInstructionScriptIndex(indexData);};this.CancelInstructionIndex=function(){if(this.JSChartContainer&&typeof this.JSChartContainer.CancelInstructionIndex=='function')this.JSChartContainer.CancelInstructionIndex();};//K线周期切换
this.ChangePeriod=function(period){if(this.JSChartContainer&&typeof this.JSChartContainer.ChangePeriod=='function')this.JSChartContainer.ChangePeriod(period);};//K线复权切换
this.ChangeRight=function(right){if(this.JSChartContainer&&typeof this.JSChartContainer.ChangeRight=='function')this.JSChartContainer.ChangeRight(right);};//叠加股票
this.OverlaySymbol=function(symbol){if(this.JSChartContainer&&typeof this.JSChartContainer.OverlaySymbol=='function')this.JSChartContainer.OverlaySymbol(symbol);};//设置当前屏的起始日期 { Date:起始日期(必填), PageSize:一屏显示的数据个数(可选)}
this.SetFirstShowDate=function(obj){if(this.JSChartContainer&&typeof this.JSChartContainer.SetFirstShowDate=='function')this.JSChartContainer.SetFirstShowDate(obj);};//K线切换类型 0=实心K线 1=收盘价线 2=美国线 3=空心K线
this.ChangeKLineDrawType=function(drawType){if(this.JSChartContainer&&typeof this.JSChartContainer.ChangeKLineDrawType=='function')this.JSChartContainer.ChangeKLineDrawType(drawType);};//指标窗口个数
this.ChangeIndexWindowCount=function(count){if(this.JSChartContainer&&typeof this.JSChartContainer.ChangeIndexWindowCount=='function'){this.JSChartContainer.ChangeIndexWindowCount(count);}};//取消叠加
this.ClearOverlaySymbol=function(){if(this.JSChartContainer&&typeof this.JSChartContainer.ClearOverlaySymbol=='function'){this.JSChartContainer.ClearOverlaySymbol();}};this.DeleteKLineInfo=function(infoName){if(this.JSChartContainer&&typeof this.JSChartContainer.DeleteKLineInfo=='function'){this.JSChartContainer.DeleteKLineInfo(infoName);}};this.ClearKLineInfo=function(){if(this.JSChartContainer&&typeof this.JSChartContainer.ClearKLineInfo=='function'){this.JSChartContainer.ClearKLineInfo();}};this.AddKLineInfo=function(infoName,bUpdate){if(this.JSChartContainer&&typeof this.JSChartContainer.AddKLineInfo=='function'){this.JSChartContainer.AddKLineInfo(infoName,bUpdate);}};this.ChangMainDataControl=function(dataControl){if(this.JSChartContainer&&typeof this.JSChartContainer.SetMainDataConotrl=='function')this.JSChartContainer.SetMainDataConotrl(dataControl);};this.AddOverlayIndex=function(obj)//{WindowIndex:窗口ID, IndexName:指标ID, Identify:叠加指标ID(可选)}
{if(this.JSChartContainer&&typeof this.JSChartContainer.AddOverlayIndex=='function')this.JSChartContainer.AddOverlayIndex(obj);};this.DeleteOverlayWindowsIndex=function(identify){if(this.JSChartContainer&&typeof this.JSChartContainer.DeleteOverlayWindowsIndex=='function')this.JSChartContainer.DeleteOverlayWindowsIndex(identify);};//设置强制横屏
this.ForceLandscape=function(bForceLandscape){if(this.JSChartContainer){console.log("[JSChart::ForceLandscape] bForceLandscape="+bForceLandscape);this.JSChartContainer.IsForceLandscape=bForceLandscape;}};//锁指标
this.LockIndex=function(lockData){if(this.JSChartContainer&&typeof this.JSChartContainer.LockIndex=='function'){console.log('[JSChart:LockIndex] lockData',lockData);this.JSChartContainer.LockIndex(lockData);}};//历史分钟数据 更改日期
this.ChangeTradeDate=function(tradeDate){if(this.JSChartContainer&&typeof this.JSChartContainer.ChangeTradeDate=='function'){console.log('[JSChart:ChangeTradeDate] date',tradeDate);this.JSChartContainer.ChangeTradeDate(tradeDate);}};//多日走势图
this.ChangeDayCount=function(count){if(this.JSChartContainer&&typeof this.JSChartContainer.ChangeDayCount=='function'){console.log('[JSChart:ChangeDayCount] count',count);this.JSChartContainer.ChangeDayCount(count);}};//返回弹幕数据类
this.StartAnimation=function(option){if(this.JSChartContainer&&typeof this.JSChartContainer.StartAnimation=='function'){console.log('[JSChart:StartAnimation] start.');return this.JSChartContainer.StartAnimation(option);}};this.StopAnimation=function(){if(this.JSChartContainer&&typeof this.JSChartContainer.StopAnimation=='function'){console.log('[JSChart:StopAnimation] start.');return this.JSChartContainer.StopAnimation();}};this.SaveToImage=function(format,colorGB)//format=保存的文件格式, colorGB=背景色
{if(this.JSChartContainer&&typeof this.JSChartContainer.SaveToImage=='function')return this.JSChartContainer.SaveToImage(format,colorGB);};//事件回调
this.AddEventCallback=function(obj){if(this.JSChartContainer&&typeof this.JSChartContainer.AddEventCallback=='function'){console.log('[JSChart:AddEventCallback] ',obj);this.JSChartContainer.AddEventCallback(obj);}};}//初始化
JSChart.Init=function(divElement){var jsChartControl=new JSChart(divElement);jsChartControl.OnSize();return jsChartControl;};JSChart.SetDomain=function(domain,cacheDomain){if(domain)g_JSChartResource.Domain=domain;if(cacheDomain)g_JSChartResource.CacheDomain=cacheDomain;};JSChart.SetPyIndexDomain=function(domain)//设置py指标计算api域名
{if(domain)g_JSChartResource.PyIndexDomain=domain;};//自定义风格
JSChart.SetStyle=function(option){if(option)g_JSChartResource.SetStyle(option);};//获取设备分辨率比
JSChart.GetDevicePixelRatio=function(){return GetDevicePixelRatio();};JSChart.CreateGuid=function(){return Guid();};var JSCHART_EVENT_ID={RECV_KLINE_MATCH:1,//接收到形态匹配
RECV_INDEX_DATA:2,//接收指标数据
RECV_HISTROY_DATA:3,//接收到历史数据
RECV_TRAIN_MOVE_STEP:4,//接收K线训练,移动一次K线
CHART_STATUS:5,//每次Draw() 以后会调用
BARRAGE_PLAY_END:6,//单个弹幕播放完成
RECV_OVERLAY_INDEX_DATA:7//接收叠加指标数据
};var JSCHART_OPERATOR_ID={OP_SCROLL_LEFT:1,OP_SCROLL_RIGHT:2,OP_ZOOM_OUT:3,//缩小
OP_ZOOM_IN:4,//放大
OP_GOTO_HOME:5//第1页数据
/*
图形控件
*/};function JSChartContainer(uielement){this.ClassName='JSChartContainer';var _self=this;this.Frame;//框架画法
this.ChartPaint=new Array();//图形画法
this.ChartPaintEx=[];//图形扩展画法
this.ChartInfo=new Array();//K线上信息地雷
this.ExtendChartPaint=new Array();//扩展画法
this.TitlePaint=new Array();//标题画法
this.OverlayChartPaint=new Array();//叠加信息画法
this.ChartDrawPicture=new Array();//画图工具
this.ChartDrawStorage;//画图工具保存
this.CurrentChartDrawPicture=null;//当前的画图工具
this.SelectChartDrawPicture=null;//当前选中的画图
this.ChartCorssCursor;//十字光标
this.ChartSplashPaint=null;//等待提示
this.Canvas=uielement.getContext("2d");//画布
this.UIElement=uielement;this.MouseDrag;this.DragMode=1;//拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择
this.CursorIndex=0;//十字光标X轴索引
this.LastPoint=new Point();//鼠标位置
this.IsForceLandscape=false;//是否强制横屏
this.CorssCursorTouchEnd=false;//手离开屏幕自动隐藏十字光标
this.StepPixel=4;//移动一个数据需要的像素
this.EnableAnimation=false;//是否开启动画
//tooltip提示信息
this.Tooltip=document.createElement("div");this.Tooltip.className='jschart-tooltip';this.Tooltip.style.background=g_JSChartResource.TooltipBGColor;this.Tooltip.style.opacity=g_JSChartResource.TooltipAlpha;this.Tooltip.id=Guid();uielement.parentNode.appendChild(this.Tooltip);this.IsShowTooltip=true;//是否显示K线tooltip
//区间选择
this.SelectRect=document.createElement("div");this.SelectRect.className="jschart-selectrect";this.SelectRect.style.background=g_JSChartResource.SelectRectBGColor;//this.SelectRect.style.opacity=g_JSChartResource.SelectRectAlpha;
this.SelectRect.id=Guid();uielement.parentNode.appendChild(this.SelectRect);//区间选择右键菜单
this.SelectRectRightMenu;//坐标轴风格方法 double-更加数值型分割 price-更加股票价格分割
this.FrameSplitData=new Map();this.FrameSplitData.set("double",new SplitData());this.FrameSplitData.set("price",new PriceSplitData());//事件回调
this.mapEvent=new Map();//通知外部调用 key:JSCHART_EVENT_ID value:{Callback:回调,}
this.IsOnTouch=false;//是否再操作数据
//设置事件回调
//{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.GetIndexEvent=function(){return this.GetEventCallback(JSCHART_EVENT_ID.RECV_INDEX_DATA);};this.GetOverlayIndexEvent=function(){return this.GetEventCallback(JSCHART_EVENT_ID.RECV_OVERLAY_INDEX_DATA);};uielement.onmousemove=function(e){var pixelTatio=GetDevicePixelRatio();//鼠标移动坐标是原始坐标 需要乘以放大倍速
var x=(e.clientX-this.getBoundingClientRect().left)*pixelTatio;var y=(e.clientY-this.getBoundingClientRect().top)*pixelTatio;//加载数据中,禁用鼠标事件
if(this.JSChartContainer.ChartSplashPaint&&this.JSChartContainer.ChartSplashPaint.IsEnableSplash==true)return;if(this.JSChartContainer)this.JSChartContainer.OnMouseMove(x,y,e);};uielement.oncontextmenu=function(e){var x=e.clientX-this.getBoundingClientRect().left;var y=e.clientY-this.getBoundingClientRect().top;if(this.JSChartContainer&&typeof this.JSChartContainer.OnRightMenu=='function')this.JSChartContainer.OnRightMenu(x,y,e);//右键菜单事件
return false;};uielement.onmousedown=function(e){if(!this.JSChartContainer)return;if(this.JSChartContainer.DragMode==0)return;this.JSChartContainer.IsOnTouch=true;if(this.JSChartContainer.TryClickLock){var x=e.clientX-this.getBoundingClientRect().left;var y=e.clientY-this.getBoundingClientRect().top;if(this.JSChartContainer.TryClickLock(x,y))return;}this.JSChartContainer.HideSelectRect();if(this.JSChartContainer.SelectRectRightMenu)this.JSChartContainer.SelectRectRightMenu.Hide();if(this.JSChartContainer.ChartPictureMenu)this.JSChartContainer.ChartPictureMenu.Hide();var drag={"Click":{},"LastMove":{}//最后移动的位置
};drag.Click.X=e.clientX;drag.Click.Y=e.clientY;drag.LastMove.X=e.clientX;drag.LastMove.Y=e.clientY;this.JSChartContainer.MouseDrag=drag;document.JSChartContainer=this.JSChartContainer;this.JSChartContainer.SelectChartDrawPicture=null;if(this.JSChartContainer.CurrentChartDrawPicture)//画图工具模式
{var drawPicture=this.JSChartContainer.CurrentChartDrawPicture;if(drawPicture.Status==2)this.JSChartContainer.SetChartDrawPictureThirdPoint(drag.Click.X,drag.Click.Y);else{this.JSChartContainer.SetChartDrawPictureFirstPoint(drag.Click.X,drag.Click.Y);//只有1个点 直接完成
if(this.JSChartContainer.FinishChartDrawPicturePoint())this.JSChartContainer.DrawDynamicInfo();}}else//是否在画图工具上
{var drawPictrueData={};drawPictrueData.X=e.clientX-this.getBoundingClientRect().left;drawPictrueData.Y=e.clientY-this.getBoundingClientRect().top;if(this.JSChartContainer.GetChartDrawPictureByPoint(drawPictrueData)){drawPictrueData.ChartDrawPicture.Status=20;drawPictrueData.ChartDrawPicture.ValueToPoint();drawPictrueData.ChartDrawPicture.MovePointIndex=drawPictrueData.PointIndex;this.JSChartContainer.CurrentChartDrawPicture=drawPictrueData.ChartDrawPicture;this.JSChartContainer.SelectChartDrawPicture=drawPictrueData.ChartDrawPicture;this.JSChartContainer.OnSelectChartPicture(drawPictrueData.ChartDrawPicture);//选中画图工具事件
}}uielement.ondblclick=function(e){var x=e.clientX-this.getBoundingClientRect().left;var y=e.clientY-this.getBoundingClientRect().top;if(this.JSChartContainer)this.JSChartContainer.OnDoubleClick(x,y,e);};document.onmousemove=function(e){if(!this.JSChartContainer)return;//加载数据中,禁用鼠标事件
if(this.JSChartContainer.ChartSplashPaint&&this.JSChartContainer.ChartSplashPaint.IsEnableSplash==true)return;var drag=this.JSChartContainer.MouseDrag;if(!drag)return;var moveSetp=Math.abs(drag.LastMove.X-e.clientX);if(this.JSChartContainer.CurrentChartDrawPicture){var drawPicture=this.JSChartContainer.CurrentChartDrawPicture;if(drawPicture.Status==1||drawPicture.Status==2){if(Math.abs(drag.LastMove.X-e.clientX)<5&&Math.abs(drag.LastMove.Y-e.clientY)<5)return;if(this.JSChartContainer.SetChartDrawPictureSecondPoint(e.clientX,e.clientY)){this.JSChartContainer.DrawDynamicInfo();}}else if(drawPicture.Status==3){if(this.JSChartContainer.SetChartDrawPictureThirdPoint(e.clientX,e.clientY)){this.JSChartContainer.DrawDynamicInfo();}}else if(drawPicture.Status==20)//画图工具移动
{if(Math.abs(drag.LastMove.X-e.clientX)<5&&Math.abs(drag.LastMove.Y-e.clientY)<5)return;if(this.JSChartContainer.MoveChartDrawPicture(e.clientX-drag.LastMove.X,e.clientY-drag.LastMove.Y)){this.JSChartContainer.DrawDynamicInfo();}}drag.LastMove.X=e.clientX;drag.LastMove.Y=e.clientY;}else if(this.JSChartContainer.DragMode==1)//数据左右拖拽
{if(moveSetp<5)return;var isLeft=true;if(drag.LastMove.X<e.clientX)isLeft=false;//右移数据
this.JSChartContainer.UIElement.style.cursor="pointer";if(this.JSChartContainer.DataMove(moveSetp,isLeft)){this.JSChartContainer.UpdataDataoffset();this.JSChartContainer.UpdatePointByCursorIndex();this.JSChartContainer.UpdateFrameMaxMin();this.JSChartContainer.ResetFrameXYSplit();this.JSChartContainer.Draw();}drag.LastMove.X=e.clientX;drag.LastMove.Y=e.clientY;}else if(this.JSChartContainer.DragMode==2)//区间选择
{var yMoveSetp=Math.abs(drag.LastMove.Y-e.clientY);if(moveSetp<5&&yMoveSetp<5)return;var x=drag.Click.X-uielement.getBoundingClientRect().left;var y=drag.Click.Y-uielement.getBoundingClientRect().top;var x2=e.clientX-uielement.getBoundingClientRect().left;var y2=e.clientY-uielement.getBoundingClientRect().top;this.JSChartContainer.ShowSelectRect(x,y,x2,y2);drag.LastMove.X=e.clientX;drag.LastMove.Y=e.clientY;}};document.onmouseup=function(e){//清空事件
document.onmousemove=null;document.onmouseup=null;var bClearDrawPicture=true;if(this.JSChartContainer&&this.JSChartContainer.CurrentChartDrawPicture){var drawPicture=this.JSChartContainer.CurrentChartDrawPicture;if(drawPicture.Status==2||drawPicture.Status==1||drawPicture.Status==3){drawPicture.PointStatus=drawPicture.Status;if(this.JSChartContainer.FinishChartDrawPicturePoint())this.JSChartContainer.DrawDynamicInfo();else bClearDrawPicture=false;}else if(drawPicture.Status==20){if(this.JSChartContainer.FinishMoveChartDrawPicture())this.JSChartContainer.DrawDynamicInfo();}}else if(this.JSChartContainer&&this.JSChartContainer.DragMode==2)//区间选择
{var drag=this.JSChartContainer.MouseDrag;var selectData=new SelectRectData();//区间起始位置 结束位子
selectData.XStart=drag.Click.X-uielement.getBoundingClientRect().left;selectData.XEnd=drag.LastMove.X-uielement.getBoundingClientRect().left;selectData.JSChartContainer=this.JSChartContainer;selectData.Stock={Symbol:this.JSChartContainer.Symbol,Name:this.JSChartContainer.Name};if(this.JSChartContainer.GetSelectRectData(selectData)){if(this.JSChartContainer.SelectRectRightMenu){e.data={Chart:this.JSChartContainer,X:drag.LastMove.X-uielement.getBoundingClientRect().left,Y:drag.LastMove.Y-uielement.getBoundingClientRect().top,SelectData:selectData//区间选择的数据
};this.JSChartContainer.SelectRectRightMenu.DoModal(e);}}}//清空数据
console.log('[KLineChartContainer::document.onmouseup]',e);this.JSChartContainer.UIElement.style.cursor="default";this.JSChartContainer.MouseDrag=null;this.JSChartContainer.IsOnTouch=false;if(bClearDrawPicture===true)this.JSChartContainer.CurrentChartDrawPicture=null;this.JSChartContainer=null;};};//判断是单个手指
this.IsPhoneDragging=function(e){// console.log(e);
var changed=e.changedTouches.length;var touching=e.touches.length;return changed==1&&touching==1;};//是否是2个手指操所
this.IsPhonePinching=function(e){var changed=e.changedTouches.length;var touching=e.touches.length;return(changed==1||changed==2)&&touching==2;};this.GetToucheData=function(e,isForceLandscape){var touches=new Array();var pixelTatio=GetDevicePixelRatio();//获取设备的分辨率
for(var i=0;i<e.touches.length;++i){var item=e.touches[i];if(isForceLandscape){touches.push({clientX:item.clientY*pixelTatio,clientY:item.clientX*pixelTatio,pageX:item.pageY*pixelTatio,pageY:item.pageX*pixelTatio});}else{touches.push({clientX:item.clientX*pixelTatio,clientY:item.clientY*pixelTatio,pageX:item.pageX*pixelTatio,pageY:item.pageY*pixelTatio});}}return touches;};//手机拖拽
uielement.ontouchstart=function(e){if(!this.JSChartContainer)return;if(this.JSChartContainer.DragMode==0)return;this.JSChartContainer.IsOnTouch=true;this.JSChartContainer.PhonePinch=null;e.preventDefault();var jsChart=this.JSChartContainer;if(jsChart.IsPhoneDragging(e)){if(jsChart.TryClickLock)//指标枷锁区域
{var touches=jsChart.GetToucheData(e,jsChart.IsForceLandscape);var x=touches[0].clientX;var y=touches[0].clientY;if(jsChart.TryClickLock(x,y))return;}//长按2秒,十字光标
var timeout=setTimeout(function(){if(drag.Click.X==drag.LastMove.X&&drag.Click.Y==drag.LastMove.Y)//手指没有移动，出现十字光标
{var mouseDrag=jsChart.MouseDrag;jsChart.MouseDrag=null;//移动十字光标
var pixelTatio=GetDevicePixelRatio();var x=drag.Click.X-uielement.getBoundingClientRect().left*pixelTatio;var y=drag.Click.Y-uielement.getBoundingClientRect().top*pixelTatio;jsChart.OnMouseMove(x,y,e);}},1000);var drag={"Click":{},"LastMove":{}//最后移动的位置
};var touches=jsChart.GetToucheData(e,jsChart.IsForceLandscape);drag.Click.X=touches[0].clientX;drag.Click.Y=touches[0].clientY;drag.LastMove.X=touches[0].clientX;drag.LastMove.Y=touches[0].clientY;this.JSChartContainer.MouseDrag=drag;document.JSChartContainer=this.JSChartContainer;this.JSChartContainer.SelectChartDrawPicture=null;if(this.JSChartContainer.CurrentChartDrawPicture)//画图工具模式
{return;}}else if(jsChart.IsPhonePinching(e)){var phonePinch={"Start":{},"Last":{}};var touches=jsChart.GetToucheData(e,jsChart.IsForceLandscape);phonePinch.Start={"X":touches[0].pageX,"Y":touches[0].pageY,"X2":touches[1].pageX,"Y2":touches[1].pageY};phonePinch.Last={"X":touches[0].pageX,"Y":touches[0].pageY,"X2":touches[1].pageX,"Y2":touches[1].pageY};this.JSChartContainer.PhonePinch=phonePinch;document.JSChartContainer=this.JSChartContainer;this.JSChartContainer.SelectChartDrawPicture=null;}uielement.ontouchmove=function(e){if(!this.JSChartContainer)return;e.preventDefault();var touches=jsChart.GetToucheData(e,this.JSChartContainer.IsForceLandscape);if(jsChart.IsPhoneDragging(e)){var drag=this.JSChartContainer.MouseDrag;if(drag==null){var pixelTatio=GetDevicePixelRatio();var x=touches[0].clientX-this.getBoundingClientRect().left*pixelTatio;var y=touches[0].clientY-this.getBoundingClientRect().top*pixelTatio;if(this.JSChartContainer.IsForceLandscape)y=this.getBoundingClientRect().width-touches[0].clientY;//强制横屏Y计算
this.JSChartContainer.OnMouseMove(x,y,e);}else{var moveSetp=Math.abs(drag.LastMove.X-touches[0].clientX);moveSetp=parseInt(moveSetp);if(this.JSChartContainer.DragMode==1)//数据左右拖拽
{if(moveSetp<5)return;var isLeft=true;if(drag.LastMove.X<touches[0].clientX)isLeft=false;//右移数据
if(this.JSChartContainer.DataMove(moveSetp,isLeft)){this.JSChartContainer.UpdataDataoffset();this.JSChartContainer.UpdatePointByCursorIndex();this.JSChartContainer.UpdateFrameMaxMin();this.JSChartContainer.ResetFrameXYSplit();this.JSChartContainer.Draw();}drag.LastMove.X=touches[0].clientX;drag.LastMove.Y=touches[0].clientY;}}}else if(jsChart.IsPhonePinching(e)){var phonePinch=this.JSChartContainer.PhonePinch;if(!phonePinch)return;var yHeight=Math.abs(touches[0].pageY-touches[1].pageY);var yLastHeight=Math.abs(phonePinch.Last.Y-phonePinch.Last.Y2);var yStep=yHeight-yLastHeight;if(Math.abs(yStep)<5)return;if(yStep>0)//放大
{var cursorIndex={};cursorIndex.Index=parseInt(Math.abs(this.JSChartContainer.CursorIndex-0.5).toFixed(0));if(!this.JSChartContainer.Frame.ZoomUp(cursorIndex))return;this.JSChartContainer.CursorIndex=cursorIndex.Index;this.JSChartContainer.UpdatePointByCursorIndex();this.JSChartContainer.UpdataDataoffset();this.JSChartContainer.UpdateFrameMaxMin();this.JSChartContainer.Draw();this.JSChartContainer.ShowTooltipByKeyDown();}else//缩小
{var cursorIndex={};cursorIndex.Index=parseInt(Math.abs(this.JSChartContainer.CursorIndex-0.5).toFixed(0));if(!this.JSChartContainer.Frame.ZoomDown(cursorIndex))return;this.JSChartContainer.CursorIndex=cursorIndex.Index;this.JSChartContainer.UpdataDataoffset();this.JSChartContainer.UpdatePointByCursorIndex();this.JSChartContainer.UpdateFrameMaxMin();this.JSChartContainer.Draw();this.JSChartContainer.ShowTooltipByKeyDown();}phonePinch.Last={"X":touches[0].pageX,"Y":touches[0].pageY,"X2":touches[1].pageX,"Y2":touches[1].pageY};}};uielement.ontouchend=function(e){console.log('[KLineChartContainer::uielement.ontouchend]',e);this.JSChartContainer.IsOnTouch=false;this.JSChartContainer.OnTouchFinished();clearTimeout(timeout);};};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();this.ChartSplashPaint.Draw();return;}//框架
this.Frame.Draw();//框架内图形
for(var i in this.ChartPaint){var item=this.ChartPaint[i];if(item.IsDrawFirst)item.Draw();}for(var i in this.ChartPaint){var item=this.ChartPaint[i];if(!item.IsDrawFirst)item.Draw();}for(var i in this.ChartPaintEx){var item=this.ChartPaintEx[i];item.Draw();}//叠加股票
for(var i in this.OverlayChartPaint){var item=this.OverlayChartPaint[i];item.Draw();}this.Frame.DrawOveraly();//画叠加指标
//固定扩展图形
for(var i in this.ExtendChartPaint){var item=this.ExtendChartPaint[i];if(!item.IsDynamic&&item.IsAnimation==false)item.Draw();}if(this.Frame.DrawInsideHorizontal)this.Frame.DrawInsideHorizontal();this.Frame.DrawLock();this.Frame.Snapshot();for(var i in this.ExtendChartPaint)//动态扩展图形
{var item=this.ExtendChartPaint[i];if(item.IsDynamic&&item.DrawAfterTitle===false)item.Draw();}if(this.LastPoint.X!=null||this.LastPoint.Y!=null){if(this.ChartCorssCursor){this.ChartCorssCursor.LastPoint=this.LastPoint;this.ChartCorssCursor.CursorIndex=this.CursorIndex;//移动端 拖拽数据的时候 不显示十字光标
if(!(this.CorssCursorTouchEnd===true&&this.MouseDrag))this.ChartCorssCursor.Draw();}}for(var i in this.TitlePaint){var item=this.TitlePaint[i];if(!item.IsDynamic)continue;item.CursorIndex=this.CursorIndex;item.Draw();}for(var i in this.ExtendChartPaint)//动态扩展图形
{var item=this.ExtendChartPaint[i];if(item.IsDynamic&&item.DrawAfterTitle===true&&item.IsAnimation==false)item.Draw();}if(this.EnableAnimation){for(var i in this.ExtendChartPaint)//动画
{var item=this.ExtendChartPaint[i];if(item.IsAnimation===true)item.Draw();}}for(var i in this.ChartDrawPicture){var item=this.ChartDrawPicture[i];item.Draw();}if(this.CurrentChartDrawPicture&&this.CurrentChartDrawPicture.Status!=10){this.CurrentChartDrawPicture.Draw();}//发送图形状态给外部
if(this.mapEvent.has(JSCHART_EVENT_ID.CHART_STATUS)){var event=this.mapEvent.get(JSCHART_EVENT_ID.CHART_STATUS);var data={};if(typeof this.GetChartStatus=='function')data=this.GetChartStatus();event.Callback(event,data,this);}};//画动态信息
this.DrawDynamicInfo=function(){if(this.Frame.ScreenImageData==null)return;var isErase=false;if(this.ChartCorssCursor){if(this.ChartCorssCursor.PointX!=null||this.ChartCorssCursor.PointY!=null)isErase=true;}if(isErase==false){for(var i in this.ExtendChartPaint){var item=this.ExtendChartPaint[i];if(item.IsDynamic&&item.IsEraseBG){isErase=true;break;}}}if(isErase)this.Canvas.putImageData(this.Frame.ScreenImageData,0,0);for(var i in this.ExtendChartPaint)//动态扩展图形
{var item=this.ExtendChartPaint[i];if(item.IsDynamic&&item.DrawAfterTitle===false&&item.IsAnimation==false)item.Draw();}if(this.ChartCorssCursor){this.ChartCorssCursor.LastPoint=this.LastPoint;this.ChartCorssCursor.CursorIndex=this.CursorIndex;if(!(this.IsOnTouch===false&&this.CorssCursorTouchEnd===true))this.ChartCorssCursor.Draw();}for(var i in this.TitlePaint){var item=this.TitlePaint[i];if(!item.IsDynamic)continue;item.CursorIndex=this.CursorIndex;item.Draw();}for(var i in this.ExtendChartPaint)//动态扩展图形 在动态标题以后画
{var item=this.ExtendChartPaint[i];if(item.IsDynamic&&item.DrawAfterTitle===true)item.Draw();}if(this.EnableAnimation){for(var i in this.ExtendChartPaint)//动画
{var item=this.ExtendChartPaint[i];if(item.IsAnimation===true)item.Draw();}}for(var i in this.ChartDrawPicture){var item=this.ChartDrawPicture[i];item.Draw();}if(this.CurrentChartDrawPicture&&this.CurrentChartDrawPicture.Status!=10){this.CurrentChartDrawPicture.Draw();}};this.DrawAnimation=function()//绘制动画 如弹幕
{if(!this.EnableAnimation)return;if(this.Frame.ScreenImageData&&!this.IsOnTouch){for(var i in this.ExtendChartPaint){var item=this.ExtendChartPaint[i];if(item.IsAnimation===true)item.IsMoveStep=true;//移动弹幕
}this.DrawDynamicInfo();}var self=this;window.requestAnimationFrame(function(){self.DrawAnimation();});};this.StartAnimation=function(option){var bCreated=false;//是否已经创建了弹幕画法
var barrageData=null;for(var i in this.ExtendChartPaint){var item=this.ExtendChartPaint[i];if(item.ClassName==='BarragePaint'){bCreated=true;barrageData=item.BarrageList;break;}}if(!bCreated){var chart=new BarragePaint();chart.Canvas=this.Canvas;chart.ChartBorder=this.Frame.ChartBorder;chart.ChartFrame=this.Frame;chart.HQChart=this;chart.SetOption(option);this.ExtendChartPaint.push(chart);barrageData=chart.BarrageList;}this.EnableAnimation=true;var self=this;window.requestAnimationFrame(function(){self.DrawAnimation();});return barrageData;};this.StopAnimation=function(){this.EnableAnimation=false;this.DrawDynamicInfo();};this.OnMouseMove=function(x,y,e){this.LastPoint.X=x;this.LastPoint.Y=y;this.CursorIndex=this.Frame.GetXData(x);var bDrawPicture=false;//是否正在画图
if(this.CurrentChartDrawPicture){if(this.CurrentChartDrawPicture.SetLastPoint)this.CurrentChartDrawPicture.SetLastPoint({X:x,Y:y});bDrawPicture=true;}else{var drawPictrueData={};drawPictrueData.X=x;drawPictrueData.Y=y;if(this.GetChartDrawPictureByPoint(drawPictrueData)){if(drawPictrueData.PointIndex===100)this.UIElement.style.cursor="move";else this.UIElement.style.cursor="pointer";bDrawPicture=true;}else{if(!this.MouseDrag)this.UIElement.style.cursor="default";}}this.DrawDynamicInfo();if(this.IsShowTooltip&&bDrawPicture==false){var toolTip=new TooltipData();for(var i in this.ChartPaint){var item=this.ChartPaint[i];if(item.GetTooltipData(x,y,toolTip)){break;}}if(!toolTip.Data){for(var i in this.OverlayChartPaint){var item=this.OverlayChartPaint[i];if(item.GetTooltipData(x,y,toolTip)){break;}}}if(toolTip.Data){var xTooltip=e.clientX-this.UIElement.getBoundingClientRect().left;var yTooltip=e.clientY-this.UIElement.getBoundingClientRect().top;this.ShowTooltip(xTooltip,yTooltip,toolTip);}else{this.HideTooltip();}}};this.OnKeyDown=function(e){var keyID=e.keyCode?e.keyCode:e.which;switch(keyID){case 37://left
if(this.CursorIndex<=0.99999){if(!this.DataMoveLeft())break;this.UpdataDataoffset();this.UpdatePointByCursorIndex();this.UpdateFrameMaxMin();this.Draw();this.ShowTooltipByKeyDown();}else{--this.CursorIndex;this.UpdatePointByCursorIndex();this.DrawDynamicInfo();this.ShowTooltipByKeyDown();}break;case 39://right
var xPointcount=0;if(this.Frame.XPointCount)xPointcount=this.Frame.XPointCount;else xPointcount=this.Frame.SubFrame[0].Frame.XPointCount;if(this.CursorIndex+1>=xPointcount){if(!this.DataMoveRight())break;this.UpdataDataoffset();this.UpdatePointByCursorIndex();this.UpdateFrameMaxMin();this.Draw();this.ShowTooltipByKeyDown();}else{//判断是否在最后一个数据上
var data=null;if(this.Frame.Data)data=this.Frame.Data;else data=this.Frame.SubFrame[0].Frame.Data;if(!data)break;if(this.CursorIndex+data.DataOffset+1>=data.Data.length)break;++this.CursorIndex;this.UpdatePointByCursorIndex();this.DrawDynamicInfo();this.ShowTooltipByKeyDown();}break;case 38://up
var cursorIndex={};cursorIndex.Index=parseInt(Math.abs(this.CursorIndex-0.5).toFixed(0));if(!this.Frame.ZoomUp(cursorIndex))break;this.CursorIndex=cursorIndex.Index;this.UpdatePointByCursorIndex();this.Up