一個基於純 HTML5 Canvas 的加密貨幣訂單簿深度圖(Depth Chart)視覺化工具,無需任何外部依賴。
- 階梯式深度圖 — 以買單(Bid)和賣單(Ask)的累積數量繪製經典階梯面積圖
- 即時模擬更新 — 每 2 秒自動模擬訂單簿數據變動,呈現動態效果
- 對稱十字準線 — 滑鼠移動時,自動在買賣雙方顯示對稱的高亮點與十字線
- 互動式 Tooltip — 懸停時顯示價差幅度、價格、累積金額等資訊
- 中間價虛線 — 以虛線標示買賣最佳價的中間價位
- 高 DPI 支援 — 自動適配 Retina / 高解析度螢幕
- 響應式佈局 — 監聽視窗 resize 事件,自動重繪
本專案為單一 HTML 檔案,無需安裝任何依賴:
# 直接用瀏覽器開啟
open index.html
# 或使用任意靜態伺服器
npx serve .| 項目 | 說明 |
|---|---|
| 渲染方式 | HTML5 Canvas 2D |
| 外部依賴 | 無 |
| 模擬中間價 | 70,770 |
| 訂單數量 | 買賣各 80 筆 |
| 更新頻率 | 每 2 秒 |
| 元素 | 色碼 |
|---|---|
| 背景 | #1e222d |
| 買單線 | #26a69a |
| 賣單線 | #ef5350 |
depth-chart/
└── index.html # 包含所有樣式、邏輯與渲染的單頁應用
MIT