Widget nhúng

Đưa một biểu đồ giao dịch đã cấu hình đầy đủ vào bất kỳ trang nào chỉ bằng một URL <iframe>. Không cần npm install, không cần bước build.

● DemoDanh sách theo dõi và thông tin mãDữ liệu thị trường giả lập, sinh ngay trong trình duyệt của bạn

Iframe cơ bản

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

Tham số URL

Tham số	Mặc định	Ghi chú
`symbol`	`BTCUSDT`	Mã trên Binance.
`timeframe`	`5m`	`1m`, `5m`, `15m`, `1h`, `4h`, `1d`.
`theme`	`dark`	`dark`, `light`, `darkTerminal`.
`chartType`	`candlestick`	Bất kỳ loại nào trong 18 loại.
`indicators`	không có	Các id cách nhau bằng dấu phẩy, ví dụ `indicators=sma,rsi`.
`trading`	`false`	Hiện bảng giao dịch.

Trong ứng dụng điện thoại

Biểu đồ và widget chạy trong mọi WebView: React Native (react-native-webview), Capacitor, Tauri, hay WebView riêng của ứng dụng native. Hẹp hơn 641 px, widget tự bố trí cho điện thoại: thanh công cụ giữ mã, khung thời gian, loại biểu đồ và chỉ báo, phần còn lại nằm trong nút “thêm”; công cụ vẽ nằm sau một nút trên biểu đồ; menu mở thành bảng trượt từ dưới lên; lưới chỉ hiện một biểu đồ mỗi lúc, mỗi biểu đồ một tab. Rộng hơn, thanh công cụ không vừa cũng làm như vậy. Ngón tay làm được mọi việc của chuột.

Cho trang một viewport phủ cả màn hình. Widget giữ các bảng trượt tránh tai thỏ và thanh home, và nằm trên bàn phím ảo.

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

Phần lớn WebView báo trang bị ẩn khi ứng dụng xuống nền: biểu đồ tự ngừng vẽ (pauseWhenHidden), và luồng dữ liệu im lặng quá lâu sẽ kết nối lại khi ứng dụng trở lại. Nếu WebView của bạn không báo, hãy tạm dừng từ phía ứng dụng.

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

Biểu đồ nằm trong một màn hình có cuộn thì để vuốt dọc cho màn hình.

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

Chính sách bảo mật nội dung (CSP) của Tauri phải cho trang kết nối tới máy chủ của nguồn dữ liệu.

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

Biểu đồ vẽ ở mật độ điểm ảnh tối đa 2 (maxPixelRatio); huỷ nó (chart.destroy()) khi màn hình đóng, bộ nhớ canvas được trả lại ngay.

Trang trực tiếp

Mở thẳng trang embed để xem trước mà không có khung giao diện của trang tài liệu.