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

Prop	Kiểu	Ghi chú
symbol	string	Bắt buộc.
timeframe	TimeFrame	'1m' | '5m' | '15m' | '1h' | '4h' | '1d'
theme	ThemeName	'dark' | 'light' | 'darkTerminal'
adapter	DataAdapter	Nguồn dữ liệu trực tiếp.
historyLimit	number	Số nến tải ban đầu.
trading	boolean	Bật lớp phủ giao dịch.
onReady	(chart) => void	Chạy sau khi biểu đồ được gắn vào trang.

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.