Angular エリア シリーズ

このトピックでは、Angular データ チャート コンポーネントコントロールのさまざまな種類のエリア シリーズについて説明します。エリア シリーズは、2 つの数値データ列を使用し、それらを水平方向に引き伸ばされたデータポイントのコレクションとしてレンダリングする一連のチャート シリーズです (IgxRangeAreaSeriesComponent など)。

Angular エリア シリーズの例

エリア シリーズのタイプ

以下の表は、すべての種類のエリア シリーズとその説明を示しています。

シリーズ名 説明
IgxRangeAreaSeriesComponent データポイントの High / Low 値のペア間の塗りつぶされた領域/範囲を表示します。
IgxRangeColumnSeriesComponent カテゴリは横に並べられ、値は縦に並べられます。高値/低値のデータポイント間の個別の列に離散データを表示します。カテゴリは水平方向、値は垂直方向にプロットされます。

軸の要件

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

Series タイプ YAxis タイプ XAxis タイプ
IgxRangeAreaSeriesComponent IgxNumericYAxisComponent IgxCategoryXAxisComponent, IgxOrdinalTimeXAxisComponent, IgxTimeXAxisComponent
IgxRangeColumnSeriesComponent IgxNumericYAxisComponent IgxCategoryXAxisComponent, IgxOrdinalTimeXAxisComponent, IgxTimeXAxisComponent

データの要件

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

  • データソースはデータ項目の配列またはリストである必要があります。
  • データソースはデータ項目を少なくとも 1 つ含む必要があります。含まない場合はチャートはエリア シリーズを描画しません。
  • すべてのデータ項目には、カテゴリ軸の IgxLabelComponent プロパティにマッピングする必要があるラベルデータ列(文字列または日時)を少なくとも1つ含める必要があります(IgxCategoryXAxisComponent など)。
  • すべてのデータ項目には、極座標シリーズの HighMemberPathLowMemberPath プロパティを使用してマッピングする必要がある少なくとも2つの数値データ列 (IgxRangeAreaSeriesComponent など)を含める必要があります。

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

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

モジュールの要件

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

  • DataChartCoreModule
  • RadialPieSeriesModule
  • RadialPieSeriesCoreModule
  • DataChartInteractivityModule
// in app.module.ts file

// axis' modules:
import { IgxCategoryXAxis } from 'igniteui-angular-charts';
import { IgxNumericYAxis } from 'igniteui-angular-charts';
// series' modules:
import { IgxRangeAreaSeries } from 'igniteui-angular-charts';
import { IgxRangeColumnSeries } from 'igniteui-angular-charts';
// data chart's modules:

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

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

コード例

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

 <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-range-column-series
        name="series1"
        xAxisName="xAxis"
        yAxisName="yAxis"
        highMemberPath="High"
        lowMemberPath="Low">
    </igx-range-column-series>
 </igx-data-chart>

IgxRangeColumnSeriesComponent を置き換えることで IgxRangeAreaSeriesComponent を作成するために上記のコードを使用することもできます。

その他のリソース