ファイナンシャルチャート | データ可視化ツール | Ignite UI for React | インフラジスティックス | 構成オプション - Native React

構成オプション

React Financial Chart コンポーネントで、ナビゲーション動作、トレンドラインレイヤー、オーバーレイ、凡例、チャートタイトル、チャートサブタイトルなどのカスタマイズ可能なビジュアルがあります。コード例を使用してプロパティでファイナンシャルチャートをカスタマイズする方法を説明します。

サンプル

ナビゲーションの構成

React Financial Chart コンポーネントでは、チャートナビゲーションがデフォルトで有効になっています。ただし、以下のプロパティを設定することによって、カスタマイズできます。

IsHorizontalZoomEnabled - チャートがユーザー操作により水平方向にズーム可能かどうかを指定します。デフォルトでこのプロパティは true に設定されます。
IsVerticalZoomEnabled - チャートがユーザー操作により垂直方向にズーム可能かどうかを指定します。デフォルトでこのプロパティは false に設定されます。
IsWindowSyncedToVisibleRange - true に設定される場合、Y 軸は表示データ範囲に自動的にサイズ変更します。デフォルトでこのプロパティは false に設定されます。
WindowRect - XamFinancialChart のスクロール状態およびズーム状態を取得または設定するために使用できます。windowRect は、 0 ~ 1 の間の座標およびサイズの Rectangle として表現されます。

 <IgrFinancialChart
    isHorizontalZoomEnabled={true}
    isVerticalZoomEnabled={true} />

価格ペインの構成

価格ペインは常に Financial Chart で表示されます。チャートタイプを変更、またはビジュアルの外観をカスタマイズして構成します。以下のコードは価格ペインでシリーズのブラシおよび太さを設定します。

 <IgrFinancialChart
    chartType="Candle"
    brushes="Green, Blue"
    outlines="Green, Blue"
    negativeBrushes="Red"
    negativeOutlines="Red"
    thickness={2} />

オーバーレイの構成

オーバーレイはデフォルトで React Financial Chart に表示されません。オーバーレイには、BollingerBands および PriceChannel の 2 種類があります。オーバーレイのデフォルト設定をカスタマイズできます。以下のコードはオーバーレイの色、アウトライン、および太さを設定します。

 <IgrFinancialChart
    overlayTypes="BollingerBands"
    overlayBrushes="Red"
    overlayOutlines="Green"
    overlayThickness={2} />

インジケーターの構成

デフォルトでインジケーターペインは Financial Chart に表示されません。ツールバーを使用してランタイムに表示するインジケーターを選択できます。ペインを表示するには、以下のコードのようにインジケータータイプを設定する必要があります。

 <IgrFinancialChart
    indicatorTypes="AverageTrueRange,ForceIndex"
    indicatorBrushes="Green, Blue"
    indicatorNegativeBrushes="Red"
    indicatorDisplayTypes="Line"
    indicatorThickness={2} />

ボリュームペインの構成

デフォルトでボリュームペインは Financial Chart に表示されません。ただし、チャートツールバーを使用してランタイムにこのペインを有効にするか、以下のコードのようにコードで有効にできます。

 <IgrFinancialChart
    volumeType="Column"
    volumeBrushes="Green, Blue"
    volumeOutlines="White"
    volumeThickness={2} />

トレンドラインの構成

トレンドラインはデフォルトでは React Financial Chart に表示されません。トレンドラインが表示される場合、同じトレンドラインがすべてのチャートペインに表示されます。トレンドラインのデフォルト設定をカスタマイズできます。

以下のコードはトレンドラインの色および太さを設定します。

 <IgrFinancialChart
    trendLineType="QuinticFit"
    trendLineBrushes="Green, Blue"
    trendLineThickness={2} />

タイトルの構成

チャートツールバーおよび Financial Chart の価格ペインの間に表示されるタイトルおよびサブタイトルを設定できます。以下のコード例は、タイトルとサブタイトルを設定する方法を紹介します。

 <IgrFinancialChart
    chartTitle="Stock Prices"
    subtitle="Between 2000 and 2015" />

凡例の構成

凡例はデフォルトで表示されません。以下のコードは、凡例を有効する方法を示します。

 <IgrFinancialChart
    isLegendVisible={true} />