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 シリーズ と互換性があります。

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

以下のコードは、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 軸

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

その他のリソース