日本語 JA

JavaScript チャート

StockSharp JS トレーディングチャート は、依存関係のないスタンドアロンなブラウザ用チャートライブラリです。@stocksharp/chart として npm に公開されており、StockSharp Web ターミナルで使用されている sschart キャンバスエンジンを同梱しています。動作するバージョンはライブデモで確認できます。

StockSharp JavaScript トレーディングチャート

StockSharp.Xaml.Charting の Windows コンポーネントとは異なり、このライブラリはブラウザ上で動作し、HTML の canvas に直接描画します。エンジンは SSChart グローバル（dist/sschart.js から）を通じて公開され、npm パッケージから ECMAScript モジュールとしてインポートすることもできます（import { createChart, CandlestickSeries } from '@stocksharp/chart'）。

ライブデモ

以下のチャートは、このページ上で実際に動作しているエンジンです。ボリュームヒストグラムと移動平均線を伴ったローソク足を表示しています。ドラッグでスクロール、ホイールでズーム、（右上の）展開ボタンを押すと全画面で開きます。

機能

  • 価格系列のフルセット: ローソク足、OHLC バー、ライン、エリア、ヒストグラム、バンド、さらにこれらから派生した Heikin-Ashi、Renko、Point & Figure タイプ。
  • 精密なオーダーフロー分析: フットプリント、ボリュームプロファイル、TPO（マーケットプロファイル）。
  • setData と update による履歴読み込みとリアルタイム更新。
  • 約定マーカー、価格ライン、十字カーソル、ズーム、スクロール、自動レンジ計算。
  • 約 160 種類の計算実装を備えたインジケーターエンジン。
  • オーバーレイインジケーター、同期されたオシレーターペイン、十字カーソル連動の凡例。
  • ライトとダークのテーマ、コンテキストメニュー、インジケーターダイアログ、チャートタイプの切り替え。

インストール

npm からパッケージをインストールし、ES モジュールをインポートします。

npm install @stocksharp/chart

import { createChart, CandlestickSeries } from '@stocksharp/chart';

または、バンドラーを使わずに、以下に示すように <script> タグでビルド済みの SSChart グローバルを読み込むこともできます。

ページにチャートを追加する

ビルドによって dist/sschart.js が生成され、window.SSChart が公開されます。API に渡す時刻値は秒単位の Unix タイムスタンプです。

<div id="chart" style="width: 800px; height: 400px"></div>
<script src="dist/sschart.js"></script>

チャートを作成し、系列を追加してデータを読み込みます。

const chart = SSChart.createChart(document.getElementById('chart'), {
  timeScale: { timeVisible: true },
  crosshair: { mode: SSChart.CrosshairMode.Normal },
});

const candles = chart.addSeries(SSChart.CandlestickSeries, {
  upColor: '#26a69a',
  downColor: '#ef5350',
  borderVisible: false,
});

candles.setData([
  { time: 1704153600, open: 120, high: 122, low: 119, close: 121 },
  { time: 1704240000, open: 121, high: 124, low: 120, close: 123 },
]);

candles.update({
  time: 1704326400,
  open: 123,
  high: 123.5,
  low: 122.8,
  close: 123.2,
});

chart.timeScale().fitContent();

現在のタイムスタンプで update を呼び出すと、最後のポイントが置き換えられます。より新しいタイムスタンプではポイントが追加されます。

チャートモード

各系列タイプには、ライブデモとそれを構成する JavaScript を含む独自のトピックがあります。

系列タイプに加えて、チャートには約 160 種類の分析を備えたインジケーターエンジンと、スクロールに応じて古いバーを読み込む遅延ヒストリーバックフィルもあります。

同じ Web スタックによって描画されるビジュアルストラテジーエディターについては、JavaScript ダイアグラムを参照してください。

エンジンの上に重なるレイヤー

ここまでで説明したのは基本エンジン、つまりエントリーポイント @stocksharp/chart です。それ以外の機能は、公開された個別のエントリーポイントに分かれています。必要なものをインポートするだけでよく、ソースをコピーする必要はありません。

エントリーポイント 提供する内容
チャートの外枠 — @stocksharp/chart/ui すぐに使える外枠一式: 凡例、コンテキストメニュー、チャートタイプの切り替え、ペインマネージャー、インジケーターダイアログ。スタイルシート @stocksharp/chart/ui.css が必要です。
@stocksharp/chart/indicators IndicatorEngine、インジケーターのレンダラーと設定。計算そのものは @stocksharp/indicators パッケージにあります。
チャートからの取引 — @stocksharp/chart/trading トレーディングレイヤー: 注文ライン、現在の損益を伴うポジション、保護注文、気配値。ブローカーのことは知らず、意図を通知するだけで、実行はホストが行います。
描画ツール — @stocksharp/chart/drawings 描画ツール、バーへのスナップ、独自図形の登録。
複数チャート — @stocksharp/chart/workspace 同期された複数のチャート、銘柄の比較、レンジナビゲーター、インジケーターテンプレート。
レイアウトの保存 — @stocksharp/chart/persistence バージョン管理とマイグレーションを伴うレイアウトの保存と復元。
時間と取引セッション — @stocksharp/chart/time 取引カレンダー、セッションとタイムゾーン、バー確定までのカウントダウン。
@stocksharp/chart/orderflow クラスター分析: フットプリントとボリュームプロファイル。

バンドラーを使わない場合も、同じ機能はブラウザ用パッケージで利用できます。dist/sschartui.js がグローバルオブジェクト SSChartUI を公開します。

ソースからビルドする

リポジトリをクローンし、付属の npm スクリプトを使用します。

git clone https://github.com/StockSharp/JS-Charts.git
cd JS-Charts
npm install
npm run build
npm test
npm run serve

開発サーバーは http://localhost:8791/demo/index.html でデモを配信します。

関連項目