システム監査

何ができて、どれだけ速いか。

このページの内容はすべて @tradecanvas/chart 1.26.0 に含まれています。フレーム時間は、内蔵グラフィックス（Intel UHD）のノート PC 上の Chrome で計測しました。リポジトリで node scripts/bench-render.mjs を実行すれば、同じシーンをお使いのマシンで試せます。

アーキテクチャ: 普通のノート PC でも速い理由。 →

18
チャートタイプ: 134
組み込みインジケーター: 69
描画ツール: 30
ウィジェットの言語: 101
スタイルキー: 114
ウィジェットの機能スイッチ: 0
サードパーティのランタイム依存関係: 3,000+
ユニットテスト

あなたのマシンで測る

上の数値は私たちのノート PC で測ったものです。以下は同じシーンを、実際に組み込むライブラリのまま、あなたのブラウザーで実行します。録画したものではありません。

1,000,000 本: Canvas 2D、次に WebGL

ボリンジャーバンド、EMA、RSI、MACD 付きの 1 分足 100 万本を最大まで縮小し、150 フレームパンします。まず Canvas 2D、次に WebGL 2 で描きます。

100,000 本のチャートにライブティック

指標 4 つの 10 万本チャートに、毎フレーム 20 ティックが届きます。各指標は系列を再計算せず、最後の足から更新します。

1,000 銘柄の株価ボード

1,000 銘柄を毎秒 50 回更新する bo-grid。値が変わったセルは点滅し、そのセルだけが再描画されます。

WebGL 2、その下に Canvas 2D

renderer: 'webgl' はプロット部分を GPU で描画します: ローソク足、出来高、指標の線と塗り、板のヒートマップ。文字はその上の Canvas 2D レイヤーに残ります。'auto' は WebGL 2 が使える環境で WebGL を選びます。
WebGL 2 がない、またはコンテキストが失われた場合、同じチャートが Canvas 2D で描き続けます。コードを変える必要はありません。
1 ページで最大 8 つのチャートが同時に WebGL で描きます (setMaxWebGLCharts)。残りは Canvas 2D で描き、コンテキストが空けば WebGL に戻ります。
どちらのレンダラーでもローソク足は同じデバイスピクセルに置かれ、どちらが描いても見た目は同じです。

フレーム時間

パン中に 1 フレームを描く時間。16.7 ms で毎秒 60 フレームです。

チャート	ピクセル比	Canvas 2D	WebGL
1600×900、ローソク足 500 本 + インジケーター 4 つ	2×	27.4 ms	19.6 ms
1600×900、200,000 本を全体表示 + インジケーター 4 つ	2×	34.5 ms	20.2 ms
1600×900、1,000,000 本を全体表示 + インジケーター 4 つ	2×	34.5 ms	16.7 ms
1600×900、板のヒートマップ、240 スナップショット × 80 レベル	2×	25.5 ms	16.8 ms
チャート 6 つ、それぞれローソク足 500 本とインジケーター 2 つ	2×	23.5 ms	17.2 ms
2560×1400、ローソク足 2,000 本 + インジケーター 4 つ	1×	41.6 ms	17.7 ms
2560×1400、ローソク足 2,000 本 + インジケーター 4 つ	1.5×	70.8 ms	17.6 ms
2560×1400、ローソク足 2,000 本 + インジケーター 4 つ	2×	114.5 ms	29.1 ms

デフォルトは Canvas 2D です。renderer: 'webgl'（または 'auto'）にするとプロット領域を WebGL 2 で描き、WebGL 2 がない環境やコンテキストが失われたときは Canvas 2D に戻ります。

データの流れ

100,000 本にボリンジャーバンド、EMA、RSI、MACD を載せた状態でのライブティック 1 回: ~0.001 ms
同じ 4 つのインジケーターを 100,000 本で全再計算: ~27 ms
表示中の 1,000,000 点のラインを 1 フレーム分ダウンサンプリング: ~2.6 ms
ホバー時の再描画（クロスヘア、凡例）: ~0.2 ms
シンボルや時間足の切り替えでローディング表示が出るまでの時間: 200 ms

ダウンロードサイズ

インポートするものすべてを含めた、minify と gzip 後のサイズ。

Chart（ヘッドレス API）: 176 KB
ChartWidget（完全な UI）: 315 KB
WebGL レンダラー（初回使用時に読み込み）: 18 KB

検証の方法

7 つのパッケージにわたる 3,000 件超のユニットテストを、プルリクエストのたびに CI で実行しています。
WebGL レンダラーはローソク足を Canvas 2D と同じデバイスピクセルに描きます。ラインと塗りが異なるのは、アンチエイリアスされた縁のわずかなピクセルだけです。
WebGL レンダラーは Chromium、Firefox、WebKit で確認済みです。WebGL 2 がない場合やコンテキストが失われた場合も、チャートは Canvas 2D で描画を続けます。
ドキュメントとエージェントスキルのコード例は、実際の API に対して型チェックしています。
チャートはスクリーンリーダーで読み上げられ、キーボードだけで操作できます。ウィジェットはアラビア語、ヘブライ語、ペルシア語で右から左に表示されます。

機能一覧

領域で絞り込むか、名前や API で検索できます。

80 / 80

機能	領域	詳細と API
ローソク足、OHLC バー、ライン、エリア、ベースライン、平均足、中抜きローソク足	チャートタイプ	candlestick, bar, line, area, baseline, heikinAshi, hollowCandle
練行足（Renko）、新値足、カギ足、ポイント・アンド・フィギュア、レンジバー	チャートタイプ	ボックスサイズまたは ATR、転換に必要な本数、パーセントまたは価格での反転幅、1 本あたりのレンジ
出来高ローソク足、エクイボリューム、HLC エリア、ステップライン、マーカー付きライン、高値・安値	チャートタイプ	全 18 種類のチャートタイプ
メイン系列の非表示	チャートタイプ	インジケーターと描画だけを残す
ダッシュボード向けチャート	チャートタイプ	棒グラフ（グループ、積み上げ、横向き）、ドーナツと円グラフ、散布図とバブル、ヒストグラム、カレンダー、相関行列、セクターマップ、逆ウォッチ曲線、スパークライン、ゲージ、ヒートマップとツリーマップ、ウォーターフォール、板の厚み、エクイティカーブ
Canvas 2D または WebGL 2	描画	renderer: 'canvas' \| 'webgl' \| 'auto'、setRenderer、rendererChange イベント
縮小時はピクセル列ごとに 1 区間	描画	1 本あたり 1 ピクセル未満でのインジケーターのライン、バンド、ヒストグラム
100 万本でも滑らかにパン	描画	インジケーター 4 つ、ピクセル比 2 で
板のヒートマップ、出来高プロファイル、マーケットプロファイルを GPU で	描画	pushDepthSnapshot(book, time)
1 ページに複数の WebGL チャート	描画	最大 8 つ（setMaxWebGLCharts）。残りは Canvas 2D で描画し、コンテキストが戻れば WebGL に復帰
どの画面倍率でもくっきり	描画	100%、125%、200% でローソク足、出来高、描画をデバイスピクセルに合わせて描画
サードパーティのランタイム依存関係なし	描画	追加でインストールや監査をするものはありません
134 種類の組み込みインジケーター	インジケーター	6 種類のピボットポイント、MA Cross、別シンボルとの相関
価格ソース	インジケーター	open, high, low, hl2, hlc3, ohlc4, hlcc4
インジケーターに重ねるインジケーター	インジケーター	RSI の移動平均など。ティックごとに更新
1 つのペインに複数のインジケーター、ペイン間の移動	インジケーター	moveIndicatorToPane
同じインジケーターを複数	インジケーター	EMA 20 と EMA 50 を並べて
レベルとしきい値	インジケーター	RSI 30/70、CCI ±100。レイアウトと一緒に保存
軸上の最新値	インジケーター	価格スケールと各ペインの軸に、ラインと同じ色で表示
ペインの折りたたみ、最大化、並べ替え	インジケーター	レイアウトと一緒に保存
インジケーターのテンプレート	インジケーター	パラメーター、スタイル、レベル、ペインをまとめて保存・適用
ラインごとのスタイルと表示	インジケーター	非表示のラインはスケールを広げません。setIndicatorDefaults
ボリュームデルタと CVD	インジケーター	バーから推定
インジケーターの値をエクスポート	インジケーター	CSV または JSON、ラインごとに 1 列
ライブティックでの差分更新	インジケーター	update() は形成中のバーだけを再計算
69 種類の描画ツール	描画ツール	ライン、チャネル、フィボナッチ、ギャン、ピッチフォーク、エリオット波動、パターン、サイクル、予測
ツールごとの設定	描画ツール	スタイル、プロパティ、市場の価格刻みに沿った座標
ロングとショートのポジション	描画ツール	リスクリワード、リスクのパーセントまたは金額から数量を算出
描画へのアラート	描画ツール	描いたとおりのトレンドラインやチャネルを価格が抜けたとき。対数スケールにも対応
重なり順、グループ、テンプレート	描画ツール	前面へ、背面へ、グループ化、ロック、非表示
ノート、吹き出し、矢印、旗、ブラシ、パス、カーブ	描画ツール	フリーハンドと複数点の描画
アンカー VWAP と期間指定の出来高プロファイル	描画ツール	チャートのバーを読み取って計算
消しゴム、ズームボックス、強力マグネット、キーボードショートカット	描画ツール	Alt+T, Alt+H, Alt+J, Alt+V, Alt+C, Alt+F
日付へ移動、1D から All までの期間	スケールと時間	縮小に上限なし
夏時間に対応した IANA タイムゾーン	スケールと時間	または取引所のタイムゾーン
任意の時間足とティックバー	スケールと時間	7m、90m、2d はフィードが提供するデータから、100T はその約定から作成
左右のスケール、ペインごとの対数・反転・パーセント	スケールと時間	左スケールはオーバーレイ用、または価格スケールのコピーとして
シンボル比較、スプレッドと比率	スケールと時間	専用のスケールまたはペインに、時刻を揃えて表示
時間外取引	スケールと時間	シンボルの取引時間から
価格と時刻の書式	スケールと時間	priceFormat は関数でも、1/32 のような分数でも。timeFormatter
シンボルの小数桁と呼値に合わせたスケール	スケールと時間	pricePrecision、minTick：10 刻みで動く銘柄に 21,705 は表示されません
高値・安値ライン、Bid と Ask	スケールと時間	Bid と Ask はフィードのティックから
チャート上のイベントマーク	スケールと時間	signalMarkerHover, signalMarkerClick
既製のフィードと独自のフィード	データとリアルタイム	Binance、Bybit、Coinbase、Kraken、mock。WebSocketAdapter、PollingAdapter
左へスクロールすると過去の履歴を読み込み	データとリアルタイム	fetchHistoryBefore
詳細付きのシンボル検索	データとリアルタイム	searchSymbols、resolveSymbol：小数桁、呼値、取引時間、タイムゾーン
接続後に判明するシンボル情報	データとリアルタイム	アダプターの symbolInfo イベント
板（DOM）ラダー	データとリアルタイム	価格ごとの Bid と Ask の数量。クリックで発注
ウォッチリスト用のライブ相場	データとリアルタイム	subscribeQuotes, setQuotes, getQuote
ニュースと市場の状態	データとリアルタイム	fetchNews。寄り付きや引けまでのカウントダウン
取引所のルール	データとリアルタイム	setMarket：価格帯ごとの呼値の単位、当日の上限・下限価格、売買単位、取引セッション。HOSE、HNX、UPCoM、VN30 先物
チャート上の注文とポジション	トレード	ドラッグで変更。ラインからキャンセル、決済、ドテン
約定マーク	トレード	executionFill に理由と損益
注文チケット	トレード	数量、種類、損切りと利確、有効期限。入力中にチェック。取引所の呼値の単位、上限・下限価格、売買単位にも対応
口座パネル	トレード	ライブ損益付きのポジション、未約定の注文、約定履歴
シグナルとトレードゾーン	トレード	markers.、tradeZones. のスタイルキー
バックテストとリスク指標	トレード	@tradecanvas/analytics：手数料、スリッページ、Sharpe、Sortino、Calmar、ドローダウン
価格水準だけではないアラート	アラートとリプレイ	ライン同士のクロス、N 本で N% の変動、確定足で判定、有効期限付き
より細かいステップでのバーリプレイ	アラートとリプレイ	長い時間足を短い足からリプレイ
リプレイ中のペーパートレード	アラートとリプレイ	リプレイ中の価格で注文を約定
チャートのグリッド全体でリプレイ	アラートとリプレイ	足並みを揃えて進行
アプリ向けのリプレイ	アラートとリプレイ	startTime、hideHistory、duration、再生につれて現れるマーク、replayComplete
同期するウィジェットのグリッド	ワークスペース	最大 6 つ。シンボル、時間足、クロスヘア、時刻、描画を共有
独自のストレージに名前付きレイアウト	ワークスペース	保存、開く、名前の変更、自動保存。サーバーには LayoutStorage
あらゆる操作の元に戻す・やり直し	ワークスペース	描画、インジケーター、設定、チャートタイプ。recordUndo
場所ごとのコンテキストメニュー	ワークスペース	描画、プロット領域、ペイン、価格スケール、時間軸
ウォッチリスト	ワークスペース	複数のリスト、ドラッグで並べ替え
ホストアプリ向けのイベント	ワークスペース	symbolChange、timeframeChange、ordersChange、executionFill、styleChange など
ウィジェットの 3 つの外観	カスタマイズ	Studio、Terminal、Capsule。ui と setUI。--tcw-* CSS 変数
キー単位でのチャートの見た目	カスタマイズ	型付きの 101 キーに applyOverrides。ホスト層とユーザー層の 2 層
すべてのキーに届く設定	カスタマイズ	表示中のチャートタイプのスタイルタブと、トレードタブ
112 個の機能スイッチ	カスタマイズ	features、setFeatures、isFeatureOn。実行中に変更可能
ウィジェットに独自のパーツ	カスタマイズ	ツールバーのボタンとドロップダウン、サイドバーのボタン、ステータス項目、スロット、メニュー項目
独自のショートカット	カスタマイズ	キーボード配列に合わせた addHotkey
ウィジェットは 30 言語	言語とアクセシビリティ	アラビア語、ヘブライ語、ペルシア語は右から左
スクリーンリーダーとキーボード	言語とアクセシビリティ	チャートの概要、1 本ずつの読み上げ、キーボードで操作できるダイアログ
このサイトとドキュメントは 4 言語	言語とアクセシビリティ	English, Tiếng Việt, 한국어, 日本語
React、Vue、Svelte コンポーネント	開発者向け	リアクティブな props：overrides、indicators、features
プラグイン	開発者向け	インジケーター、描画ツール、チャートタイプ、オーバーレイ。overlayScale と getPriceStep で価格の刻みに沿って描画
コーディングエージェント向けドキュメント	開発者向け	llms.txt、llms-full.txt、エージェントスキル

既知の制限

WebGL をより多くのデバイスで試すまで、デフォルトのレンダラーは Canvas 2D のままです。Safari と 5K 画面での WebGL のフレームレートはまだ計測していません。
2560×1400 のチャートでピクセル比 2 の場合、内蔵グラフィックスではブラウザーの合成処理だけで約 23 ms かかるため、WebGL のフレームは平均 29 ms になります。
ティックの時間足は、フィードが返す直近の約定から作成します。それより古いティック履歴は読み込めません。
ボリュームデルタと CVD はバーから推定しており、約定ごとの売買方向にもとづくものではありません。
1 ページで同時に WebGL で描画できるチャートは最大 8 つで、残りは Canvas 2D で描画します。

TradeCanvas で取引画面をつくっていますか？

ぜひお話を聞かせてください。

business@tradecanvas.devお問い合わせ