可嵌入组件

只需一个 <iframe> 地址，即可把配置完整的交易图表放进任意页面。无需 npm 安装，也无需构建步骤。

基本 iframe

<iframe
  src="https://your-site/tradecanvas/embed/?symbol=BTCUSDT&timeframe=5m&theme=dark"
  width="800"
  height="500"
  style="border: 0; border-radius: 12px;"
></iframe>

URL 参数

参数	默认值	说明
`symbol`	`BTCUSDT`	Binance 交易对代码。
`timeframe`	`5m`	`1m`、`5m`、`15m`、`1h`、`4h`、`1d`。
`theme`	`dark`	`dark`、`light`、`darkTerminal`。
`chartType`	`candlestick`	18 种类型中的任意一种。
`indicators`	无	以逗号分隔的 id，例如 `indicators=sma,rsi`。
`trading`	`false`	显示交易面板。

在手机应用中

图表和组件可在任何 WebView 中运行：React Native（react-native-webview）、Capacitor、Tauri 或原生应用自己的 WebView。宽度小于 641 px 时，组件按手机布局：工具栏保留代码、周期、图表类型和指标，其余放进“更多”；绘图工具收在图表上的一个按钮后面；菜单以底部面板打开；网格一次只显示一个图表，每个图表一个标签。更宽时，放不下的工具栏也会这样。手指能做鼠标能做的一切。

给页面一个覆盖整个屏幕的 viewport。组件会让面板避开刘海和主屏幕指示条，并位于屏幕键盘之上。

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

大多数 WebView 会在应用转入后台时报告页面已隐藏：图表随即自行停止绘制（pauseWhenHidden），沉默太久的数据流会在应用回来时重新连接。若你的 WebView 不报告，请由应用来暂停。

// React Native (react-native-webview): the app tells the page
AppState.addEventListener('change', (state) => {
  webview.current?.injectJavaScript(state === 'active' ? 'chart.resume(); true;' : 'chart.suspend(); true;');
});

// Capacitor
import { App } from '@capacitor/app';
App.addListener('appStateChange', ({ isActive }) => (isActive ? chart.resume() : chart.suspend()));

放在可滚动屏幕里的图表把竖直滑动留给屏幕。

new Chart(host, { pageScroll: true })   // a chart in a screen that scrolls

Tauri 的内容安全策略必须允许页面访问数据源的主机。

// tauri.conf.json (Tauri 2): let the page reach the feed
"app": {
  "security": {
    "csp": "default-src 'self'; connect-src 'self' https://api.binance.com wss://stream.binance.com:9443"
  }
}

图表最多以 2 的像素比绘制（maxPixelRatio）；屏幕关闭时销毁它（chart.destroy()），画布内存立即归还。

在线页面

直接访问嵌入页面，即可在不带文档界面的情况下预览。