Angular 積層型エリア チャート

Ignite UI for Angular 積層エリア チャートはカテゴリ チャートのグループに属し、線分 (IgxStackedFragmentSeriesComponent) で接続された点のコレクションを使用して描画され、線の下の領域が塗りつぶされて積み上げられます。コレクションのそれぞれの積層フラグメントは各積層の視覚的な要素を表します。各積層は正の値と負の値の両方を含みます。正の値はいずれも y 軸の正の側にグループ化され、負の値は y 軸の負の側にグループ化されます。

サンプル

StackBlitz で表示

IgxStackedAreaSeriesComponent には、IgxStackedFragmentSeriesComponent 要素を配置できる独自の IgxSeriesComponent コレクションがあります。これらのフラグメントは、チャートの実際のレンダリングを構成するものであり、ValueMemberPath を受け取る要素です。

軸の要件

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

• IgxCategoryXAxisComponent
• IgxOrdinalTimeXAxisComponent
• IgxTimeXAxisComponent
• IgxNumericYAxisComponent

データの要件

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

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

モジュールの要件

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

• DataChartCoreModule
• DataChartInteractivityModule
• DataChartCategoryModule
• DataChartStackedModule,
• StackedFragmentSeriesModule,

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

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

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

コード例

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

<igx-data-chart #chart height="100%" width="100%" [dataSource]="data">
  <igx-category-x-axis #xAxis label="Country"></igx-category-x-axis>
  <igx-numeric-y-axis #yAxis></igx-numeric-y-axis>

  <igx-stacked-area-series [xAxis]="xAxis" [yAxis]="yAxis">
    <igx-stacked-fragment-series valueMemberPath="Coal"></igx-stacked-fragment-series>
    <igx-stacked-fragment-series valueMemberPath="Hydro"></igx-stacked-fragment-series>
    <igx-stacked-fragment-series valueMemberPath="Nuclear"></igx-stacked-fragment-series>
    <igx-stacked-fragment-series valueMemberPath="Gas"></igx-stacked-fragment-series>
    <igx-stacked-fragment-series valueMemberPath="Oil"></igx-stacked-fragment-series>
  </igx-stacked-area-series>

</igx-data-chart>