React 軸オプション

Ignite UI for React カテゴリチャートコンポーネントは、軸は軸線、目盛、タイトル、や軸のラベルの外観を設定するための基本的なプロパティを提供します。

React 軸オプションの例

デフォルトでは、ラベルを明示的に設定する必要はありません。カテゴリチャートコンポーネントは、指定したデータ内の最初の適切な文字列プロパティを使用し、ラベルに使用するプロパティを明示的に設定します。

軸ラベル

Ignite UI for React カテゴリチャートコンポーネントは、チャートで表示されるラベルの構成、書式設定、およびラベルフォントのスタイル設定を制御することが可能です。回転角度、マージン、水平方向/垂直方向の配置、不透明度、パディング、および表示状態を変更できます。

以下のコード例は、スタイルプロパティを使用して x 軸のラベルをスタイル設定します。

 <IgrCategoryChart dataSource={this.state.data}
                   width="700px"
                   height="500px"
                   xAxisLabelTextStyle="10pt Verdana"
                   xAxisLabelTopMargin={5}
                   xAxisLabelTextColor="gray"
                   yAxisLabelTextStyle="10pt Verdana"
                   yAxisLabelRightMargin={5}
                   yAxisLabelTextColor="gray" />

軸タイトル

Ignite UI for React カテゴリチャートの軸タイトル機能は、チャートの x および y 軸に情報を追加できます。カテゴリチャートは、x 軸および y 軸のタイトルのフォントスタイル、マージン、配置などを変更してルックアンドフィールをカスタマイズできます。

以下のコード例は、x 軸と y 軸のタイトルを設定してカスタマイズします。

 <IgrCategoryChart dataSource={this.state.data}
                   width="700px"
                   height="500px"
                   xAxisTitle="Countries"
                   xAxisTitleTextColor="gray"
                   xAxisTitleTextStyle="12pt Verdana"
                   xAxisTitleAngle={0}
                   yAxisTitle="Trillions of Watt-hours (TWh)"
                   yAxisTitleTextStyle="12pt Verdana"
                   yAxisTitleTextColor="gray"
                   yAxisTitleAngle={90}
                   yAxisTitleLeftMargin={5} />

軸目盛

目盛りは軸にポイントを表示します。スケールに特定の数値ポイント、またはカテゴリ軸にカテゴリ値を表します。x 軸および y 軸のラベルの長さ、太さ、色を変更できます。

以下のコードスニペットは、x 軸の目盛りの色、長さ、太さを設定します。

 <IgrCategoryChart dataSource={this.state.data}
                   width="700px"
                   height="500px"
                   xAxisTickLength={15}
                   xAxisTickStrokeThickness={2}
                   xAxisTickStroke="gray"
                   yAxisTickLength={0} />

軸の範囲

カテゴリチャートコンポーネントで、数値軸の範囲は軸の始めと終わり、つまりデータの最小値と最大値の数値の差です。範囲の最小値は、軸の最小値です。範囲の最大値は、軸の最大値です。カテゴリチャートコンポーネント、チャートプロット領域を最大化するために、デフォルトで最小データポイントおよび最大データポイントに基づいて軸の範囲の最小値と最大値を計算します。軸の最大値と最小値の自動計算は、データポイントのセットに適切でない場合があります。たとえば、データの最小値が 850 の場合、y 軸の yAxisMinimumValue プロパティを使用して軸の最小値を 800 に設定してください。これにより、軸の最小値とデータポイントの最小値の間に 50 のスペース値ができます。y 軸の yAxisMinimumValue プロパティを使用して軸の最大値とデータポイントの最大値にも同様に適用できます。

以下のサンプルコードは、y 軸で軸の範囲を変更する方法を示します。

 <IgrCategoryChart dataSource={this.state.data}
                   width="700px"
                   height="500px"
                   yAxisMinimumValue={0}
                   yAxisMaximumValue={1000} />

軸間隔

カテゴリチャートコンポーネントで、yAxisInterval プロパティは主グリッド線および軸ラベルが軸に描画される頻度を指定します。同様に、yAxisMinorInterval プロパティは副グリッド線が軸に描画される頻度を指定します。

以下のコードスニペットは、Y 軸の間隔を設定する方法を示します。

 <IgrCategoryChart dataSource={this.state.data}
                   width="700px"
                   height="500px"
                   yAxisInterval={100}
                   yAxisMajorStroke="black"
                   yAxisMajorStrokeThickness={1}
                   yAxisMinorInterval={20}
                   yAxisMinorStroke="gray"
                   yAxisMinorStrokeThickness={0.5} />

軸間隔

カテゴリチャートの軸間隔機能は、チャートシリーズ間の間隔を設定できます。

プロパティ値は、0 と 1 の間の float 値である必要があります。この値は、シリーズ間の利用可能なピクセル数で間隔の相対幅を表します。 0 - シリーズ間に間隔は描画されません。 1 - シリーズ間に利用可能な最大の間隔が描画されます。

カテゴリチャートの xAxisGap を 0.125 に設定するには、以下のコードを使用します。

 <IgrCategoryChart dataSource={this.state.data}
                   width="700px"
                   height="500px"
                   xAxisGap={0.125} />

軸の重複

カテゴリチャートコンポーネントの軸重複機能は、描画されるカテゴリの重なりを設定できます。

プロパティ値は、-1 と 1 の間の float 値である必要があります。値は、各シリーズ専用の使用可能なピクセル数からの相対的な重なりを表します。

負の値 (-1 以上): カテゴリは互いに生成する間隔によって引き離されます。
正の数 (1 以下): カテゴリが互いに重なります。値 1 は、互いのチャート上にカテゴリを描画します。

以下のコード例では、xAxisOverlap を 0 に設定します。

 <IgrCategoryChart dataSource={this.state.data}
                   width="700px"
                   height="500px"
                   xAxisOverlap={0} />