kline 专业金融K线绘制库

本项目扒了某网站的K线插件做了一些封装和二次开发,使其更加便于使用和修改,方便后来的开发者. 修改主要涉及以下几个点:

使用 webpack 打包 css/images/html
使用 ES6 + Babel 对原有代码进行了拆分和重构
删除了一些不必要的逻辑
把源码中可配置的部分抽出来
添加了对 websocket(stomp over websocket) 连接方式的支持
增加对外接口及事件回调

Features

✅ 支持两种主题配色切换
✅ 支持简体中文,英文,繁体中文三种语言
✅ 可配置的时间聚合方式
✅ 支持多种画线工具
✅ 支持多种画图算法
✅ 支持深度图数据及最近成交数据展示
✅ 支持普通轮询和Websocket Over Stomp两种连接方式

ScreenShot!

Requirements

jquery
jquery.mousewheel
sockjs (仅stomp方式需要)
stomp (仅stomp方式需要)

Install & Load

安装

$ npm install kline

使用标签引入, 在HTML页面头部加入

    <script src="/lib/sockjs.js"></script> <script src="/lib/stomp.js"></script> <script src="/lib/jquery.js"></script> <script src="/lib/jquery.mousewheel.js"></script> <script src="/dist/kline.js"></script>

OR RequireJS

require.config({paths: {"jquery": "../lib/jquery","jquery.mousewheel": "../lib/jquery.mousewheel","sockjs": "../lib/sockjs","stomp": "../lib/stomp","kline": "../js/kline"},shim: {"jquery.mousewheel": {deps: ["jquery"]},"kline": {deps: ["jquery.mousewheel", "sockjs", "stomp"]}}
});require(['kline'], function () {// ...
});

OR CommonJS

 var Kline = require('kline');

OR ES6

 import Kline from 'kline';

在页面中加入

  <div id="kline_container"></div>

Examples

Poll(轮询)

var kline = new Kline({element: "#kline_container",symbol: "BTC",symbolName: "比特币",type: "poll", // poll/stompurl: "http://127.0.0.1:8080/mock.json"
});
kline.draw();

Stomp Over Websocket

var kline = new Kline({element: "#kline_container",symbol: "BTC",symbolName: "比特币",type: "stomp", // poll/stompurl: 'http://127.0.0.1:8088/socket',subscribePath: "/kline/subscribe",sendPath: "/kline/send"
});
kline.draw();

Support Options

参数名称	参数说明	默认值
`element`	容器元素选择器	#kline_container
`width`	宽度 (px)	1200
`height`	高度度 (px)	650
`theme`	主题 dark(暗色)/light(亮色)	dark
`language`	语言 zh-cn(简体中文)/en-us(英文)/zh-tw(繁体中文)	zh-cn
`ranges`	聚合选项 1w/1d/12h/6h/4h/2h/1h/30m/15m/5m/3m/1m/line (w:周, d:天, h:小时, m:分钟, line:分时数据)	["1w", "1d", "1h", "30m", "15m", "5m", "1m", "line"]
`symbol`	交易代号
`symbolName`	交易名称
`type`	连接类型 stomp/poll(轮询)	poll
`url`	请求地址
`limit`	分页大小	1000
`intervalTime`	请求间隔时间(ms)	3000
`subscribePath`	订阅地址 (仅stomp方式需要)
`sendPath`	发送地址 (仅stomp方式需要)
`debug`	是否开启调试模式 true/false	true
`showTrade`	是否显示行情侧边栏 true/false	true
`enableSockjs`	是否开启sockjs支持 true/false	true
`reverseColor`	是否反色, 默认绿涨红跌 true/false	false
`stompClient`	stomp 连接对象	null

Methods

draw()

画K线图

kline.draw();

resize(int width, int height)

设置画布大小

kline.resize(1200, 550);

setSymbol(string symbol, string symbolName)

设置交易品种

kline.setSymbol('usd/btc', 'USD/BTC');

setTheme(string style)

设置主题

kline.setTheme('dark');  // dark/light

setLanguage(string lang)

设置语言

kline.setLanguage('en-us');  // en-us/zh-ch/zh-tw

setShowTrade: function (isShow)

设置展示是否展示交易模块

kline.setShowTrade(false);  // true/false

toggleTrade: function ()

切换展示是否展示交易模块

kline.toggleTrade();

setIntervalTime: function (intervalTime)

设置请求间隔时间(ms)

kline.setIntervalTime(5000);

connect: function ()

建立socket连接

kline.connect();

disconnect: function ()

断开socket连接

kline.disconnect();

pause: function ()

暂停请求数据

kline.pause();

resend: function ()

重新请求数据

kline.resend();

Events

事件函数	说明
`onResize: function(width, height)`	画布尺寸改变时触发
`onLangChange: function(lang)`	语言改变时触发
`onSymbolChange: function(symbol, symbolName)`	交易品种改变时触发
`onThemeChange: function(theme)`	主题改变时触发
`onRangeChange: function(range)`	聚合时间改变时触发

Example

var kline = new Kline({element: "#kline_container",symbol: "BTC",symbolName: "比特币",type: "poll", // poll/stompurl: "http://127.0.0.1:8080/mock.json",onResize: function(width, height) {console.log("chart resized: " + width + " " + height);}
});

Response

Example

{"success": true,"data": {"lines": [[1.50790476E12,99.30597249871,99.30597249871,99.30597249871,99.30597249871,66.9905449283]],"trades": [{"amount": 0.02,"price": 5798.79,"tid": 373015085,"time": 1508136949000,"type": "buy"}],"depths": {"asks": [[500654.27,0.5]],"bids": [[5798.79,0.013]]}}
}

响应参数说明:
lines: K线图, 依次是: 时间(ms), 开盘价, 最高价, 最低价, 收盘价, 成交量
depths(可选, 行情侧边栏显示): 深度图数据, asks:一定比例的卖单列表, bids:一定比例的买单列表, 其中每项的值依次是成交价, 成交量
trades(可选, 行情侧边栏显示): 最近成交记录, amount: 成交量, price:单价, tid:订单ID, time:成交时间(ms), type:成交类型 buy/sell

转载地址: https://www.npmjs.com/package/kline

参考地址: https://cn.tradingview.com

kline 专业金融K线绘制库相关推荐

用Python绘制专业的K线图【含源代码】
使用Python绘制一幅专业的K线图,是量化投资和金融数据分析的必备功课. 下面我将从K线图简介.数据获取.K线图绘制及成交量绘制等方面,结合源代码,一步步实现专业K线图的绘制. K线图简介 K线图又 ...
python绘制蜡烛图_一步一步教你用Python画出专业的K线图
漂亮的界面是量化程序的脸面,直观专业的界面能帮助我们了解股票的走势和形象地展示量化交易的结果.本文介绍如何使用matplotlib做出专业的K线图和展示各种技术指标: matplotlib是受MATL ...
用python绘制股票图_一步一步教你用Python画出专业的K线图
漂亮的界面是量化程序的脸面,直观专业的界面能帮助我们了解股票的走势和形象地展示量化交易的结果.本文介绍如何使用matplotlib做出专业的K线图和展示各种技术指标: matplotlib是受MATL ...
python画k线图_一步一步教你用Python画出专业的K线图
漂亮的界面是量化程序的脸面,直观专业的界面能帮助我们了解股票的走势和形象地展示量化交易的结果.本文介绍如何使用matplotlib做出专业的K线图和展示各种技术指标: matplotlib是受MATL ...
股票走势及K线绘制练习代码笔记（无注释）
股票走势及K线绘制练习代码笔记(无注释) ###所需要安装的新库:tushare;mpl_finance #22.04.09 # In[走势图] import tushare as ts df=ts. ...
如何使用Echarts设计专业的K线图
如何使用Echarts设计专业的K线图先上图: Echarts所需的K线的数据结构有:时间(date),开盘(open),收盘(close),最低(lowest),最高(highest),成交量(v ...
js股票K线图，比较专业的K线图插件
由於項目裏面要做個有關交易的平臺,其中要畫k線圖(蠟燭圖),在網上找了很多插件感覺都沒有專業的股票交易平臺弄的k線圖專業,因此為了趕進度,將就用了百度的echarts來做k線圖,結果發現如果點比較少的 ...
java k线绘制,用Java绘制K线图[Java编程]
赞助商链接本文"用Java绘制K线图[Java编程]"是由七道奇为您精心收集,来源于网络转载,文章版权归文章作者所有,本站不对其观点以及内容做任何评价,请读者自行判断,以下是其具 ...
IOS端K线系列之K线-绘制蜡烛图
k线系列目录查看目录请点击这儿补充知识 K线虽然看上去复杂,但仔细观察就会知道几乎所有的k线无非由以下几种组成: (1)蜡烛 (2)OHLC (3)线段 (4)带状 (5)圆形除此之外还有其他的 ...

kline 专业金融K线绘制库

Features

ScreenShot!

Requirements

Install & Load

Examples

Support Options

Methods

Events

Response

转载地址: https://www.npmjs.com/package/kline

参考地址: https://cn.tradingview.com

kline 专业金融K线绘制库相关推荐

最新文章

热门文章