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();
    

    モジュールの要件

    範囲シリーズを作成するには、以下のモジュールが必要です。

    // 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 を作成するために上記のコードを使用することもできます。

    その他のリソース