Angular 積層型 100 棒チャート

Ignite UI for Angular 積層型 100 棒チャートは、カテゴリチャートのグループに属し、互いに積み重ねられた長方形のコレクション (IgxStackedFragmentSeriesComponent) を使用して描画されます。コレクションのそれぞれの積層フラグメントは各積層の視覚的な要素を表します。各積層は正の値と負の値の両方を含みます。正の値はいずれも x 軸の正の側にグループ化され、負の値は x 軸の負の側にグループ化されます。Angular 積層型 100 棒チャートは、y 軸の値の処理以外は、Angular 積層型棒チャートと同じです。データを直接表現するのでなく、積層型棒チャートは、データポイント内のすべての値の合計の割合でデータを表します。IgxStacked100BarSeriesComponent は IgxStacked100ColumnSeriesComponent と同じデータプロットの概念を使用しますが、データポイントは垂直線 (y軸) ではなく水平線 (x軸) に沿って積み重ねられます。つまり、積層型 100 棒チャートは積層型 100 縦棒チャートのように描画されますが、時計回りに 90 度回転します。

サンプル

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

軸の要件

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

Required Data

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

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

モジュールの要件

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

DataChartCoreModule
DataChartInteractivityModule
Stacked100BarSeriesModule

// axis' modules:
import { IgxNumericXAxis } from 'igniteui-angular-charts';
import { IgxCategoryYAxis } from 'igniteui-angular-charts';
// series' modules:
import { IgxStacked100BarSeries } 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
        // ...
    ]
})

コード例

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