埋め込みウィジェット

<iframe> の URL ひとつで、設定済みのトレーディングチャートを任意のページに配置できます。 npm install もビルド手順も不要です。

基本の 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、ネイティブアプリ独自のもの。幅が 641 px 未満ではウィジェットがスマートフォン向けに並びます：ツールバーにはシンボル、時間足、チャートの種類、インジケーターが残り、残りは「その他」の中へ。描画ツールはチャート上のボタンの奥に、メニューは下からのシートで開き、グリッドはチャートを 1 つずつタブで切り替えて表示します。幅が広くても、収まらないツールバーは同じようにします。指でマウスと同じことができます。

画面全体を覆う 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()）すると、キャンバスのメモリはすぐに返されます。

ライブページ

ドキュメントの枠なしでプレビューするには、埋め込み用のルートに直接アクセスしてください。