系統稽核

它能做什麼，又做得多快。

本頁所列的一切都包含在 @tradecanvas/chart 1.30.0 中。畫面時間是在一台內建顯示晶片（Intel UHD）的筆電上以 Chrome 量測；在儲存庫中執行 node scripts/bench-render.mjs，就能在你自己的電腦上跑相同的場景。

架構: 如何在一般筆電上保持快速。 →

18
圖表類型: 134
內建指標: 69
繪圖工具: 30
元件語言: 101
樣式鍵: 114
元件功能開關: 0
第三方執行期相依套件: 3,000+
單元測試

在你的電腦上量測

上面的數字來自我們的筆電。這些測試會在你的瀏覽器中，以你實際會發布的函式庫跑相同的場景。沒有任何預先錄製的內容。

1,000,000 根K線：先 Canvas 2D，再 WebGL

一百萬根一分鐘K線，帶布林通道、EMA、RSI 與 MACD，縮小到最遠並平移 150 格畫面，先以 Canvas 2D 繪製，再以 WebGL 2 繪製。

100,000 根K線上的即時 tick

每格畫面都有二十筆 tick 落在一張有 100,000 根K線與四個指標的圖表上。每個指標都從最後一根K線更新，而不是重算整個序列。

1,000 檔商品的報價看板

bo-grid 載入 1,000 檔商品，每秒更新 50 次。每個變動的儲存格都會閃爍，而且只重繪這些儲存格。

WebGL 2，底層由 Canvas 2D 接手

renderer: 'webgl' 在 GPU 上繪製繪圖區：K線、成交量、指標線與填色、深度熱力圖。文字保留在其上方的 Canvas 2D 圖層。'auto' 會在支援 WebGL 2 的地方選用 WebGL。
沒有 WebGL 2 或其內容遺失時，同一張圖表會繼續以 Canvas 2D 繪製。你的程式碼完全不用改。
同一頁面上最多 8 張圖表同時以 WebGL 繪製（setMaxWebGLCharts）；其餘以 Canvas 2D 繪製，等有 WebGL 內容釋出時再回到 WebGL。
兩種渲染器都把K線畫在相同的裝置像素上，因此無論由哪一個繪製，圖表看起來都一樣。

畫面時間

平移時繪製一格畫面所需的時間。16.7 ms 即每秒 60 格。

圖表	像素比	Canvas 2D	WebGL
1600×900，500 根K線 + 4 個指標	2×	27.4 ms	19.6 ms
1600×900，縮小顯示 200,000 根K線 + 4 個指標	2×	34.5 ms	20.2 ms
1600×900，縮小顯示 1,000,000 根K線 + 4 個指標	2×	34.5 ms	16.7 ms
1600×900，深度熱力圖，240 個快照 × 80 檔	2×	25.5 ms	16.8 ms
六張圖表，各有 500 根K線與 2 個指標	2×	23.5 ms	17.2 ms
2560×1400，2,000 根K線 + 4 個指標	1×	41.6 ms	17.7 ms
2560×1400，2,000 根K線 + 4 個指標	1.5×	70.8 ms	17.6 ms
2560×1400，2,000 根K線 + 4 個指標	2×	114.5 ms	29.1 ms

預設使用 Canvas 2D。renderer: 'webgl'（或 'auto'）以 WebGL 2 繪製繪圖區；沒有 WebGL 2 或其內容遺失時，會退回 Canvas 2D。

資料路徑

在 100,000 根K線上帶布林通道、EMA、RSI 與 MACD 時處理一筆即時 tick: ~0.001 ms
在 100,000 根K線上完整重算這四個指標: ~27 ms
一條 1,000,000 個可見點的折線，為一格畫面降取樣: ~2.6 ms
一次懸停重繪（十字游標、圖例）: ~0.2 ms
切換商品或週期時，超過此時間才顯示載入遮罩: 200 ms

下載大小

經壓縮與 gzip 後的大小，含其匯入的所有內容。

Chart，headless API: 176 KB
ChartWidget，完整介面: 315 KB
WebGL 渲染器，首次使用時載入: 18 KB

如何檢驗

七個套件共 3,000 多個單元測試，每個拉取請求都會在 CI 中執行。
WebGL 渲染器把K線畫在與 Canvas 2D 相同的裝置像素上；線條與填色只在少數反鋸齒邊緣像素上有差異。
WebGL 渲染器已在 Chromium、Firefox 與 WebKit 中檢驗。沒有 WebGL 2 或其內容遺失時，圖表會繼續以 Canvas 2D 繪製。
文件與代理技能中的程式碼範例，都會對照真實 API 進行型別檢查。
圖表可由螢幕閱讀器朗讀，也能完全以鍵盤操作；元件在阿拉伯文、希伯來文與波斯文下由右至左顯示。

功能

依領域篩選，或以名稱或 API 搜尋。

80 / 80

功能	領域	細節與 API
蠟燭圖、美國線、折線、面積圖、基準線、平均K線、空心蠟燭圖	圖表類型	candlestick, bar, line, area, baseline, heikinAshi, hollowCandle
Renko、新價線、Kagi、點數圖、區間K線	圖表類型	磚塊大小或 ATR、突破所需的線數、以百分比或價格計的反轉幅度、每根K線的區間
成交量蠟燭圖、等量圖、HLC 面積圖、階梯線、帶標記的折線、高低圖	圖表類型	共 18 種圖表類型
隱藏主序列	圖表類型	只保留指標與繪圖
儀表板圖表	圖表類型	長條圖（分組、堆疊、橫向）、環圈圖與圓餅圖、散布圖與泡泡圖、直方圖、日曆圖、相關矩陣、類股地圖、逆時鐘曲線、迷你走勢圖、儀表圖、熱力圖與矩形樹狀圖、瀑布圖、深度圖、權益曲線
Canvas 2D 或 WebGL 2	渲染	renderer: 'canvas' \| 'webgl' \| 'auto'、setRenderer、rendererChange 事件
縮小時每個像素欄只畫一段	渲染	每根K線不足一個像素時的指標線、通道帶與柱狀圖
流暢平移一百萬根K線	渲染	帶四個指標，像素比為 2
以 GPU 繪製深度熱力圖、成交量分佈與市場輪廓	渲染	pushDepthSnapshot(book, time)
同一頁面上的多張 WebGL 圖表	渲染	最多 8 張（setMaxWebGLCharts）；其餘以 Canvas 2D 繪製；內容恢復後切回 WebGL
任何螢幕縮放比例下都清晰	渲染	在 100%、125% 與 200% 下，K線、成交量與繪圖都對齊裝置像素
無第三方執行期相依套件	渲染	不必另外安裝或稽核任何東西
134 個內建指標	指標	六種樞紐點、MA Cross、與另一商品的相關性
價格來源	指標	open, high, low, hl2, hlc3, ohlc4, hlcc4
以指標為基礎的指標	指標	例如 RSI 的移動平均，每筆 tick 都會更新
一個副圖中放多個指標，並可在副圖間移動	指標	moveIndicatorToPane
同一指標加入多次	指標	EMA 20 與 EMA 50 並排顯示
水平線與門檻	指標	RSI 30/70、CCI ±100，隨版面配置一起儲存
座標軸上的最新值	指標	顯示在價格軸與各副圖的座標軸上，顏色與線條一致
副圖的收合、最大化與重新排序	指標	隨版面配置一起儲存
指標範本	指標	輸入參數、樣式、水平線與副圖一併儲存、一併套用
每條線的樣式與顯示	指標	隱藏的線不會撐開座標；setIndicatorDefaults
成交量差與 CVD	指標	根據K線估算
匯出指標數值	指標	CSV 或 JSON，每條線一欄
即時 tick 的增量更新	指標	update() 只重新計算正在形成的K線
69 種繪圖工具	繪圖工具	直線、通道、費波那契、江恩、叉形線、艾略特波浪、型態、週期、投影
每種工具各自的設定	繪圖工具	樣式、屬性，以及落在市場價格網格上的座標
多方與空方部位	繪圖工具	風險報酬比，依風險百分比或金額計算數量
繪圖上的警示	繪圖工具	價格穿越所畫的趨勢線或通道時觸發，對數座標同樣適用
層級、群組與範本	繪圖工具	上移、下移、群組、鎖定、隱藏
註記、標註、箭頭、旗標、筆刷、路徑、曲線	繪圖工具	手繪與多點繪製
錨定 VWAP 與固定區間成交量分佈	繪圖工具	讀取圖表本身的K線
橡皮擦、縮放框、強力磁吸、鍵盤快速鍵	繪圖工具	Alt+T, Alt+H, Alt+J, Alt+V, Alt+C, Alt+F
跳至日期；從 1D 到 All 的時間範圍	座標與時間	縮小不設上限
支援日光節約時間的 IANA 時區	座標與時間	或使用交易所自己的時區
任意週期，以及 tick K線	座標與時間	7m、90m、2d 由行情來源提供的資料組成；100T 由其成交組成
左右兩側座標；每個副圖可設對數、反轉與百分比	座標與時間	左側座標可用於疊加圖層，或作為價格座標的副本
商品比較、價差與比值	座標與時間	使用獨立的座標或副圖，依時間對齊
延長交易時段	座標與時間	依據商品的交易時段
價格與時間格式	座標與時間	priceFormat 可以是函式，或 1/32 這類分數；timeFormatter
依商品的小數位數與最小跳動點顯示座標	座標與時間	pricePrecision、minTick：以 10 為單位跳動的股票絕不會顯示 21,705
最高價與最低價線、買價與賣價	座標與時間	買賣價來自行情來源的 tick
圖表上的事件標記	座標與時間	signalMarkerHover, signalMarkerClick
現成的行情來源，也能接上你自己的	資料與即時行情	Binance、Bybit、Coinbase、Kraken、mock；WebSocketAdapter、PollingAdapter
向左捲動時載入更早的歷史	資料與即時行情	fetchHistoryBefore
附詳細資訊的商品搜尋	資料與即時行情	searchSymbols、resolveSymbol：小數位數、最小跳動點、交易時段、時區
連線後才取得的商品資訊	資料與即時行情	轉接器的 symbolInfo 事件
深度報價階梯	資料與即時行情	依價格顯示買賣掛單量；點擊即可交易
自選清單的即時報價	資料與即時行情	subscribeQuotes, setQuotes, getQuote
新聞與市場狀態	資料與即時行情	fetchNews；距離開盤或收盤的倒數
交易所規則	資料與即時行情	setMarket：依價格區間的升降單位、每日漲跌停價、交易單位、交易時段；HOSE、HNX、UPCoM 與 VN30 期貨
圖表上的委託與部位	交易	拖曳即可修改；直接在線上刪單、平倉與反手
成交標記	交易	executionFill 中附有原因與損益
下單面板	交易	數量、類型、停損與停利、有效期限，輸入時即時檢查；以及交易所的升降單位、漲停價、跌停價與交易單位
帳戶面板	交易	附即時損益的部位、未成交委託、成交紀錄
訊號與交易區域	交易	markers.、tradeZones. 樣式鍵
回測與風險指標	交易	@tradecanvas/analytics：手續費、滑價、Sharpe、Sortino、Calmar、回撤
不只價格水準的警示	警示與回放	線與線交叉、N 根K線內漲跌 N%、K線收盤時觸發、可設到期時間
更細步長的K線回放	警示與回放	以更小週期的K線回放較大的週期
在回放中模擬交易	警示與回放	委託以回放的價格成交
在圖表網格中同步回放	警示與回放	各圖表保持同步
供應用程式使用的回放	警示與回放	startTime、hideHistory、duration，隨播放逐步顯示的標記，replayComplete
同步連動的元件網格	工作區	最多 6 個，共用商品、週期、十字游標、時間與繪圖
存放在你自己儲存空間的具名版面配置	工作區	儲存、開啟、重新命名、自動儲存；以 LayoutStorage 接上伺服器
一切都能復原與重做	工作區	繪圖、指標、設定與圖表類型；recordUndo
依區域區分的右鍵選單	工作區	繪圖、繪圖區、副圖、價格軸、時間軸
自選清單	工作區	可建立多個清單，拖曳即可排序
供宿主應用程式使用的事件	工作區	symbolChange、timeframeChange、ordersChange、executionFill、styleChange 等
元件的三種外觀	自訂	Studio、Terminal、Capsule；ui 與 setUI；--tcw-* CSS 變數
依鍵自訂圖表外觀	自訂	applyOverrides 涵蓋 101 個具型別的鍵，分為宿主層與使用者層
涵蓋每個鍵的設定	自訂	目前圖表類型的樣式分頁，以及交易分頁
112 個功能開關	自訂	features、setFeatures、isFeatureOn；執行中即可變更
在元件中加入你自己的部件	自訂	工具列按鈕與下拉選單、側邊欄按鈕、狀態列項目、插槽、選單項目
自訂快速鍵	自訂	addHotkey，依鍵盤配置辨識
元件支援 30 種語言	語言與無障礙	阿拉伯文、希伯來文與波斯文由右至左顯示
螢幕閱讀器與鍵盤	語言與無障礙	圖表摘要、逐根朗讀K線、對話框可用鍵盤操作
本站提供 14 種語言，文件提供六種	語言與無障礙	English, Tiếng Việt, 简体中文, 繁體中文, 日本語, 한국어, Español, Português, Français, Deutsch, Русский, Türkçe, Bahasa Indonesia, ไทย
React、Vue 與 Svelte 元件	開發者	響應式 props：overrides、indicators、features
外掛	開發者	指標、繪圖工具、圖表類型與疊加圖層；以 overlayScale 與 getPriceStep 在價格網格上繪製
給程式設計代理的文件	開發者	llms.txt、llms-full.txt，以及一個代理技能

已知限制

在 WebGL 經過更多裝置試用之前，Canvas 2D 仍是預設渲染器；WebGL 在 Safari 與 5K 螢幕上的影格率尚未量測。
在 2560×1400 的圖表上、像素比為 2 時，光是瀏覽器的合成在內建顯示晶片上就要約 23 ms，因此該情境下 WebGL 畫面平均為 29 ms。
tick 週期由行情來源回傳的近期成交組成；無法載入更早的 tick 歷史。
成交量差與 CVD 是根據K線估算，而非依據每筆成交的買賣方向。
同一頁面上最多 8 張圖表同時以 WebGL 繪製；其餘以 Canvas 2D 繪製。

正在用 TradeCanvas 打造交易畫面嗎？

我們很樂意聽你分享。

[email protected]與我們聯絡