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,主要文件清單詳見官網:http://sc.hubwiz.com/codebag/uikit-depth/
2、基本使用方法
STEP 1:引入腳本文件
在HTML文件中聲明canvas元素,並引入uikit.umd.js文件:
<canvas id="#depth-chart" width="900" height="400"></canvas>
<script src="lib/uikit.umd.js"></script>
STEP 2:聲明數據
DepthChart
組件要求數據按預定格式組織,例如:
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
)則是買方最高價和賣方最低價的差值,即:
spread = asks[0][0] - bids[0][0]
你可以使用幣安的API獲取指定交易對的實時市場深度數據,例如,獲取BNB-BTC交易對的市場深度數據:
https://api.binance.com/api/v1/depth?symbol=BNBBTC&limit=50
STEP 3:創建DepthChart對象
使用uikit中的DepthChart
類初始化深度圖:
new uikit.DepthChart({
el: '#depth-chart', //canvas元素選擇符
dataset: dataset //數據集,參見下面說明
})
實例化DepthChart類的時候,需要傳入一個配置對象。el
配置用來聲明深度圖渲染的canvas元素(或者其選擇符),dataset
配置項用來聲明要進行處理的市場深度數據。
3、使用配色主題
在創建DepthChart時,可以使用theme
配置項來應用一個預置的主題,或者一個自定義的主題。
3.1 預置的深色主題
例如使用預置的dark主題:
new uikit.DepthChart({
el: '#depth-chart',
dataset: dataset,
theme: uikit.Theme.dark()
})
運行結果如下:
3.2 預置的淺色主題
或者使用預置的light主題:
new uikit.DepthChart({
el: '#depth-chart',
dataset: dataset,
theme: uikit.Theme.light()
})
運行結果如下:
3.3 自定義主題
可以參考src/Theme.js中的dark或light主題,根據自己的需要進行自定義。
可以配置的主要選項詳見官網:http://sc.hubwiz.com/codebag/uikit-depth/
4、使用源代碼
如果自定義主題還不能滿足應用需求,那麼可以直接修改源代碼。
首先到官網下載源碼:http://sc.hubwiz.com/codebag/uikit-depth/ 。
然後解壓下載的代碼包:
~$ tar zxvf uikit-depth-1.0.0.tar.gz
DepthChart.js組件的源代碼位於src目錄下,其主要類以及相互關係如下圖所示:
修改完成後,需要重新構建UMD庫文件:
~/uikit$ npm install -g rollup
~/uikit$ npm run build
上面的命令首先全局安裝rollup
,然後執行組件庫的構建任務,最終在lib目錄下
生成可用於瀏覽器端的庫文件 - uikit.umd.js
。