React 軸

React データチャートコンポーネントの軸は、軸の主線、グリッド線、目盛り、タイトル、およびラベルの外観を指定するための基本プロパティを提供します。データチャートがサポートするさまざまなシリーズタイプのデータチャートコンポーネントで使用できる複数の軸タイプがあります。シリーズのタイプは、併用できる軸タイプを決定します。

React 軸の例

サポートされる軸

React データチャートコンポーネントは、特定の種類のシリーズで使用することを目的としたさまざまな種類の軸をサポートします。以下の表はシリーズタイプで使用できます。

軸タイプ	サポートされるシリーズタイプ
CategoryYAxis	カテゴリシリーズグループの棒シリーズのみ
CategoryXAxis	すべてのファイナンシャルシリーズ、範囲シリーズ、カテゴリシリーズ (棒シリーズを除く)
TimeXAxis	すべてのファイナンシャルシリーズ、範囲シリーズ、カテゴリシリーズ (棒シリーズを除く)
OrdinalTimeXAxis	すべてのファイナンシャルシリーズ、範囲シリーズ、カテゴリシリーズ (棒シリーズを除く)
PercentChangeYAxis	すべてのファイナンシャルシリーズ、範囲シリーズ、カテゴリシリーズ、散布シリーズ、シェイプシリーズ
NumericYAxis	すべての散布シリーズ、シェイプシリーズ、ファイナンシャルシリーズ、範囲シリーズ、カテゴリシリーズ
NumericXAxis	カテゴリシリーズグループのすべての散布シリーズ、シェイプシリーズ、棒シリーズ
NumericAngleAxis	すべての極座標シリーズ
NumericRadiusAxis	すべての極座標シリーズとラジアルシリーズ
CategoryAngleAxis	すべてのラジアルシリーズ

カテゴリ X 軸

IgrCategoryXAxis は、データを一連のカテゴリデータ項目として扱います。この軸のラベルがシーケンスの位置に応じて、X 軸に沿って配置されます。この軸の種類では、数字、文字列などのほぼすべてのデータのタイプを表示できます。このタイプの軸は、ファイナンシャルシリーズ、範囲シリーズ、カテゴリシリーズ (棒シリーズを除く) と互換性があります。

以下のコードは、IgrCategoryXAxis を React データチャートコンポーネントに追加する方法を示します。

<IgrDataChart dataSource={this.data}
    width="100%"
    height="400px">
    <IgrCategoryXAxis name="xAxis" />
</IgrDataChart>

カテゴリ Y 軸

IgrCategoryYAxis は、データを一連のカテゴリデータ項目として扱います。この軸のラベルがシーケンスの位置に応じて、Y 軸に沿って配置されます。この軸の種類では、数字、文字列などのほぼすべてのデータのタイプを表示できます。この軸タイプは、カテゴリシリーズグループ内の棒シリーズとのみ互換性があります。

以下のコードスニペットは、IgrCategoryYAxis を React データチャートコンポーネントに追加する方法を示します。

<IgrDataChart dataSource={this.data}
    width="100%"
    height="400px">
    <IgrCategoryYAxis name="yAxis" />
</IgrDataChart>

カテゴリ DateTime X 軸

IgrCategoryDateTimeXAxis 軸は、日付順にソートされた一連のカテゴリデータ項目としてデータを扱います。この軸のラベルは、この軸の dateTimeMemberPath プロパティを使用してマッピングされたデータ列の値に従って、X軸に沿って配置されます。また、書式設定されたラベルを表示するには、formatLabel イベントを使用できます。

<IgrDataChart dataSource={this.data}
    width="100%"
    height="400px">
    <IgrCategoryDateTimeXAxis name="xAxis"
        labelFormats= {this.xAxisFormatLabel}
        dateTimeMemberPath="Date" />
</IgrDataChart>

数字 X 軸

IgrNumericXAxis は、データを連続的に変化する数値データ項目として扱います。この軸のラベルは X-Axis に沿ってに配置されます。ラベルの位置は、対応する値マッピングプロパティを使用してマップされたデータ列の値に基づいて変わります。このタイプの軸は、散布シリーズとシェイプシリーズのタイプと互換性があります。また、この軸は棒シリーズタイプのカテゴリシリーズと互換性があります。ここでは、ValueMemberPath プロパティを使用してデータ列をマップします。

以下のコードは、IgrNumericXAxis を React データチャートコンポーネントに追加する方法を示します。

<IgrDataChart dataSource={this.data}
    width="100%"
    height="400px">
    <IgrNumericXAxis name="xAxis" />
</IgrDataChart>

数字 Y 軸

IgrNumericYAxis は、データを連続的に変化する数値データ項目として扱います。この軸のラベルは Y 軸に沿ってに配置されます。ラベルの位置は、対応する値マッピングプロパティを使用してマップされたデータ列の値に基づいて変わります。このタイプの軸は、散布シリーズとシェイプシリーズのタイプと互換性があります。また、このタイプの軸は、ファイナンシャルシリーズ、範囲シリーズ、カテゴリシリーズ (棒シリーズを除く) タイプと互換性があります。

以下のコードは、IgrNumericYAxis を React データチャートコンポーネントに追加する方法を示します。

<IgrDataChart dataSource={this.data}
    width="100%"
    height="400px">
    <IgrNumericYAxis name="yAxis" />
</IgrDataChart>

時間 X 軸

IgrTimeXAxis は、日付順にソートされた一連のカテゴリデータ項目としてデータを扱います。この軸のラベルは、この軸の dateTimeMemberPath プロパティを使用してマッピングされたデータ列の値に従って、X軸に沿って配置されます。このタイプの軸は、ファイナンシャルシリーズ、範囲シリーズ、カテゴリシリーズと互換性があります。

IgrTimeXAxis に breaks を使用してデータの間隔を除外するオプションがあります。その結果として、ラベルは除外された間隔で表示されません。たとえば、勤務日/休業日、休日、週末などです。

以下のコードは、IgrTimeXAxis を React データチャートコンポーネントに追加する方法を示します。

<IgrDataChart dataSource={this.data}
    width="100%"
    height="400px">
    <IgrTimeXAxis name="xAxis" dateTimeMemberPath="Date"/>
</IgrDataChart>

序数時間 X 軸

IgrOrdinalTimeXAxis と IgrTimeXAxis の主な違いは、序数軸で表示される日付は等距離であると見なされることです。IgrTimeXAxis は現在、日付を時系列に従ってソートします。そのため、パフォーマンスを向上させるため、またはデータ項目が同じ時間間隔で時系列順になっている場合は、IgrOrdinalTimeXAxis を使用することをお勧めします。

以下のコードは、IgrOrdinalTimeXAxis を React データチャートコンポーネントに追加する方法を示します。

<IgrDataChart dataSource={this.data}
    width="100%"
    height="400px">
    <IgrOrdinalTimeXAxis name="xAxis" dateTimeMemberPath="Date"/>
</IgrDataChart>

Y 軸の変化率

IgrPercentChangeYAxis は、参照値としてシリーズの最初のポイントを取得します。それ以後の値は参照値に比較して増減パーセントに基づいて拡大縮小されます。

この軸タイプは IgrNumericYAxis に基づいているため、同じシリーズタイプをサポートします。カテゴリシリーズの場合、参照値はそれらのシリーズの ValueMemberPath に対応します。散布シリーズの場合、参照値はそれらのシリーズの YMemberPath に対応します。ファイナンシャルシリーズの場合、参照値は OpenMemberPath プロパティにマッピングされた最初の値に対応します。

以下のコードは、IgrPercentChangeYAxis を React データチャートコンポーネントに追加する方法を示します。

<IgrDataChart dataSource={this.data}
    width="100%"
    height="400px">
    <IgrPercentChangeYAxis name="yAxis" />
</IgrDataChart>