React 軸

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

React 軸の例

Edit on CodeSandbox

サポートされる軸

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軸に沿って配置されます。このタイプの軸は、ファイナンシャル シリーズ範囲シリーズカテゴリ シリーズ と互換性があります。

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

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

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

序数時間 X 軸

IgrOrdinalTimeXAxisIgrTimeXAxis の主な違いは、序数軸で表示される日付は等距離であると見なされることです。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>

その他のリソース