React 近似曲線
React Financial Chart コンポーネントで、ナビゲーション動作、トレンドライン レイヤー、オーバーレイ、凡例、チャート タイトル、チャート サブタイトルなどのカスタマイズ可能なビジュアルがあります。
React 近似曲線の例
ナビゲーションの構成
React Financial Chart コンポーネントでは、チャート ナビゲーションがデフォルトで有効になっています。ただし、以下のプロパティを設定することによって、カスタマイズできます。
isHorizontalZoomEnabled
- チャートがユーザー操作により水平方向にズーム可能かどうかを指定します。デフォルトでこのプロパティは true に設定されます。isVerticalZoomEnabled
- チャートがユーザー操作により垂直方向にズーム可能かどうかを指定します。デフォルトでこのプロパティは false に設定されます。isWindowSyncedToVisibleRange
- true に設定される場合、Y 軸は表示データ範囲に自動的にサイズ変更します。デフォルトでこのプロパティは false に設定されます。windowRect
-IgrFinancialChart
のスクロール状態およびズーム状態を取得または設定するために使用できます。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} />