Angular 軸

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

サンプル

サポートされる軸

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

軸タイプ	サポートされるシリーズタイプ
CategoryYAxis	Category シリーズグループの Bar シリーズのみ
CategoryXAxis	すべての Financial シリーズ、Range シリーズ、Category シリーズ (Bar シリーズを除く)
TimeXAxis	すべての Financial シリーズ、Range シリーズ、Category シリーズ (Bar シリーズを除く)
OrdinalTimeXAxis	すべての Financial シリーズ、Range シリーズ、Category シリーズ (Bar シリーズを除く)
PercentChangeYAxis	すべての Financial シリーズ、Range シリーズ、Category シリーズ、Scatter シリーズ、Shape シリーズ
NumericYAxis	すべての Scatter シリーズ、Shape シリーズ、Financial シリーズ、Range シリーズ、Category シリーズ
NumericXAxis	Category シリーズグループのすべての Scatter シリーズ、Shape シリーズ、Bar シリーズ
NumericAngleAxis	すべての Polar シリーズ
NumericRadiusAxis	すべての Polar シリーズと Radial シリーズ
CategoryAngleAxis	すべての Radial シリーズ

カテゴリ X 軸

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

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

<igx-data-chart [dataSource]="data"
    width="100%"
    height="400px">
    <igx-category-x-axis name="xAxis" />
</igx-data-chart>

カテゴリ Y 軸

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

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

<igx-data-chart [dataSource]="data"
    width="100%"
    height="400px">
    <igx-category-y-axis name="yAxis" />
</igx-data-chart>

カテゴリ DateTime X 軸

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

<igx-data-chart [dataSource]="data"
    width="100%"
    height="400px">
    <igx-category-date-time-x-axis name="xAxis"
        (FormatLabel)=”xAxisFormatLabel()”
        dateTimeMemberPath="Date" >
        </igx-category-date-time-x-axis>
</igx-data-chart>

数字 X 軸

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

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

<igx-data-chart [dataSource]="data"
    width="100%"
    height="400px">
    <igx-numeric-x-axis name="xAxis" />
</igx-data-chart>

数字 Y 軸

IgxNumericYAxisComponent は、データを連続的に変化する数値データ項目として扱います。この軸のラベルは Y 軸に沿ってに配置されます。ラベルの位置は、対応する値マッピングプロパティを使用してマップされたデータ列の値に基づいて変わります。このタイプの軸は、Scatter シリーズと Shape シリーズのタイプと互換性があります。また、このタイプの軸は、Financial シリーズ、Range シリーズ、Category シリーズ (Bar シリーズを除く) タイプと互換性があります。

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

<igx-data-chart [dataSource]="data"
    width="100%"
    height="400px">
    <igx-numeric-y-axis name="yAxis" />
</igx-data-chart>

時間 X 軸

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

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

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

<igx-data-chart [dataSource]="data"
    width="100%"
    height="400px">
    <igx-time-x-axis name="xAxis" dateTimeMemberPath="Date"
    DataSource="@data"/>
</igx-data-chart>

序数時間 X 軸

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

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

<igx-data-chart [dataSource]="data"
    width="100%"
    height="400px">
    <igx-ordinal-time-x-axis name="xAxis" dateTimeMemberPath="Date"/>
</igx-data-chart>

Y 軸の変化率

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

この軸タイプは IgxNumericYAxisComponent に基づいているため、同じシリーズタイプをサポートします。Category シリーズの場合、参照値はそれらのシリーズの ValueMemberPath に対応します。Scatter シリーズの場合、参照値はそれらのシリーズの YMemberPath に対応します。Financial シリーズの場合、参照値は OpenMemberPath プロパティにマッピングされた最初の値に対応します。

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

<igx-data-chart [dataSource]="data"
    width="100%"
    height="400px">
    <igx-percent-change-y-axis name="yAxis" />
</igx-data-chart>