市场深度图JS组件 - DepthChart.js

DepthChart.js组件适用于资产交易中的市场深度(Depth Of Market)数据表现, 例如可以结合K线图嵌入股票、加密货币等资产的交易应用软件中作为用户的交易工具。DepthChart.js组件基于HTML的Canvas技术实现,支持鼠标滚轮缩放与 十字线聚焦,提供深色与浅色两种预置主题,并且支持自定义主题。DepthChart.js的官方下载地址:市场深度图JS组件

1、Depth Chart JS组件概述

DepthChart.js组件的主要特点如下:

  • 基于html的canvas实现:与基于SVG的实现相比,在大数据量场景中的性能更好
  • 不依赖第三方库:没有第三方依赖,非常容易嵌入其他库或框架,例如jquery、vue、react、angular等
  • 支持鼠标滚轮缩放:鼠标滚轮即可在水平方向缩放,便于观察数据细节
  • 支持自定义配色主题:可以根据应用需求自定义组件的配色主题,便于融入现有应用,同时也提供深/浅两色 的预置主题

DepthChart.js组件当前版本为1.0.0,主要文件清单如下:

代码文件说明
src/Dataset.js数据集模型实现类
src/Renderer.js渲染器实现类
src/Scale.js比例尺实现类
src/Theme.js主题实现类
src/DepthChart.js市场深度图实现类
src/index.js源代码入口文件
lib/uikit.umd.jsumd格式的库文件
rollup.config.jsrollup配置文件
.babelrcbabel配置文件
package.jsonnpm描述文件
test.html测试HTML文件

2、基本使用方法

STEP 1:引入脚本文件

在HTML文件中声明canvas元素,并引入uikit.umd.js文件:

1
2
<canvas id="#depth-chart" width="900" height="400"></canvas>
<script src="lib/uikit.umd.js"></script>

STEP 2:声明数据

DepthChart组件要求数据按预定格式组织,例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var dataset = {
"bids":[
["0.00283330","95.18000000"],
["0.00283300","5.56000000"],
...
["0.00282410","3.74000000"],
["0.00282400","1.15000000"]
],
"asks":[
["0.00283480","4.95000000"],
["0.00283490","5.19000000"],
...
["0.00284400","79.01000000"],
["0.00284410","15.53000000"]
]
}

其中bids表示买方市场深度数据,asks表示卖方市场深度数据,每一行的两个数据分别 表示价位及该价位的数量。容易理解,买方数据是按价格从高到底排列,而卖方数据则 是按价格从低到高排列,价差(spread)则是买方最高价和卖方最低价的差值,即:

1
spread = asks[0][0] - bids[0][0]

你可以使用币安的API获取指定交易对的实时市场深度数据,例如,获取BNB-BTC交易对的市场深度数据:

1
https://api.binance.com/api/v1/depth?symbol=BNBBTC&limit=50

STEP 3:创建DepthChart对象

使用uikit中的DepthChart类初始化深度图:

1
2
3
4
new uikit.DepthChart({
el: '#depth-chart', //canvas元素选择符
dataset: dataset //数据集,参见下面说明
})

实例化DepthChart类的时候,需要传入一个配置对象。el配置用来声明 深度图渲染的canvas元素(或者其选择符),dataset配置项用来声明要 进行处理的市场深度数据。

3、使用配色主题

在创建DepthChart时,可以使用theme配置项来应用一个预置的主题,或者一个自定义的主题。

3.1 预置的深色主题

例如使用预置的dark主题:

1
2
3
4
5
new uikit.DepthChart({
el: '#depth-chart',
dataset: dataset,
theme: uikit.Theme.dark()
})

运行结果如下:

3.2 预置的浅色主题

或者使用预置的light主题:

1
2
3
4
5
new uikit.DepthChart({
el: '#depth-chart',
dataset: dataset,
theme: uikit.Theme.light()
})

运行结果如下:

3.3 自定义主题

可以参考src/Theme.js中的dark或light主题,根据自己的需要进行自定义。 可以配置的主要选项列举如下:

配置项说明
background背景样式
bidsLineStyle买方深度线样式
asksLineStyle卖方深度线样式
bidsRegionsStyle买方深度区域样式
asksRegionStyle卖方深度区域样式
xgridStyle水平栅格样式
ygridStyle垂直栅格样式
xtickStyle水平坐标轴刻度样式
ytickStyle垂直坐标轴刻度样式
xtickTextStyle水平坐标轴刻度文本样式
ytickTextStyle垂直坐标轴刻度文本样式
focusCircleStyle鼠标焦点样式
focusLineStyle鼠标焦点十字线样式
focusTextStyle鼠标焦点文本样式
indicatorLineStyle价差指示器线条样式
indicatorTextStyle价差指示器文本样式

4、使用源代码

如果自定义主题还不能满足应用需求,那么可以直接修改源代码。

首先到官网下载源码:http://sc.hubwiz.com/codebag/uikit-depth/ 。

然后解压下载的代码包:

1
~$ tar zxvf uikit-depth-1.0.0.tar.gz

DepthChart.js组件的源代码位于src目录下,其主要类以及相互关系如下图所示:

修改完成后,需要重新构建UMD库文件:

1
2
~/uikit$ npm install -g rollup
~/uikit$ npm run build

上面的命令首先全局安装rollup,然后执行组件库的构建任务,最终在lib目录下 生成可用于浏览器端的库文件 - uikit.umd.js