Angular カテゴリ シリーズ

このトピックは、Angular データ チャート コンポーネントのファイナカテゴリ シリーズのさまざまなタイプについて説明します。カテゴリ シリーズは、データを取り入れてそれを水平線 (IgxColumnSeriesComponent など) または垂直線 (IgxBarSeriesComponent など) に沿って延ばしたデータ ポイントのコレクションとして描画するチャート シリーズの中でも、もっとも簡単で一般的な形のグループです。

Angular カテゴリ シリーズの例

カテゴリ シリーズのタイプ

以下の表は、すべてのタイプのカテゴリ シリーズとその説明をまとめたものです。

シリーズ名 概要
IgxAreaSeriesComponent その下の領域が塗りつぶされる線で接続された、均等に配置された一連の点を表示します。カテゴリは水平に配置され、値は垂直に配置されます。
IgxBarSeriesComponent 個々のデータを別々の行に表示します。他のシリーズとは異なり、カテゴリは縦に並べられ、値は横にプロットされます。つまり、このシリーズは IgxColumnSeriesComponent に似てますが、時計回りに90度回転されます。
IgxColumnSeriesComponent 個々のデータを別々の列に表示します。カテゴリは水平方向、値は垂直方向にプロットされます。データ シリーズの経時的な変化を表示、または複数の項目を比較するために使用します。
IgxLineSeriesComponent 直線で結ばれた均等に配置された点のセットを表示します。経時的に連続的に変化するデータまたは情報を示すために使用します。ポイントの間の関係を強調する必要がある場合に役立ちます。
IgxPointSeriesComponent 線で結ばずにデータポイントの位置にマーカーを表示します。これらのマーカーの形状は、markerType プロパティを使用して変更されます。
IgxSplineSeriesComponent データ表示を向上させるためにスプライン補間を使用して生成した滑らかな線で接続された、均等に配置された点のセットを表示します。
IgxSplineAreaSeriesComponent データの表示を向上させるためのスプライン補間とスムージングの追加機能を持つ IgxAreaSeriesComponent タイプ。
IgxStepLineSeriesComponent IgxLineSeriesComponent と同じですが、値が点間の最短経路をトレースする直線ではなく、段階的に連続する垂直線と水平線で接続されている点が異なります。
IgxStepAreaSeriesComponent IgxStepLineSeriesComponent と同じですが、連続する垂直線と水平線がデータポイント間の変化を段階的に進行させるのではなく、値より下の領域が塗りつぶされる点が異なります。
IgxWaterfallSeriesComponent ポイントの集合を、連続するデータ ポイントの値同士の差異を示す垂直列として表示します。列は色でコード化され、値が正の変化であるか負の変化であるかを区別します。カテゴリは水平方向、値は垂直方向にプロットされます。データ ポイントの経時的な変化を表示、または複数の項目を比較するために使用します。

軸の要件

Angular データ チャート コンポーネントは、さまざまな軸タイプを提供しますが、カテゴリ シリーズの特定のタイプでは以下の軸タイプのみ使用できます。

シリーズ タイプ YAxis タイプ XAxis タイプ
IgxBarSeriesComponent IgxCategoryYAxisComponent IgxNumericXAxisComponent
IgxAreaSeriesComponent IgxNumericYAxisComponent IgxCategoryXAxisComponent, IgxOrdinalTimeXAxisComponent, IgxTimeXAxisComponent
IgxColumnSeriesComponent IgxNumericYAxisComponent IgxCategoryXAxisComponent, IgxOrdinalTimeXAxisComponent, IgxTimeXAxisComponent
IgxLineSeriesComponent IgxNumericYAxisComponent IgxCategoryXAxisComponent, IgxOrdinalTimeXAxisComponent, IgxTimeXAxisComponent
IgxSplineSeriesComponent IgxNumericYAxisComponent IgxCategoryXAxisComponent, IgxOrdinalTimeXAxisComponent, IgxTimeXAxisComponent
IgxSplineAreaSeriesComponent IgxNumericYAxisComponent IgxCategoryXAxisComponent, IgxOrdinalTimeXAxisComponent, IgxTimeXAxisComponent
IgxStepAreaSeriesComponent IgxNumericYAxisComponent IgxCategoryXAxisComponent, IgxOrdinalTimeXAxisComponent, IgxTimeXAxisComponent
IgxStepLineSeriesComponent IgxNumericYAxisComponent IgxCategoryXAxisComponent, IgxOrdinalTimeXAxisComponent, IgxTimeXAxisComponent
IgxWaterfallSeriesComponent IgxNumericYAxisComponent IgxCategoryXAxisComponent, IgxOrdinalTimeXAxisComponent, IgxTimeXAxisComponent

データの要件

カテゴリシリーズには、以下のデータ要件があります。

  • データソースはデータ項目の配列またはリストである必要があります。
  • データソースには少なくとも1つのデータ項目が含まれている必要があります。そうでない場合、チャートはカテゴリ シリーズをレンダリングしません。
  • すべてのデータ項目には、財務軸 (IgxCategoryXAxisComponent など) の IgxLabelComponent プロパティにマッピングする必要があるデータ列 （文字列または日時）を少なくとも 1 列含める必要があります
  • データ項目は、カテゴリシリーズ (IgxLineSeriesComponent など) の ValueMemberPath プロパティを使用してマップする数値データ列を少なくとも 1 列含む必要があります。

上記データ要件を満たすデータソースとして SampleCategoryData を使用できます。

public dataSource: any[] = SampleCategoryData.create();

モジュールの要件

The category series を作成するには、以下のモジュールが必要です。 モジュールはアプリケーションのエントリ ポイントに登録する必要があります。

  • DataChartCoreModule;
  • DataChartCategoryModule;
  • DataChartCategoryCoreModule;
  • DataChartInteractivityModule; 
// axis' modules:
import { IgxCategoryXAxis } from 'igniteui-angular-charts';
import { IgxCategoryYAxis } from 'igniteui-angular-charts';
import { IgxNumericYAxis } from 'igniteui-angular-charts';
import { IgxNumericXAxis } from 'igniteui-angular-charts';
// series' modules:
import { IgxAreaSeries } from 'igniteui-angular-charts';
import { IgxBarSeries } from 'igniteui-angular-charts';
import { IgxColumnSeries } from 'igniteui-angular-charts';
import { IgxLineSeries } from 'igniteui-angular-charts';
import { IgxPointSeries } from 'igniteui-angular-charts';
import { IgxSplineSeries } from 'igniteui-angular-charts';
import { IgxSplineAreaSeries } from 'igniteui-angular-charts';
import { IgxStepAreaSeries } from 'igniteui-angular-charts';
import { IgxStepLineSeries } from 'igniteui-angular-charts';
import { IgxWaterfallSeries } from 'igniteui-angular-charts';
// data chart's modules:

import { IgxDataChartCoreModule } from 'igniteui-angular-charts';
import { IgxDataChartCategoryModule } from 'igniteui-angular-charts';

@NgModule({
    imports: [
        // ...
        IgxDataChartCoreModule,
        IgxDataChartCategoryModule,
        // ...
    ]
})

コード例 - 列シリーズ

このコードは、IgxColumnSeriesComponent でデータ チャートのインスタンスを作成し、データソースにバインドする方法を説明します。

 <igx-data-chart
    [dataSource]="dataSource"
    width="700px"
    height="500px">
    <igx-category-x-axis name="xAxis" label="Year"></igx-category-x-axis>
    <igx-numeric-y-axis  name="yAxis"></igx-numeric-y-axis>
    <igx-column-series
        name="series1"
        xAxisName="xAxis"
        yAxisName="yAxis"
        valueMemberPath="USA">
    </igx-column-series>
 </igx-data-chart>

コード例 - 棒シリーズ

上記のコードを使って IgxColumnSeriesComponent をレンダリングしたいシリーズの名前で置き換えて他のタイプのカテゴリ シリーズを作成することもできます。ただし、IgxBarSeriesComponent は、他のタイプの軸が必要なため、この規則の例外となります。このコードは、IgxBarSeriesComponent でデータチャートのインスタンスを作成し、データソースにバインドする方法を説明します。

 <igx-data-chart
    [dataSource]="dataSource"
    width="700px"
    height="500px">
    <igx-numeric-x-axis  name="xAxis"></igx-numeric-x-axis>
    <igx-category-y-axis name="yAxis" label="Year"></igx-category-y-axis>
    <igx-bar-series
        name="series1"
        xAxisName="xAxis"
        yAxisName="yAxis"
        valueMemberPath="USA">
    </igx-bar-series>
 </igx-data-chart>

その他のリソース