用JS重构了一个K线图插件，支持桌面和移动平台适配

varc=document.getElementById("kline");varkline=newdsxKline({element:c,onLoading:function(o){//开始请求加载数据},nextPage:function(data,index){//开始请求加载下一页数据},onCrossing:function(data,index){//十字线移动数据},updateComplate:function(){//完成一次K线更新}});更新K线图表kline.update({chartType:dsxConfig.chartType.timeSharing,//主题：“深色”，candleType:dsxConfig.candleType.hollow,zoomLockType:dsxConfig.zoomLockType.right,isShowKlineTipPannel:false,sides:kline.chartType<=1?["VOL"]:["VOL","MACD"],datas:data,});kline.finishLoading();刷新最新数据//周期cycle=t,d,w,m,y,m1,t5分别代表分时，第K天，第K周，第K年，1分钟，5天//数据为最后K线data,数据结构分时图=[日期,时间,价格,成交量,成交金额]K线图=[日期,开盘价,最高价,最低价,收盘价,成交量,成交金额]分钟K线=[日期、时间、开盘价、最高价、最低价、收盘价、营业额、营业额]kline.refreshLastOneData(data,cycle);attribute属性名type必须默认值remarkthemethemestringnowhitewhite,darkchartTypeicontypeintno0分时图=0,五天=1,k线图=2行情exchangestringnoshsh,sz,bj,hk,uscandleType蜡烛图类型intno0hollow=0solid=1dprscreendprfloatno2自动适配元素canvasobjectdomyeswidthwidthfloatnocanvaswidthDefault适配元素高度heightfloatNoCanvasheight默认适配元素paddingToptopspacingfloatno20paddingMiddle主副图间距float无20paddingBottom底部间距float无1autoSizeautomaticsizebooleanfalseiftrue自动根据元素适配datas数据int无空视图数据规范lastClose昨天closeint无空当前股票昨天收盘价mobileCross交叉线移动端接管booleanfalsefalse移动端实现跨线无0返回时开启onCrossing滑动跨线回调函数crosslinecurrentdatazoomstepzoomsteplengthfloatno0.5每次缩放多少像素zoomMinzoomminimumfloatno3zoomMaxzoommaxfloatno50zoomLockTypezoomtypeintno21=left,2=middle,3=right,4=follow鼠标标准mobileZoom缩放手势移动端接管boolean无false启用边副图指标数组无["MA"]支持指标MA,BOLLmain主图指标数组无["VOL"]支持指标VOL,MACD,KDJ,RSIsideHeightsub-图片高度floatnoheight*20%默认为高度的20%mainHeight主图高度floatnodebugdebugmodebooleannofalsenextPage加载下一页函数no0向左滚动时加载下一页数据rightEmptyKlineAmountrightemptydataint否0默认如何图表右侧留了很多个烛台onLoading开始加载回调函数0号初始化加载数据，这里需要定义第一个请求数据updateComplate更新完成回调函数0号图表完成一次更新timePeriod交易时间段字符串9号：30-11:30,13:00-15:00为空启用内置系统isShowKlineTipPannel显示内置K线提示面板booleannotrue实现K线数据独立提示请关闭页面页码intno加载下一页数据时需要传入页码theend滚动到末尾booleanfalsefalse下一页无数据需要标记为true配置dsxConfigk线图类型//k线图类型dsxConfig.chartType={timeSharing:0,//分时图timeSharing5:1,//五天分时图candle:2,//K线图}Candle图空心实心//CandlechartsolidhollowdsxConfig.candleType={hollow:0,//Hollowsolid:1//Solid}尺度K线锁型//尺度K线锁型dsxConfig.zoomLockType={left:1,//锁左为zoommiddle:2,//锁定中间缩放right:3,//锁定右边缩放follow:4,//跟随鼠标位置缩放，网页版效果更好}交易所类型及交易时间//交易所类型及其交易时间dsxConfig.market={sh:"9:30-11:30,13:00-15:00",//上海sz:"9:30-11:30,13:00-15:00",//深圳bj:"9:30-11:30,13:00-15:00",//北京hk:"9:30-12:00,13:00-16:00",//港股us:"9:30-12:00,12:00-16:00",//美股fu:"9:30-12:00,12:00-16:00",//期货sp:"9:30-12:00,12:00-16:00",//spotwh:"9:30-12:00,12:00-16:00",//外汇}指标配置//指标configurationdsxConfig.index={VOL:{//显示名称title:"Volume",//参数配置值value:{VOL:0,MA5:5,MA10:10},//画线配置draw:{VOL:{模型：“列”，颜色：“关闭”，hiddenTitle：true}，MA5：{模型：“线”，颜色：“#FFA500”}，MA10：{模型：“线”，颜色：“#87CEFA”}},//支持的图形chartType:[dsxConfig.chartType.timeSharing,dsxConfig.chartType.timeSharing5,dsxConfig.chartType.candle],//支持的图表位置mainpicturemain,sidepicturesideslocation:['sides']},TMA:{title:"",value:{"均价":1},draw:{"均价":{model:"line",color:"#FFA500"},"新值":{model:"text",color:"",colorValue:0}},chartType:[dsxConfig.chartType.timeSharing,dsxConfig.chartType.timeSharing5],location:['main']},MA:{title:"均线",value:{MA5:5,MA10:10,MA30:30,MA60:60},绘制:{MA5:{model:"line",color:"#FFA500"},MA10:{model:"line",color:"#87CEFA“}，MA30：{模型：“线”，颜色：“#BA55D3”}，MA60：{模型：“线”，颜色：“#808000”}，}，图表类型：[dsxConfig.chartType.timeSharing，dsxConfig。chartType.timeSharing5,dsxConfig.chartType.candle],location:['main']},MACD:{标题:"MACD(26,9,12)",value:{DIFF:0,DEA:0,MACD:0,long:26,d:9,short:12},draw:{DIFF:{model:"line",color:"#FFA500"}，DEA：{模型："line"，颜色："#87CEFA"}，MACD：{模型："column"，颜色："#BA55D3"}}，图表类型：[dsxConfig.chartType.timeSharing,dsxConfig.chartType.timeSharing5,dsxConfig.chartType.candle],location:['sides']},KDJ:{title:"KDJ(9,3,3)",value:{K:9,D:3,J:3},绘制:{K:{model:"line",color:"#FFA500"},D:{model:"line",color:"#87CEFA"},J:{model:"line"，颜色：“#BA55D3”}}，chartType：[dsxConfig.chartType.candle]，位置：['sides']}，BOLL：{title：“BOLL（20,2）”，值：{UP：0，MID:0,LOW:0,N:20,M:2},draw:{UP:{model:"line",color:"#FFA500"},MID:{model:"line",color:"#87CEFA”}，低：{模型：“线”，颜色：“#BA55D3”}}，图表类型：[dsxConfig.chartType.candle]，位置：['main']}，RSI：{标题：“RSI（6,12,24）”，值：{RSI6：6，RSI12：12，RSI24：24}，绘制：{RSI6：{模型：“线”，颜色：“#FFA500”}，RSI12：{模型：“线”，颜色：“#87CEFA”}，RSI24：{模型：“线”，颜色：“#BA55D3”}}，图表类型：[dsxConfig.chartType.timeSharing，dsxConfig.chartType.timeSharing5，dsxConfig.chartType.candle],location:['sides']},WR:{title:"WR(6,10)",value:{WR6:6,WR10:10},draw:{WR6:{model:"line",color:"#FFA500"},WR10:{model:"line",color:"#87CEFA"}},chartType:[dsxConfig.chartType.candle],location:['sides']},偏差:{title:"BIAS(6,12,24)",value:{BIAS6:6,BIAS12:12,BIAS24:24},draw:{BIAS6:{model:"line",color:"#FFA500"},BIAS12：{模型：“线”，颜色：“#87CEFA”}，BIAS24：{模型：“线”，颜色：“#BA55D3"}},chartType:[dsxConfig.chartType.candle],location:['sides']},CCI:{title:"CCI(14)",value:{CCI14:14},绘图:{CCI14:{模型：“线”，颜色：“#FFA500”}}，图表类型：[dsxConfig.chartType.candle]，位置：['sides']}，PSY：{标题：“PSY（12,6）”，值：{PSY:12,PSYMA:6},绘制:{PSY:{model:"line",color:"#FFA500"},PSYMA:{model:"line",color:"#87CEFA"}},chartType:[dsxConfig.chartType.candle],location:['sides']},}主题配置//主题配置dsxConfig.theme={white:{backgroundColor:"#ffffff",//背景色color:"#333333",//字体颜色fontSize:window.devicePixelRatio<=1?12:10,//字体大小redColor:"#F44336",//蜡烛图红色greenColor:"#4CAF50",//蜡烛图绿色crossLineColor:"#2196F3",//十字线颜色crossLineWidth:1.0,//十WordlinewidthfontBgColor:"#2196F3",//文本背景色十字线提示文字背景色gridLineColor:"#eeeeee",//网格线颜色gridLineCount:3,//网格线数量gridLineWidth:1.0,//网格线宽lineWidth:1.0,//线宽指标线宽klineWidth:10,//k线默认宽度klinePadding:1,//k线间隔timeSharingLineColor:"#2196F3",//颜色分时图价格线的填充颜色timeSharingLineFillColor:"rgba(65,105,225,0.1)",//分时图价格线区域的填充颜色},dark:{backgroundColor:"rgba(19,23,34,1)",//背景颜色color:"#c5cbce",//字体颜色fontSize:window.devicePixelRatio<=1?12:10,//字体大小redColor:"#F44336",//蜡烛图redgreenColor:"#4CAF50",//蜡烛图绿色crossLineColor:"#2196F3",//十字线颜色crossLineWidth:1.0,//十字线宽度fontBgColor:"#2196F3",//文本背景颜色gridLineColor:"#191b28",//网格网格线颜色gridLineCount:3,//网格线的数量gridLineWidth:1.0,//网格线的宽度lineWidth:1.0,//Thesizeofthelineindicator线的大小klineWidth:10,//默认的k线宽度klinePadding:1,//k线之间的间隔timeSharingLineColor:"#2196F3",//分时图价格线颜色timeSharingLineFillColor:"rgba(65,105,225,0.1)",//分时图价格线区域填充颜色}}图表数据格式分时图数组["date,时间,报价,成交量,成交金额"]["20220301,0930,3001.23,453999595,233944858","20220301,0931,3001.23,453999595,233944858","20220301,0932,3001.898",4595320220301,0931,3001.23,453999595,233944858","20220301,0932,3001.23,23898,5小时,日期"时间数组,时间图,,成交量,周转值"],相当于分时图表数据连续五天[“20220301,0930,3001.23,453999595,233944858,233944858","20220302,0931,3001.23,453999595,233944858","20220302,0932,3001.23,453999595,233944858",..."20220303,0930,3001.23,453999595,233944858","20220303,0931,3001.23,453999595,233944858",“20220303,0932,3001.23,453999595,233944858",..."20220304,0930,3001.23,453999595,233944858","20220304,0931,3001.23,453999595,233944858","20220304,0932,3001.23,453999595,233944858",..."20220305,0930,3001.23,453999595,233944858","20220305,0931,3001.23,453999595,233944858","20220305,0932,3001.23,453999595,233944858","20220305,0932,3001.23,453999594,5839"，最高价格，最低价格，收盘价，数量，营业额”[][20220301,3001.23,3030.21,21,2989.3,3002.4,4539999595,233944858“，”20220202020202020202020202020202020303030303030.21,21,21,2989.333989.3333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333399999999转。2989.3,3002.4,453999595,233944858",]分钟K线图数组["日期、时间、开盘价、最高价、最低价、收盘价、成交量、成交量"]["20220301,0930,3001.23,3030.21,2989.3,3002.4，453999595,233944858“，”20220302,0931,3001.23,3030.21,21,2989.3,3002.4,453999999595,23395,2339444858