仕組み

ライブラリを内側から見た 3 つの図です。コード中の名前を使っているので、ソースの中で各部分を探せます。 ステップにポインターを合わせるか Tab キーで移動すると、そのステップに関わるボックスが強調されます。 チャートを使うだけならこの知識は不要です。データソースやプラグインを書くとき、ライブラリ自体を変更するときに役立ちます。

データソースから画面まで

足は取引所から来ても自分のコードから来ても同じ経路をたどり、一つのストアに保持されます。 描画されるものはすべて、このストアとビューから計算されます。

1. 1 足が入ってくる. DataFeed には履歴を要求し（getBars）、リアルタイムの足を購読します。BinanceAdapter のような DataAdapter はすべてをイベントとして送ります。StreamManager は feed を adapter に変換し、チャートの時間足にリサンプリングし、ティックから足を組み立てます。
2. 2 チャートが受け取る. chart.connect() は snapshot、barUpdate、barClose、barCorrection の各イベントを受け取ります。自分のコードからは setData、appendBar、updateLastBar、updateBar で同じ足を書き込め、feed は不要です。
3. 3 一つのストア. すべての書き込みは SeriesStore を通ります。表示中の足、時間外の足を隠しているときの全系列、リプレイ中に退避したリアルタイム系列を保持し、各書き込みで何が起きたかをチャートに伝えます。
4. 4 描くものを計算する. DisplaySeries はチャートタイプが描く系列（平均足、練行足、カギ足…）を作り、足が変わるまでキャッシュします。IndicatorEngine は最初に変わった足からだけ再計算します。PriceFit は価格スケールを合わせ、PaneLayout はペインの大きさを決めます。
5. 5 ビュー. Viewport は、どの足が見えているか、1 本の幅、どこまでスクロールしたかを保持します。ドラッグ、ホイール、キー操作は InteractionManager を通してスクロールとズームを行います。
6. 6 1 フレーム. RenderEngine は変わったレイヤーに印を付け、次のアニメーションフレームで描きます。リアルタイムのティックは先にまとめられるので、連続した更新も 1 フレームです。scene キャンバスはグリッド、系列、インジケーター、描画、軸を、top キャンバスはクロスヘアと凡例を持つため、ポインターを動かしても再描画されるのは top だけです。renderer: 'webgl' では、下にある GPU キャンバスがローソク足と出来高を描きます。
7. 7 アプリへ戻る. チャートはイベントで知らせます：crosshairMove、dataUpdate、visibleRangeChange、symbolChange など。一覧は API リファレンスにあります。

独自のデータソースの書き方は リアルタイムとリプレイ、 フレームあたりのコストは パフォーマンス を参照してください。

ChartWidget の構成

ChartWidget は 1 つの Chart を囲む取引画面全体です。各部分は小さなクラスで、 渡されたものだけを見ます。

1. 1 一つの公開クラス. ChartWidget は公開メソッドと初期化を受け持ちます。コンストラクターは、部品が互いを必要とする順に並んだステップの列です：readOptions、buildRoot、buildToolbar、buildBody、buildChart … finishSetup。
2. 2 エリアごとに host を通す. リプレイ、取引、アラート、比較、ウォッチリスト、凡例、メニュー、コマンド、レイアウト、ドック、Chart Settings、描画の編集、時間足は、それぞれ独立したクラスです。各クラスは widget から使うものを正確に並べた host インターフェースを受け取り、ChartWidget の公開メソッドは担当のエリアに処理を渡します。
3. 3 一つのチャート. buildChart は widget が包む唯一の Chart を作ります。各エリアは host を通してこれに触れ、自分のチャートは持ちません。widget はチャートのイベントを受け取り、ツールバーと凡例を合わせます。
4. 4 Signal. 複数の部品が表示する状態は signal です：テーマ（look）、ツールバーのどのボタンが開いているか（openRoles）、Chart Settings。一つの effect が表示箇所をすべて更新するので、書き込む側が更新を一つずつ呼ぶ必要はありません。
5. 5 ダイアログは初めて開くときに読み込む. 大きなダイアログ、インジケーターのダイアログ、コマンドパレット、銘柄検索は DIALOGS にあり、初めて開くときにコードを読み込みます。これらは overlayHost の中で開き、全画面では overlayHost が widget の内側に移ります。

バーリプレイ

リプレイは同じチャートの上で過去を 1 本ずつ再生し、リアルタイムの足は終わるまで退避しておきます。

1. 1 足を選ぶ. リプレイボタンでリプレイバーが開きます。足をクリックするか replayFrom() を呼ぶと、開始位置が決まります。
2. 2 開始. chart.replayStart() は SeriesStore にリアルタイムの足を退避させ、再生する足を ReplayManager に読み込みます。ReplayManager は開始位置で一時停止して待ちます。
3. 3 ステップ. 再生、一時停止、1 本進む・戻る、速度の操作は ReplayManager に届きます。各ステップは bar イベントを送り、チャートはそこまでの足を表示します（showReplayed、進むときは appendReplayed）。
4. 4 リプレイに合わせて動くもの. インジケーターは変わった足から再計算され、価格ラインは再生中の終値を示し、ペーパー口座は再生中の価格で約定します。実口座の注文とアラートはリアルタイムのままです。
5. 5 終了. 最後の足に達するとリプレイは一時停止します。抜けると replayStop() が呼ばれ、SeriesStore がリアルタイム系列を戻し、チャートはリアルタイムに戻ります。

オプションとイベントは リアルタイムとリプレイ にあります。