关于javascript:用JS重构了一个K线图小组件支持桌面移动端全平台适配

43次阅读

共计 7961 个字符，预计需要花费 20 分钟才能阅读完成。

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",
]

正文完
javascript
发表至： javascript
2023-01-14
 0
深入浅出逻辑像素和物理像素理解
webpack常用构建优化总览
关于javascript:Day-46100-Vue-thisset原理
关于javascript:nodejskoaSequelizepkg后端服务实践