框架封装

为 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

你自己的 K 线、带参数的指标，以及一个从不自行打开数据流的图表：

<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	类型	说明
symbol	string	数据流的交易对。默认 'BTCUSDT'。
timeframe	TimeFrame	数据流的周期。默认 '5m'。
theme	'dark' | 'light' | Theme	默认 'dark'。
chartType	ChartType	默认 'candlestick'。
data	OHLCBar[]	你自己的 K 线，原样显示。挂载时就提供则不打开数据流；之后才提供，已打开的数据流保持不变（stream=false 会关闭它）。在 Vue 和 Svelte 中，向同一数组追加的 K 线或最后一根 K 线的变化会作为实时 tick 传入，视图保持不动；新的数组则是一个新序列。
adapter	DataAdapter	数据流的来源；不提供时使用 Binance。
stream	boolean	false：完全不打开数据流，图表等待 data。默认 true。
historyLimit	number	数据流首先加载的 K 线数。默认 500。
indicators	IndicatorSpec[]	'rsi'，或 { id, params, position }；参数改变的指标会以新参数重新添加。
features	FeaturesConfig	用户能在图表上做什么；挂载后的修改同样生效。
signalMarkers / tradeZones	数组	买卖标记和交易；回放到达时才显示。
signalMarkerStyle / tradeZoneStyle	样式	它们的颜色和标签。
overrides	ChartStyleOverrides	按键名设置图表外观（见样式）。
autoScale	boolean	默认 true。
watermarkText	string	K 线后面的水印文字。
options	Partial<ChartOptions>	props 未涵盖的图表选项（maxBarSpacing、rightMargin、renderer…），挂载时合并到组件默认值之上。挂载后的修改不会生效；chartType、theme 和 autoScale 始终取自各自的 props。
onReady	(chart) => void	图表挂载之后（Vue：ready 事件）。

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