框架封装

为 React、Vue 和 Svelte 提供符合各自习惯的封装组件。三者暴露相同的 props，并把底层的 Chart 实例交给你。

安装

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

Prop	类型	说明
symbol	string	必填。
timeframe	TimeFrame	'1m' | '5m' | '15m' | '1h' | '4h' | '1d'
theme	ThemeName	'dark' | 'light' | 'darkTerminal'
adapter	DataAdapter	实时数据源。
historyLimit	number	初始加载的K线数量。
trading	boolean	启用交易图层。
onReady	(chart) => void	图表挂载完成后触发。

props 不够用？可以通过 onReady、ref（React / Vue）或 bind:chart（Svelte）拿到底层的 Chart，使用完整 API—— 画线、交易、执行适配器、插件、可调整大小的窗格等等。