1.000.000 nến: Canvas 2D rồi WebGL
Một triệu nến một phút kèm Bollinger Bands, EMA, RSI và MACD, thu nhỏ hết cỡ rồi kéo qua lại 150 khung hình, vẽ bằng Canvas 2D trước rồi bằng WebGL 2.
Audit hệ thống
Làm được gì, và nhanh tới đâu.
Mọi thứ trên trang này đều có trong @tradecanvas/chart 1.26.0. Thời gian vẽ được đo trên Chrome, trên một laptop dùng GPU tích hợp (Intel UHD); lệnh node scripts/bench-render.mjs trong repo chạy đúng các cảnh này trên máy của bạn.
Các con số
- 18
- loại biểu đồ
- 134
- chỉ báo có sẵn
- 69
- công cụ vẽ
- 30
- ngôn ngữ của widget
- 101
- khoá style
- 114
- công tắc tính năng của widget
- 0
- thư viện bên thứ ba khi chạy
- 3.000+
- unit test
Đo ngay trên máy của bạn
Các con số ở trên đo trên laptop của chúng tôi. Những bài đo dưới đây chạy cùng các cảnh đó trong trình duyệt của bạn, bằng đúng thư viện bạn sẽ dùng. Không có gì được ghi sẵn.
Tick trực tiếp trên 100.000 nến
Mỗi khung hình nhận 20 tick trên biểu đồ 100.000 nến có bốn chỉ báo. Mỗi chỉ báo cập nhật từ nến cuối thay vì tính lại cả chuỗi.
Bảng giá 1.000 mã
bo-grid với 1.000 mã được cập nhật 50 lần mỗi giây. Ô nào đổi giá thì nháy màu, và chỉ những ô đó được vẽ lại.
WebGL 2, có Canvas 2D làm nền
renderer: 'webgl'vẽ phần biểu đồ bằng GPU: nến, khối lượng, đường và vùng tô của chỉ báo, heatmap độ sâu. Chữ vẫn nằm trên một lớp Canvas 2D phía trên.'auto'tự chọn WebGL ở mọi nơi có WebGL 2.- Nơi không có WebGL 2, hoặc context bị mất, cùng biểu đồ đó tiếp tục chạy bằng Canvas 2D. Code của bạn không phải đổi gì.
- Tối đa 8 biểu đồ trên một trang vẽ bằng WebGL cùng lúc (
setMaxWebGLCharts); các biểu đồ còn lại vẽ bằng Canvas 2D và quay về WebGL khi có context trống. - Nến nằm trên cùng các điểm ảnh ở cả hai cách vẽ, nên biểu đồ trông như nhau dù cách nào đang vẽ.
Thời gian vẽ một khung hình
Thời gian vẽ một khung hình khi kéo biểu đồ. 16,7 ms là 60 khung hình mỗi giây.
| Biểu đồ | Tỉ lệ điểm ảnh | Canvas 2D | WebGL | Canvas 2D / WebGL |
|---|---|---|---|---|
| 1600×900, 500 nến + 4 chỉ báo | 2× | 27,4 ms | 19,6 ms | |
| 1600×900, thu nhỏ hết cỡ trên 200.000 nến + 4 chỉ báo | 2× | 34,5 ms | 20,2 ms | |
| 1600×900, thu nhỏ hết cỡ trên 1.000.000 nến + 4 chỉ báo | 2× | 34,5 ms | 16,7 ms | |
| 1600×900, heatmap độ sâu, 240 lần chụp × 80 mức giá | 2× | 25,5 ms | 16,8 ms | |
| Sáu biểu đồ, mỗi biểu đồ 500 nến và 2 chỉ báo | 2× | 23,5 ms | 17,2 ms | |
| 2560×1400, 2.000 nến + 4 chỉ báo | 1× | 41,6 ms | 17,7 ms | |
| 2560×1400, 2.000 nến + 4 chỉ báo | 1,5× | 70,8 ms | 17,6 ms | |
| 2560×1400, 2.000 nến + 4 chỉ báo | 2× | 114,5 ms | 29,1 ms |
Mặc định vẽ bằng Canvas 2D. renderer: 'webgl' (hoặc 'auto') vẽ vùng biểu đồ bằng WebGL 2, và tự quay về Canvas 2D khi trình duyệt không có WebGL 2 hoặc mất context.
Đường đi của dữ liệu
- Một tick trực tiếp, có Bollinger Bands, EMA, RSI và MACD trên 100.000 nến
- ~0,001 ms
- Tính lại toàn bộ bốn chỉ báo đó trên 100.000 nến
- ~27 ms
- Một đường 1.000.000 điểm trên màn hình, rút gọn cho một khung hình
- ~2,6 ms
- Vẽ lại khi rê chuột (crosshair, legend)
- ~0,2 ms
- Đổi mã hay khung thời gian chỉ hiện lớp chờ sau
- 200 ms
Dung lượng tải
Đã minify và gzip, gồm mọi thứ nó import.
- Chart, phần API không giao diện
- 176 KB
- ChartWidget, giao diện đầy đủ
- 315 KB
- Bộ vẽ WebGL, chỉ tải khi dùng lần đầu
- 18 KB
Cách kiểm tra
- Hơn 3.000 unit test trên bảy gói chạy trên CI với mọi pull request.
- Bộ vẽ WebGL vẽ nến trên đúng các điểm ảnh thiết bị như Canvas 2D; đường và vùng tô chỉ khác ở vài điểm ảnh khử răng cưa ở mép.
- Bộ vẽ WebGL đã được kiểm trên Chromium, Firefox và WebKit. Không có WebGL 2, hoặc khi mất context, biểu đồ vẽ tiếp bằng Canvas 2D.
- Các đoạn code mẫu trong tài liệu và trong agent skill được kiểm kiểu với API thật.
- Biểu đồ đọc được bằng trình đọc màn hình và dùng được bằng bàn phím; widget hiển thị phải sang trái với tiếng Ả Rập, Do Thái và Ba Tư.
Tính năng
Lọc theo nhóm, hoặc tìm theo tên hay API.
80 / 80
| Tính năng | Nhóm | Chi tiết và API |
|---|---|---|
| Nến, thanh OHLC, đường, vùng, baseline, Heikin-Ashi, nến rỗng | Loại biểu đồ | candlestick, bar, line, area, baseline, heikinAshi, hollowCandle |
| Renko, line break, Kagi, point & figure, range bars | Loại biểu đồ | Cỡ ô hoặc ATR, số đường để đảo chiều, đảo chiều theo % hoặc theo giá, biên độ mỗi thanh |
| Volume candles, Equivolume, HLC area, step line, đường có điểm, high-low | Loại biểu đồ | 18 loại biểu đồ tất cả |
| Ẩn chuỗi giá chính | Loại biểu đồ | Chỉ giữ lại chỉ báo và hình vẽ |
| Biểu đồ cho dashboard | Loại biểu đồ | Cột (nhóm, chồng, nằm ngang), donut và tròn, scatter và bong bóng, histogram, lịch, ma trận tương quan, bản đồ theo ngành, đường ngược chiều kim đồng hồ, sparkline, đồng hồ đo, bản đồ nhiệt và treemap, thác nước, độ sâu, đường cong vốn |
| Canvas 2D hoặc WebGL 2 | Hiển thị | renderer: 'canvas' | 'webgl' | 'auto', setRenderer, sự kiện rendererChange |
| Mỗi cột điểm ảnh một nét khi thu nhỏ | Hiển thị | Đường, dải và histogram của chỉ báo khi mỗi nến hẹp hơn một điểm ảnh |
| Một triệu nến kéo vẫn mượt | Hiển thị | Kèm bốn chỉ báo, ở tỉ lệ điểm ảnh 2 |
| Heatmap độ sâu, volume profile và market profile trên GPU | Hiển thị | pushDepthSnapshot(book, time) |
| Nhiều biểu đồ WebGL trên một trang | Hiển thị | Tối đa 8 (setMaxWebGLCharts); phần còn lại vẽ bằng Canvas 2D; trở lại WebGL khi context quay về |
| Sắc nét ở mọi tỉ lệ màn hình | Hiển thị | Nến, volume và hình vẽ nằm đúng điểm ảnh thiết bị ở 100%, 125% và 200% |
| Không phụ thuộc thư viện bên thứ ba khi chạy | Hiển thị | Không có gì khác phải cài hay rà soát |
| 134 chỉ báo có sẵn | Chỉ báo | Pivot points 6 kiểu, MA Cross, tương quan với mã khác |
| Chọn nguồn giá | Chỉ báo | open, high, low, hl2, hlc3, ohlc4, hlcc4 |
| Chỉ báo chồng lên chỉ báo | Chỉ báo | Như đường trung bình của RSI, cập nhật theo từng tick |
| Nhiều chỉ báo trong một pane, chuyển giữa các pane | Chỉ báo | moveIndicatorToPane |
| Nhiều bản của cùng một chỉ báo | Chỉ báo | EMA 20 và EMA 50 cạnh nhau |
| Mức và ngưỡng | Chỉ báo | RSI 30/70, CCI ±100, lưu cùng layout |
| Giá trị cuối trên trục | Chỉ báo | Trên trục giá và trục của từng pane, theo màu của đường |
| Thu gọn, phóng to, sắp xếp pane | Chỉ báo | Lưu cùng layout |
| Template chỉ báo | Chỉ báo | Thông số, kiểu, mức và pane, lưu và áp dụng cùng lúc |
| Kiểu và ẩn/hiện từng đường | Chỉ báo | Đường bị ẩn không kéo giãn thang; setIndicatorDefaults |
| Volume delta và CVD | Chỉ báo | Ước tính từ nến |
| Xuất giá trị chỉ báo | Chỉ báo | CSV hoặc JSON, mỗi đường một cột |
| Cập nhật tăng dần theo tick | Chỉ báo | update() chỉ tính lại nến đang hình thành |
| 69 công cụ vẽ | Công cụ vẽ | Đường, kênh, Fibonacci, Gann, pitchfork, sóng Elliott, mô hình giá, chu kỳ, dự phóng |
| Cài đặt riêng cho từng công cụ | Công cụ vẽ | Kiểu, thuộc tính và toạ độ theo lưới giá của mã |
| Vị thế mua và bán | Công cụ vẽ | Tỉ lệ lời:lỗ, khối lượng tính từ rủi ro theo % hoặc theo tiền |
| Cảnh báo theo hình vẽ | Công cụ vẽ | Khi giá cắt đường xu hướng hay kênh đúng như đã vẽ, cả trên thang log |
| Thứ tự lớp, nhóm và template | Công cụ vẽ | Đưa lên, đưa xuống, gom nhóm, khoá, ẩn |
| Ghi chú, chú thích, mũi tên, cờ, bút vẽ, path, đường cong | Công cụ vẽ | Vẽ tay và vẽ nhiều điểm |
| Anchored VWAP và volume profile theo khoảng | Công cụ vẽ | Đọc nến của biểu đồ |
| Tẩy, zoom vùng, nam châm mạnh, phím tắt | Công cụ vẽ | Alt+T, Alt+H, Alt+J, Alt+V, Alt+C, Alt+F |
| Đi tới ngày; khoảng 1D tới All | Thang và thời gian | Không giới hạn thu nhỏ |
| Múi giờ IANA có giờ mùa hè | Thang và thời gian | Hoặc múi giờ của chính sàn |
| Khung thời gian bất kỳ, và nến tick | Thang và thời gian | 7m, 90m, 2d dựng từ khung nguồn có; 100T từ các giao dịch |
| Thang trái và phải; log, đảo ngược và % theo từng pane | Thang và thời gian | Thang trái cho overlay hoặc lặp lại thang giá |
| So sánh mã, spread và ratio | Thang và thời gian | Trên thang hoặc pane riêng, khớp theo thời gian |
| Giờ giao dịch mở rộng | Thang và thời gian | Theo giờ phiên của mã |
| Định dạng giá và thời gian | Thang và thời gian | priceFormat dạng hàm hoặc phân số như 1/32; timeFormatter |
| Thang giá theo số lẻ và bước giá của mã | Thang và thời gian | pricePrecision, minTick: cổ phiếu có bước giá 10 không bao giờ hiện 21.705 |
| Đường cao và thấp, giá mua và giá bán | Thang và thời gian | Giá mua và giá bán lấy từ tick của nguồn dữ liệu |
| Mốc sự kiện trên biểu đồ | Thang và thời gian | signalMarkerHover, signalMarkerClick |
| Nguồn dữ liệu có sẵn và nguồn của bạn | Dữ liệu và trực tiếp | Binance, Bybit, Coinbase, Kraken, mock; WebSocketAdapter, PollingAdapter |
| Tải thêm lịch sử khi kéo sang trái | Dữ liệu và trực tiếp | fetchHistoryBefore |
| Tìm mã kèm thông tin | Dữ liệu và trực tiếp | searchSymbols, resolveSymbol: số lẻ, bước giá, phiên, múi giờ |
| Thông tin mã biết được sau khi kết nối | Dữ liệu và trực tiếp | Sự kiện symbolInfo của adapter |
| Sổ lệnh dạng thang | Dữ liệu và trực tiếp | Khối lượng mua và bán theo mức giá; bấm để đặt lệnh |
| Giá trực tiếp cho watchlist | Dữ liệu và trực tiếp | subscribeQuotes, setQuotes, getQuote |
| Tin tức và trạng thái thị trường | Dữ liệu và trực tiếp | fetchNews; đếm ngược tới giờ mở hay đóng cửa |
| Quy định của sàn | Dữ liệu và trực tiếp | setMarket: bước giá theo vùng giá, giá trần và giá sàn trong ngày, lô, phiên giao dịch; HOSE, HNX, UPCoM và hợp đồng tương lai VN30 |
| Lệnh và vị thế trên biểu đồ | Giao dịch | Kéo để sửa; huỷ, đóng và đảo vị thế ngay trên đường |
| Dấu khớp lệnh | Giao dịch | Lý do và lãi/lỗ trong executionFill |
| Phiếu đặt lệnh | Giao dịch | Khối lượng, loại lệnh, cắt lỗ và chốt lời, hiệu lực, kiểm tra ngay khi nhập; bước giá, giá trần, giá sàn và lô của sàn |
| Bảng tài khoản | Giao dịch | Vị thế có lãi/lỗ trực tiếp, lệnh chờ, lịch sử khớp |
| Tín hiệu và vùng lệnh | Giao dịch | Khoá style markers.*, tradeZones.* |
| Backtest và chỉ số rủi ro | Giao dịch | @tradecanvas/analytics: phí, trượt giá, Sharpe, Sortino, Calmar, sụt giảm |
| Cảnh báo không chỉ theo mức giá | Cảnh báo và replay | Đường cắt đường, biến động N% trong N nến, khi đóng nến, có hạn dùng |
| Replay theo bước nhỏ hơn | Cảnh báo và replay | Khung lớn được phát lại từ nến nhỏ |
| Giao dịch giấy khi replay | Cảnh báo và replay | Lệnh khớp theo giá đang phát lại |
| Replay trên lưới nhiều biểu đồ | Cảnh báo và replay | Chạy đồng bộ |
| Replay cho ứng dụng | Cảnh báo và replay | startTime, hideHistory, duration, mốc hiện dần theo replay, replayComplete |
| Lưới widget đồng bộ | Không gian làm việc | Tối đa 6, chung mã, khung thời gian, crosshair, thời gian và hình vẽ |
| Layout có tên, lưu ở nơi của bạn | Không gian làm việc | Lưu, mở, đổi tên, tự lưu; LayoutStorage cho máy chủ |
| Hoàn tác và làm lại cho mọi thứ | Không gian làm việc | Hình vẽ, chỉ báo, cài đặt và loại biểu đồ; recordUndo |
| Menu chuột phải theo vùng | Không gian làm việc | Hình vẽ, vùng giá, pane, trục giá, trục thời gian |
| Watchlist | Không gian làm việc | Nhiều danh sách, kéo để sắp xếp |
| Sự kiện cho ứng dụng | Không gian làm việc | symbolChange, timeframeChange, ordersChange, executionFill, styleChange và nhiều hơn |
| Ba kiểu giao diện cho widget | Tuỳ biến | Studio, Terminal, Capsule; ui và setUI; biến CSS --tcw-* |
| Giao diện biểu đồ theo khoá | Tuỳ biến | applyOverrides trên 101 khoá có kiểu, ở lớp ứng dụng và lớp người dùng |
| Settings chỉnh được mọi khoá | Tuỳ biến | Tab style theo loại biểu đồ đang xem, tab giao dịch |
| 112 công tắc tính năng | Tuỳ biến | features, setFeatures, isFeatureOn; đổi được khi đang chạy |
| Thành phần của riêng bạn trong widget | Tuỳ biến | Nút và dropdown trên toolbar, nút sidebar, mục thanh trạng thái, slot, mục menu |
| Phím tắt của riêng bạn | Tuỳ biến | addHotkey theo bố cục bàn phím |
| Widget bằng 30 ngôn ngữ | Ngôn ngữ và trợ năng | Tiếng Ả Rập, Do Thái và Ba Tư hiển thị phải sang trái |
| Trình đọc màn hình và bàn phím | Ngôn ngữ và trợ năng | Tóm tắt biểu đồ, đọc từng nến, hộp thoại dùng bằng bàn phím |
| Trang web và tài liệu bằng bốn ngôn ngữ | Ngôn ngữ và trợ năng | English, Tiếng Việt, 한국어, 日本語 |
| Component cho React, Vue và Svelte | Nhà phát triển | Props phản ứng: overrides, indicators, features |
| Plugin | Nhà phát triển | Chỉ báo, công cụ vẽ, loại biểu đồ và overlay; overlayScale và getPriceStep để vẽ theo lưới giá |
| Tài liệu cho coding agent | Nhà phát triển | llms.txt, llms-full.txt và một agent skill |
Giới hạn đã biết
- Canvas 2D vẫn là bộ vẽ mặc định cho tới khi WebGL được thử trên nhiều thiết bị hơn; tốc độ khung hình trên Safari và màn hình 5K chưa được đo.
- Ở tỉ lệ điểm ảnh 2 với biểu đồ 2560×1400, riêng việc trình duyệt ghép các lớp đã mất khoảng 23 ms trên GPU tích hợp, nên khung hình WebGL ở đó trung bình 29 ms.
- Khung tick được dựng từ các giao dịch gần đây mà nguồn dữ liệu trả về; không tải được lịch sử tick cũ hơn.
- Volume delta và CVD được ước tính từ nến, không theo chiều của từng giao dịch.
- Tối đa 8 biểu đồ trên một trang vẽ bằng WebGL cùng lúc; các biểu đồ còn lại vẽ bằng Canvas 2D.
Bạn đang làm màn hình giao dịch với TradeCanvas?
Chúng tôi rất muốn nghe về nó.