深度圖 Depth Chart

一個基於純 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    # 包含所有樣式、邏輯與渲染的單頁應用

License

MIT