系統稽核

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

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

數字一覽

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

畫面時間

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

圖表像素比Canvas 2DWebGLCanvas 2D / WebGL
1600×900,500 根K線 + 4 個指標 · 2×227.4 ms19.6 ms
1600×900,縮小顯示 200,000 根K線 + 4 個指標 · 2×234.5 ms20.2 ms
1600×900,縮小顯示 1,000,000 根K線 + 4 個指標 · 2×234.5 ms16.7 ms
1600×900,深度熱力圖,240 個快照 × 80 檔 · 2×225.5 ms16.8 ms
六張圖表,各有 500 根K線與 2 個指標 · 2×223.5 ms17.2 ms
2560×1400,2,000 根K線 + 4 個指標 · 1×141.6 ms17.7 ms
2560×1400,2,000 根K線 + 4 個指標 · 1.5×1.570.8 ms17.6 ms
2560×1400,2,000 根K線 + 4 個指標 · 2×2114.5 ms29.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線、對話框可用鍵盤操作
文件提供六種語言,本站提供十四種語言與無障礙English, Tiếng Việt, 简体中文, 日本語, 한국어, Español
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 繪製。