Bắt đầu

Cài đặt TradeCanvas và hiển thị một biểu đồ trong chưa đầy một phút.

Cài đặt

Dùng trình quản lý gói nào bạn thích:

npm install @tradecanvas/chart
# or
pnpm add @tradecanvas/chart
# or
yarn add @tradecanvas/chart

Widget dùng ngay

ChartWidget là cách nhanh nhất để có một biểu đồ chạy được. Nó dựng toàn bộ giao diện giao dịch bên trong bất kỳ phần tử chứa nào — thanh công cụ, thanh bên công cụ vẽ, hộp thoại cài đặt, thanh trạng thái — mà không phụ thuộc vào framework nào.

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

const widget = new ChartWidget(document.getElementById('chart')!, {
  symbol: 'BTCUSDT',
  timeframe: '5m',
  theme: 'dark',
  adapter: new BinanceAdapter(),
  historyLimit: 500,
  trading: true,
  // Optional features
  watchlist: true,         // right-side sparkline panel
  persistLayouts: true,    // remember per-symbol indicators / drawings
  // dragDropImport defaults to true — drop a CSV / JSON onto the chart
})

Ngay khi cài xong, widget đã hỗ trợ đầy đủ các thao tác quen thuộc của trader chuyên nghiệp: kéo qua nến cuối vào vùng tương lai còn trống, kéo trục giá/thời gian để co giãn, Ctrl/⌘+kéo để chọn nhiều hình vẽ, Shift+kéo để đo, Alt+bấm để ghim chú thích, Ctrl/⌘+K để mở bảng lệnh, Ctrl/⌘+P để tìm mã, và ? để xem toàn bộ bảng phím tắt.

Chart headless

Để toàn quyền kiểm soát giao diện xung quanh, hãy dùng trực tiếp lớp Chart ở tầng thấp hơn. Bạn tự làm thanh công cụ, mà vẫn giữ đủ mọi tính năng:

import { Chart } from '@tradecanvas/chart'

const chart = new Chart(host, {
  chartType: 'candlestick',
  theme: 'dark',
})

chart.setData(bars)
chart.addIndicator('sma', { period: 20 })

Wrapper cho framework

Wrapper cho React, Vue và Svelte có trong mục framework.

Bước tiếp theo