Bộ máy biểu đồ cho ứng dụng giao dịch.

Từ nến Nhật đến Renko, 95 chỉ báo, 69 công cụ vẽ, dữ liệu trực tiếp từ sàn và đặt lệnh ngay trên biểu đồ. Vẽ bằng Canvas2D, không phụ thuộc thư viện nào. Gắn nguyên ChartWidget đầy đủ, hoặc tự dựng giao diện riêng trên Chart headless.

Bắt đầu Xem ví dụ

Vanilla TSReactVueSvelte

ĐANG KẾT NỐI · BINANCE · BTCUSDT · 5m Kéo di chuyểnCuộn phóng toKéo trục co giãn

17: loại biểu đồ
85: chỉ báo
40: công cụ vẽ
0: phụ thuộc khi chạy
≈100kB: gzip, lõi headless
<0.3ms: khung hình khi rê chuột, 100k nến

Feature Lab

Mọi tính năng, trên một biểu đồ trực tiếp.

Chọn một cảnh. Mỗi cảnh khởi động ChartWidget đầy đủ ở trạng thái làm nổi bật một mảng tính năng — sau đó tuỳ bạn kéo, vẽ và chuyển đổi.

Công cụ Fibonacci và Gann với mức tự chọn, sóng Elliott, mô hình harmonic, ghi chú và bút vẽ. Nhấp đúp vào hình vẽ để mở cài đặt, nhấp chuột phải để mở menu; cảnh báo bám theo đường xu hướng, và Long/Short tự tính khối lượng.

Công cụ Fibonacci và Gann với mức tự chọn, sóng Elliott, mô hình harmonic, ghi chú và bút vẽ. Nhấp đúp vào hình vẽ để mở cài đặt, nhấp chuột phải để mở menu; cảnh báo bám theo đường xu hướng, và Long/Short tự tính khối lượng.

Cuộn tới đây để chạy biểu đồ trực tiếp

Đổi mã hoặc khung thời gian để đo tốc độ chuyển

Thử ngay

Nhấp đúp vào Fibonacci thoái lui và sửa các mức
Nhấp chuột phải vào hình vẽ: đưa lên trên, nhóm lại hoặc thêm cảnh báo
Chọn bút vẽ hoặc công cụ đường nhiều điểm; Enter để kết thúc

chart.addDrawing({
  type: 'riskReward',               // Long/Short Position
  anchors: [entry, stop],           // { time, price } each
  options: { accountSize: 10_000, risk: 1, rewardRatio: 2 },
})
chart.addDrawingAlert(trendLine, { condition: 'crossing' })
chart.groupDrawings([fib, note], 'Swing')

Loại biểu đồ

Mọi loại biểu đồ, chạy trực tiếp trên trang

Mỗi ô là một đối tượng Chart thật, không phải ảnh. Kéo để di chuyển, cuộn để phóng to và rê chuột để xem con trỏ chữ thập; mỗi ô tự phản hồi riêng.

Nến OHLC

Heikin-Ashi Xu hướng

Vùng Giá đóng cửa

Đường cơ sở Trên / dưới

Thanh OHLC Cổ điển

Đường bậc thang Rời rạc

Bên trong

Có số đo, có tài liệu, tuỳ bạn mở rộng

Bộ máy đứng sau Feature Lab. Mọi con số bên dưới đều đo lại được bằng pnpm bench.

Thời gian mỗi khung hình

0.001ms: một tick trực tiếp, 4 chỉ báo trên 100k nến
27ms: tính lại toàn bộ sau khi đổi mã, 100k nến
0.32ms: giảm mẫu LTTB, 100k → 1.600 điểm
<0.3ms: khung hình khi rê chuột, không đổi từ 500 đến 100k nến

Hai lớp canvas chồng lên nhau: rê chuột chỉ vẽ lại lớp mỏng phía trên. Mọi bộ vẽ chỉ duyệt các nến đang hiện trên màn hình.

Thao tác

Kéo: di chuyển, qua cả nến cuối cùng
Cuộn: phóng to quanh con trỏ
Chụm: phóng to trên màn hình cảm ứng
Kéo sang phải: nến cũ hơn tải dần khi kéo
Kéo trục: co giãn trục đó
Ctrl + kéo: chọn hình vẽ
Shift + kéo: đo
Alt + bấm: ghim chú thích

WidgetMột lệnh gọi, đủ giao diện giao dịch: ChartWidget có sẵn thanh công cụ, thanh công cụ vẽ, danh mục theo dõi, cảnh báo, danh sách đối tượng, cửa sổ dữ liệu, phát lại và bảng lệnh (Ctrl+K), bằng 16 ngôn ngữ, từ tiếng Anh, tiếng Việt đến tiếng Trung, tiếng Nhật, tiếng Hàn và tiếng Ả Rập.
Dữ liệuMọi nguồn dữ liệu thị trường: Có sẵn adapter cho Binance, Coinbase, Bybit và Kraken; WebSocketAdapter và PollingAdapter cho mọi nguồn khác. Nến cũ hơn tải dần khi bạn cuộn về quá khứ; tự kết nối lại và bỏ qua lần đổi mã cũ khi đã có lần đổi mới hơn.
Giao dịchĐặt lệnh ngay trên biểu đồ: ExecutionAdapter kèm sàn giả lập, kéo để tạo lệnh, lệnh kèm SL/TP, đường dừng lỗ và chốt lời kéo được, cảnh báo gửi tới webhook và thông báo trên máy tính.
FrameworkReact, Vue và Svelte: @tradecanvas/react, /vue và /svelte bọc cùng một bộ máy, với props reactive và có kiểu. Đối tượng Chart đầy đủ luôn sẵn qua một ref.
PluginMở rộng mọi lớp: Đăng ký chỉ báo tuỳ chỉnh với update() tính tăng dần, công cụ vẽ, loại biểu đồ và lớp phủ, cho mọi biểu đồ hoặc cho từng biểu đồ.
Phân tíchBacktest ngay cạnh biểu đồ: Backtester chạy theo từng nến, kèm dải Monte Carlo, và quy trình tính chỉ báo trong Web Worker để luồng chính luôn rảnh.

Biểu đồ tài chính

Không chỉ có nến

Sparkline, đường cong vốn, độ sâu sổ lệnh, bản đồ nhiệt theo ngành, biểu đồ thác nước và đồng hồ đo cho danh mục đầu tư và KPI.

BTC $65,234

ETH $3,412

SOL $148.00

BNB $582.00

ADA $0.4500

DOT $7.23

Hiệu suất danh mục

Độ sâu sổ lệnh

Bản đồ nhiệt thị trường crypto

Phân bổ lãi/lỗ

Chỉ số Sợ hãi & Tham lam

Bắt đầu nhanh

Cùng một biểu đồ, năm cách bắt đầu

Widget đầy đủ, component cho framework hoặc bộ máy headless. Tất cả dùng chung một bộ vẽ.

import { ChartWidget } from '@tradecanvas/chart/widget'
import { BinanceAdapter } from '@tradecanvas/chart'

new ChartWidget(document.getElementById('chart')!, {
  symbol: 'BTCUSDT',
  timeframe: '5m',
  adapter: new BinanceAdapter(),
  locale: 'en',            // 14 languages: 'vi', 'ja', 'zh'…
  trading: true,
})

Đưa biểu đồ trực tiếp vào ứng dụng của bạn ngay hôm nay.

Đọc tài liệu Gắn sao trên GitHub