基於 canvas 的市場交易深度圖 JS 實現

ciga發表於2019-08-03
CanvasJS

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。

相關文章