快速开始

安装 TradeCanvas，一分钟内即可渲染出图表。

安装

使用你习惯的包管理器：

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

开箱即用的组件

ChartWidget 是得到一个可用图表的最快方式。它会在任意宿主元素中渲染完整的 交易界面——工具栏、画线侧边栏、设置对话框、状态栏——且不依赖任何框架。

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
})

组件默认支持全套专业交易员手势： 拖动越过最后一根K线进入右侧空白区域，拖动价格轴 / 时间轴进行缩放， Ctrl/⌘+拖动框选多个画线，Shift+拖动进行测量， Alt+点击固定提示，Ctrl/⌘+K 打开命令面板，Ctrl/⌘+P 搜索代码， 按 ? 查看完整的快捷键列表。

无界面 Chart

如果要完全掌控周边界面，可以直接使用更底层的 Chart 类。工具栏由你自己实现，所有功能依然可用：

import { Chart } from '@tradecanvas/chart'

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

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

框架封装

React、Vue 和 Svelte 的封装组件见 框架一节。

下一步