Angular 範囲エリア チャート

Ignite UI for Angular 範囲エリア チャートは、範囲チャートのグループに属し、線の間の領域が塗りつぶされた 2 本の線を使用してレンダリングされます。このタイプのシリーズは、同じデータ ポイントの低い値と高い値の間の変化量を強調します一定期間、または複数のアイテムを比較します。範囲値は y 軸に表示され、カテゴリは x 軸に表示されます。IgxRangeAreaSeriesComponent は、範囲が塗りつぶされた領域ではなく垂直柱の集まりで表されること以外は IgxRangeColumnSeriesComponent と同じです。

サンプル

軸の要件

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

データの要件

IgxRadialAreaSeriesComponent には以下のデータ要件があります。

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

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

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

モジュールの要件

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

  • DataChartCoreModule
  • RadialPieSeriesModule
  • RadialPieSeriesCoreModule
  • DataChartInteractivityModule
// in app.module.ts file
import { IgxCategoryXAxis } from 'igniteui-angular-charts';
import { IgxNumericYAxis } from 'igniteui-angular-charts';
import { IgxRangeAreaSeries } from 'igniteui-angular-charts';
import { IgxDataChartCoreModule } from 'igniteui-angular-charts';
import { IgxDataChartCategoryModule } from 'igniteui-angular-charts';

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

コード例

このコードは、IgxRangeAreaSeriesComponent を使用して Ignite UI for Angular データ チャートのインスタンスを作成し、それをデータソースにバインドする方法を示します。

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

その他のリソース