Widget incrustable

Inserta un gráfico de trading totalmente configurado en cualquier página con una sola URL de <iframe>. Sin npm install ni paso de compilación.

iframe básico

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

Parámetros de la URL

Parámetro	Predeterminado	Notas
symbol	BTCUSDT	Símbolo de Binance.
timeframe	5m	1m, 5m, 15m, 1h, 4h, 1d.
theme	dark	dark, light, darkTerminal.
chartType	candlestick	Cualquiera de los 18 tipos.
indicators	ninguno	Ids separados por comas, p. ej. indicators=sma,rsi.
trading	false	Muestra el panel de trading.

En una app de móvil

El gráfico y el widget funcionan en cualquier WebView: React Native (react-native-webview), Capacitor, Tauri o el de una app nativa. Por debajo de 641 px de ancho, el widget se organiza para un móvil: la barra conserva el símbolo, el intervalo, el tipo de gráfico y los indicadores y deja el resto bajo «más»; las herramientas de dibujo esperan tras un botón sobre el gráfico; los menús se abren como hojas desde abajo; una cuadrícula muestra un gráfico a la vez, con una pestaña para cada uno. Más ancho, una barra que no cabe hace lo mismo. Un dedo hace lo que hace un ratón.

Dé a la página un viewport que cubra la pantalla. El widget mantiene sus hojas lejos de la muesca y la barra de inicio, y por encima del teclado en pantalla.

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

La mayoría de los WebView avisan de que la página está oculta cuando la app pasa a segundo plano: el gráfico deja de dibujar por sí solo (pauseWhenHidden) y un flujo callado demasiado tiempo se reconecta cuando la app vuelve. Si el suyo no avisa, páuselo desde la app.

// 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()));

Un gráfico dentro de una pantalla que se desplaza deja los deslizamientos verticales a la pantalla.

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

La política de seguridad de contenido de Tauri debe permitir que la página llegue a los hosts del feed de datos.

// 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"
  }
}

El gráfico dibuja como mucho a una densidad de píxeles de 2 (maxPixelRatio); destrúyalo (chart.destroy()) cuando se cierre su pantalla y la memoria de sus lienzos vuelve enseguida.

Página en vivo

Abre directamente la ruta de incrustación para previsualizarlo sin la interfaz de la documentación.