Wrapper cho framework

Wrapper đúng phong cách cho React, Vue và Svelte. Cả ba có cùng một bộ props và trao cho bạn instance Chart bên dưới.

Cài đặt

npm install @tradecanvas/react   # or @tradecanvas/vue · @tradecanvas/svelte
npm install @tradecanvas/chart   # the core (peer of each wrapper)

React

import { TradeCanvas, type TradeCanvasRef } from '@tradecanvas/react'
import { BinanceAdapter } from '@tradecanvas/chart'
import { useRef } from 'react'

function App() {
  const chartRef = useRef<TradeCanvasRef>(null)

  return (
    <TradeCanvas
      ref={chartRef}
      symbol="BTCUSDT"
      timeframe="5m"
      theme="dark"
      adapter={new BinanceAdapter()}
      onReady={(chart) => {
        chart.on('orderPlace', e => console.log(e.payload))
      }}
    />
  )
}

Vue

<script setup lang="ts">
import { TradeCanvas } from '@tradecanvas/vue'
import { BinanceAdapter } from '@tradecanvas/chart'

const adapter = new BinanceAdapter()
</script>

<template>
  <TradeCanvas
    symbol="BTCUSDT"
    timeframe="5m"
    theme="dark"
    :adapter="adapter"
    @ready="(chart) => console.log('ready', chart)"
  />
</template>

Svelte

<script lang="ts">
  import { TradeCanvas } from '@tradecanvas/svelte'
  import { BinanceAdapter } from '@tradecanvas/chart'

  const adapter = new BinanceAdapter()
</script>

<TradeCanvas
  symbol="BTCUSDT"
  timeframe="5m"
  theme="dark"
  {adapter}
  onReady={(chart) => console.log('ready', chart)}
/>

Props dùng chung

Nến của riêng bạn, chỉ báo kèm tham số, và một biểu đồ không bao giờ tự mở luồng dữ liệu:

<script lang="ts">
  import { TradeCanvas } from '@tradecanvas/svelte'
  import type { Chart } from '@tradecanvas/chart'

  let { bars } = $props()
  let chart = $state<Chart | null>(null)
</script>

<TradeCanvas
  data={bars}
  stream={false}
  indicators={['rsi', { id: 'ema', params: { period: 50 } }]}
  features={{ replay: true }}
  bind:chart
/>

Prop	Kiểu	Ghi chú
symbol	string	Mã của luồng dữ liệu. Mặc định 'BTCUSDT'.
timeframe	TimeFrame	Khung thời gian của luồng. Mặc định '5m'.
theme	'dark' | 'light' | Theme	Mặc định 'dark'.
chartType	ChartType	Mặc định 'candlestick'.
data	OHLCBar[]	Nến của riêng bạn, hiện đúng như vậy. Có ngay lúc mount thì không mở luồng nào; đưa vào sau thì luồng đang mở vẫn giữ (stream=false sẽ đóng nó). Với Vue và Svelte, nến push thêm vào cùng mảng, hoặc nến cuối thay đổi, được đưa vào như một tick realtime và khung nhìn giữ nguyên; một mảng mới là một chuỗi dữ liệu mới.
adapter	DataAdapter	Nguồn của luồng; không có thì dùng Binance.
stream	boolean	false: không có luồng nào, biểu đồ chờ data. Mặc định true.
historyLimit	number	Số nến luồng nạp lúc đầu. Mặc định 500.
indicators	IndicatorSpec[]	'rsi', hoặc { id, params, position }; chỉ báo nào đổi tham số sẽ được đặt lại với tham số mới.
features	FeaturesConfig	Người dùng được làm gì trên biểu đồ; đổi sau khi mount cũng có hiệu lực.
signalMarkers / tradeZones	mảng	Điểm mua, bán và lệnh giao dịch; phát lại sẽ hiện chúng khi chạy tới.
signalMarkerStyle / tradeZoneStyle	style	Màu và nhãn của chúng.
overrides	ChartStyleOverrides	Giao diện biểu đồ theo khoá (xem Giao diện).
autoScale	boolean	Mặc định true.
watermarkText	string	Chữ chìm phía sau các nến.
options	Partial<ChartOptions>	Tuỳ chọn của chart mà các prop không có (maxBarSpacing, rightMargin, renderer…), gộp đè lên mặc định của component khi mount. Đổi sau khi mount không được áp dụng; chartType, theme và autoScale luôn lấy từ prop của chúng.
onReady	(chart) => void	Sau khi biểu đồ mount (Vue: sự kiện ready).

Cần nhiều hơn những gì props cung cấp? Truy cập Chart bên dưới qua onReady, một ref (React / Vue) hoặc bind:chart (Svelte) để dùng toàn bộ API — hình vẽ, giao dịch, adapter khớp lệnh, plugin, bảng đổi được kích thước và nhiều thứ khác.