dsxkline
纯JS(ES5)语言进行开发，简直完满适配所有浏览器平台(ie678除外)，挪动端桌面端混合开发媲美原生体验！
dsxkline 反对基本功能，滚动缩放滑动分页实时刷新，反对MA，BOLL、VOL、KDJ、MACD、RSI、WR、CCI、BIAS、PSY等指标
反对支流开发平台 android,ios,flutter,web,h5,c#等
目前已开源SDK
JS：dsxkline/dsxkline_js
iOS：dsxkline/dsxkline_iphone
Android: dsxkline/dsxkline_android
C#: dsxkline/dsxkline_net
Flutter: dsxkline/dsxkline_flutter
python: dsxkline_python
预览
开始
<script src="http://www.dsxkline.com/dsx.kline.js></script>创立K线图
<div id="kline"></div>var c=document.getElementById("kline"); var kline = new dsxKline({ element:c, onLoading:function(o){ // 开始申请加载数据 }, nextPage:function(data,index){ // 开始申请加载下一页数据 }, onCrossing:function(data,index){ // 十字线挪动数据 }, updateComplate:function(){ // 实现K线一次更新 }});更新K线图
kline.update({ chartType:dsxConfig.chartType.timeSharing, //theme:"dark", 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分钟,五日// data为最初一根K线数据，数据结构 分时图=[日期,工夫,价格,成交量,成交额] K线图=[日期,开,高,低,收,成交量,成交额] 分钟K线=[日期,工夫,开,高,低,收,成交量,成交额]kline.refreshLastOneData(data,cycle);属性
| 属性 | 名称 | 类型 | 必须 | 默认值 | 备注 |
|---|---|---|---|---|---|
| theme | 主题 | string | 否 | white | white,dark |
| chartType | 图标类型 | int | 否 | 0 | 分时图=0，五日=1，k线图=2 |
| market | 交易所 | string | 否 | sh | sh,sz,bj,hk,us |
| candleType | 蜡烛图类型 | int | 否 | 0 | 空心=0 实心=1 |
| dpr | 屏幕dpr | float | 否 | 2 | 主动适配 |
| element | 画布对象 | dom | 是 | ||
| width | 宽度 | float | 否 | 画布宽度 | 默认跟element适配 |
| height | 高度 | float | 否 | 画布高度 | 默认跟element适配 |
| paddingTop | 顶部间距 | float | 否 | 20 | |
| paddingMiddle | 主副图间距 | float | 否 | 20 | |
| paddingBottom | 底部间距 | float | 否 | 1 | |
| autoSize | 主动大小 | boolean | 否 | false | 为true依据element主动适应 |
| datas | 数据 | int | 否 | null | 查看数据标准 |
| lastClose | 昨收 | int | 否 | null | 以后股票昨日收盘价 |
| mobileCross | 十字线挪动端接管 | boolean | 否 | false | 须要挪动端实现十字线时启用 |
| onCrossing | 滑动十字线回调 | function | 否 | 0 | 返回十字线以后数据 |
| zoomstep | 缩放步长 | float | 否 | 0.5 | 每次缩放多少像素 |
| zoomMin | 放大最小值 | float | 否 | 3 | |
| zoomMax | 放大最大值 | float | 否 | 50 | |
| zoomLockType | 缩放类型 | int | 否 | 2 | 1=左，2=中，3=右，4=追随鼠标 |
| mobileZoom | 缩放手势挪动端接管 | boolean | 否 | false | 挪动端实现缩放时启用 |
| sides | 副图指标 | array | 否 | ["MA"] | 反对指标 MA,BOLL |
| main | 主图指标 | array | 否 | ["VOL"] | 反对指标 VOL,MACD,KDJ,RSI |
| sideHeight | 副图高度 | float | 否 | height*20% | 默认为高度的20% |
| mainHeight | 主图高度 | float | 否 | ||
| debug | debug模式 | boolean | 否 | false | |
| nextPage | 加载下一页 | function | 否 | 0 | 滚动到最右边的时候加载下一页数据 |
| rightEmptyKlineAmount | 左边空数据 | int | 否 | 0 | 默认图表左边空出多少根K线 |
| onLoading | 开始加载回调 | function | 否 | 0 | 初始化加载数据，首次申请数据须要定义在此 |
| updateComplate | 更新实现回调 | function | 否 | 0 | 图表实现一次更新完结 |
| timePeriod | 交易时间段 | string | 否 | 9:30-11:30,13:00-15:00 | 为空启用零碎内置 |
| isShowKlineTipPannel | 显示内置K线提醒面板 | boolean | 否 | true | 自主实现K线数据提醒请敞开 |
| page | 页码 | int | 否 | 1 | 加载下一页数据时须要传入页码 |
| theend | 滚动到止境 | boolean | 否 | false | 下一页没有数据须要标记为true |
配置 dsxConfig
k线图表类型
// k线图表类型dsxConfig.chartType = { timeSharing:0, // 分时图 timeSharing5:1, // 五日分时图 candle:2, // K线图}蜡烛图空心实心
// 蜡烛图实心空心dsxConfig.candleType = { hollow:0, // 空心 solid:1 // 实心}缩放K线锁定类型
// 缩放K线锁定类型dsxConfig.zoomLockType = { left:1, // 锁定右边进行缩放 middle:2, // 锁定两头进行缩放 right:3, // 锁定左边进行缩放 follow:4, // 追随鼠标地位进行缩放，web版成果比拟好}交易所类型及其交易工夫
// 交易所类型及其交易工夫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", // 现货 wh:"9:30-12:00,12:00-16:00", // 外汇}指标配置
// 指标配置dsxConfig.index = { VOL:{ // 显示名称 title:"成交量", // 参数配置值 value:{VOL:0,MA5:5,MA10:10}, // 画线配置 draw:{VOL:{model:"column",color:"CLOSE",hiddenTitle:true},MA5:{model:"line",color:"#FFA500"},MA10:{model:"line",color:"#87CEFA"}}, // 反对的图形 chartType:[dsxConfig.chartType.timeSharing,dsxConfig.chartType.timeSharing5,dsxConfig.chartType.candle], // 反对的图表地位 主图 main，副图 sides location:['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}, draw:{ MA5:{model:"line",color:"#FFA500"}, MA10:{model:"line",color:"#87CEFA"}, MA30:{model:"line",color:"#BA55D3"},MA60:{model:"line",color:"#808000"},}, chartType:[dsxConfig.chartType.timeSharing,dsxConfig.chartType.timeSharing5,dsxConfig.chartType.candle], location:['main'] }, MACD:{ title:"MACD(26,9,12)", value:{DIFF:0,DEA:0,MACD:0,long:26,d:9,short:12}, draw:{DIFF:{model:"line",color:"#FFA500"},DEA:{model:"line",color:"#87CEFA"}, MACD:{model:"column",color:"#BA55D3"}}, chartType:[dsxConfig.chartType.timeSharing,dsxConfig.chartType.timeSharing5,dsxConfig.chartType.candle], location:['sides'] }, KDJ:{ title:"KDJ(9,3,3)", value:{K:9,D:3,J:3}, draw:{K:{model:"line",color:"#FFA500"},D:{model:"line",color:"#87CEFA"},J:{model:"line",color:"#BA55D3"}}, chartType:[dsxConfig.chartType.candle], location:['sides'] }, BOLL:{ title:"BOLL(20,2)", value:{UP:0,MID:0,LOW:0,N:20,M:2}, draw:{UP:{model:"line",color:"#FFA500"},MID:{model:"line",color:"#87CEFA"}, LOW:{model:"line",color:"#BA55D3"}}, chartType:[dsxConfig.chartType.candle], location:['main'] }, RSI:{ title:"RSI(6,12,24)", value:{RSI6:6,RSI12:12,RSI24:24}, draw:{RSI6:{model:"line",color:"#FFA500"},RSI12:{model:"line",color:"#87CEFA"}, RSI24:{model:"line",color:"#BA55D3"}}, chartType:[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'] }, BIAS:{ title:"BIAS(6,12,24)", value:{BIAS6:6,BIAS12:12,BIAS24:24}, draw:{BIAS6:{model:"line",color:"#FFA500"},BIAS12:{model:"line",color:"#87CEFA"}, BIAS24:{model:"line",color:"#BA55D3"}}, chartType:[dsxConfig.chartType.candle], location:['sides'] }, CCI:{ title:"CCI(14)", value:{CCI14:14}, draw:{CCI14:{model:"line",color:"#FFA500"}}, chartType:[dsxConfig.chartType.candle], location:['sides'] }, PSY:{ title:"PSY(12,6)", value:{PSY:12,PSYMA:6}, draw:{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,// 十字线宽度 fontBgColor:"#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",// 蜡烛图红色 greenColor:"#4CAF50",// 蜡烛图绿色 crossLineColor:"#2196F3",// 十字线色彩 crossLineWidth:1.0,// 十字线宽度 fontBgColor:"#2196F3", // 文字背景色彩 gridLineColor:"#191b28",// 网格线色彩 gridLineCount:3,// 网格线数量 gridLineWidth:1.0,// 网格线的宽度 lineWidth:1.0, // 线条的大小 指标线条的大小 klineWidth:10,// 一根k线的默认宽度 klinePadding:1,// k线之间的距离 timeSharingLineColor:"#2196F3",// 分时图价格线的色彩 timeSharingLineFillColor:"rgba(65,105,225,0.1)", // 分时图价格线区域填充色彩 }}图表数据格式
分时图
数组 ["日期,工夫,报价,成交量,成交额"]["20220301,0930,3001.23,453999595,233944858","20220301,0931,3001.23,453999595,233944858","20220301,0932,3001.23,453999595,233944858",]五日分时图
数组 ["日期,工夫,报价,成交量,成交额"],相当于间断五天的分时图数据["20220301,0930,3001.23,453999595,233944858","20220301,0931,3001.23,453999595,233944858","20220301,0932,3001.23,453999595,233944858",..."20220302,0930,3001.23,453999595,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",]K线图
数组 ["日期,开盘价,最高价,最低价,收盘价,成交量,成交额"]["20220301,3001.23,3030.21,2989.3,3002.4,453999595,233944858","20220302,3001.23,3030.21,2989.3,3002.4,453999595,233944858","20220303,3001.23,3030.21,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,2989.3,3002.4,453999595,233944858","20220303,0932,3001.23,3030.21,2989.3,3002.4,453999595,233944858",]