はじめに

TradeCanvas をインストールして、1 分以内にチャートを表示しましょう。

インストール

お好みのパッケージマネージャーを使ってください：

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

すぐに使えるウィジェット

ChartWidget は、動くチャートを最短で用意する方法です。ツールバー、描画サイドバー、 設定ダイアログ、ステータスバーを備えた本格的なトレーディング UI を任意のホスト要素の中に描画し、 フレームワークへの依存は一切ありません。

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

ウィジェットは、プロのトレーダー向けのジェスチャーを標準で一通り備えています： 最後のバーより先の空白（未来の領域）までドラッグ、価格軸・時間軸のドラッグで拡大縮小、 Ctrl/⌘+ドラッグで複数の描画を選択、Shift+ドラッグで計測、 Alt+クリックでツールチップを固定、Ctrl/⌘+K でコマンドパレット、Ctrl/⌘+P でシンボル検索、 そして ? でショートカットの一覧を表示できます。

ヘッドレスの Chart

周囲の UI を完全に制御したい場合は、下位レベルの 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 用のラッパーは フレームワークのセクションで紹介しています。

次のステップ