React ファイナンシャルチャートの概要

React Financial Chart コンポーネントは、シンプルな API を使用して複雑なファイナンシャルデータを可視化するチャートコンポーネントです。

サンプル

ユーザーがデータをバインド後、チャートはデータの可視化オプションを複数提供します。価格および出来高のための複数の表示モード、そして多数の財務指標があります。チャートにデータコンテキストを表示するためにラベルの書式設定を使用します。

ファイナンシャルチャートコンポーネントはデータ列を解析して選択します。日/時列を X 軸で使用し、Open、High、Low、Close、Volume 列、または最初の 5 つの数値列を Y 軸で使用します。ユーザーがチャートタイプを棒、ローソク足、柱状、または折れ線に設定できます。主要なビジュアル要素にツールバー、価格ペイン、ボリュームペイン、インジケーターペイン、およびナビゲーションペインがあります。

chartType プロパティを以下のオプションの 1 つに設定してチャートタイプを明示的に指定することもできます。

プロパティ	説明
`Bar`	各データポイントにマーカーがある棒シリーズを指定します。
`Candle`	ローソク足シリーズを指定します。
`Column`	柱状シリーズを指定します。
`Line`	折れ線シリーズを指定します。
`Auto`	データアダプターに基づいてチャートタイプの自動選択を指定します。これは、データの名前および数値列の数に基づいて上記の値を選択します。たとえば、Open、High、Low、および Close 列があるデータ項目のために `Bar` を使用します。

その他のチャートペインの詳細については、Financial Chart ペイントピックを参照してください。

 <IgrFinancialChart
    chartType="candle" />

依存関係

chart パッケージをインストールするときに core パッケージもインストールする必要があります。

npm install --save igniteui-react-core
npm install --save igniteui-react-charts

必要なモジュール

Financial Chart コンポーネントは、以下のモジュールが必要です。

import { IgrFinancialChartModule } from 'igniteui-react-charts';

IgrFinancialChartModule.register();

使用方法

ファイナンシャルチャートモジュールをインポートした後、チャートをデータにバインドします。

IgrFinancialChart コントロールを作成するには、はじめにバインドするデータが必要です。以下のコードスニペットは、シンプルなデータソースを作成する方法を示します。

let data = [
    { time: new Date(2013, 1, 1), open: 268.93, high: 268.93, low: 262.80, close: 265.00, volume: 6118146 },
    { time: new Date(2013, 1, 4), open: 262.78, high: 264.68, low: 259.07, close: 259.98, volume: 3723793 },
    { time: new Date(2013, 1, 5), open: 262.00, high: 268.03, low: 261.46, close: 266.89, volume: 4013780 },
    { time: new Date(2013, 1, 6), open: 265.16, high: 266.89, low: 261.11, close: 262.22, volume: 2772204 },
    { time: new Date(2013, 1, 7), open: 264.10, high: 264.10, low: 255.11, close: 260.23, volume: 3977065 },
    { time: new Date(2013, 1, 8), open: 261.40, high: 265.25, low: 260.56, close: 261.95, volume: 3879628 },
    { time: new Date(2013, 1, 11), open: 263.20, high: 263.25, low: 256.60, close: 257.21, volume: 3407457 },
    { time: new Date(2013, 1, 12), open: 259.19, high: 260.16, low: 257.00, close: 258.70, volume: 2944730 },
    { time: new Date(2013, 1, 13), open: 261.53, high: 269.96, low: 260.30, close: 269.47, volume: 5295786 },
    { time: new Date(2013, 1, 14), open: 267.37, high: 270.65, low: 265.40, close: 269.24, volume: 3464080 },
    { time: new Date(2013, 1, 15), open: 267.63, high: 268.92, low: 263.11, close: 265.09, volume: 3981233 }
];

以下のコードはファイナンシャルチャートを上記のデータにバインドします。

 <IgrFinancialChart
    width="700px"
    height="500px"
    dataSource={this.data} />

ツールバー

ファイナンシャルチャートの上にツールバーが表示されます。チャートで表示されるデータの詳細を変更でき、複数のペインの表示も可能です。ツールバーには以下のセレクターが含まれます。

インジケータータイプセレクター - 財務指標のタイプを選択できます。これらのインジケーターは価格またはその他のインジケーターと同じ Y 軸を共有しないため、価格ペインの下のペインに表示されます。
オーバーレイタイプセレクター - ファイナンシャルオーバーレイのタイプを選択できます。これらのオーバーレイは、同じ Y 軸スケールを共有する財務物価シリーズと共に表示されます。オーバーレイには、BollingerBands と PriceChannel の 2 種類があります。
トレンドラインタイプセレクター - トレンドラインのタイプを選択できます。トレンドラインは、価格ペインとボリュームペインの上のトレンドラインレイヤーに表示されます。
日付範囲セレクター - データを表示するために定義済みの範囲を選択できます。データ範囲が 1 年未満の場合、無効になるボタンがあることに注意してください。
チャートタイプセレクター - ファイナンシャルチャートのチャートタイプを選択できます。これは価格ペインで表示されます。
ボリュームタイプセレクター - ボリュームペインで出来高を表示します。None、Column、Line、および Area チャートタイプから選択できます。

注: ファイナンシャルチャートの幅に基づいて、ツールバーは上記のセクションに説明した要素をすべて含まない場合があります。ファイナンシャルチャートおよびそのコンテナーの幅を増加すると、ツールバーがセレクターを表示にします。

また、チャートペインの垂直スペースを最大化するには、ツールバーを非表示できます。以下のコードはツールバーを非表示にする方法を紹介します。

 <IgrFinancialChart
    isToolbarVisible={false} />