Angular 範囲縦棒チャート

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

サンプル

軸の要件

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

データの要件

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

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

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

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

モジュールの要件

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

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

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

コード例

このコードは、IgxRangeColumnSeriesComponent を使用して 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-column-series
        name="series1"
        xAxisName="xAxis"
        yAxisName="yAxis"
        highMemberPath="High"
        lowMemberPath="Low">
    </igx-range-column-series>
 </igx-data-chart>

その他のリソース