Angular 棒チャート

Ignite UI for Angular 棒チャートはカテゴリ チャートのグループに属し、チャートの左から右にデータ ポイントの値に向かって伸びる長方形のコレクションを使用して描画されます。IgxBarSeriesComponent は、IgxColumnSeriesComponent と同じデータ プロットの概念を使用していますが、データ ポイントは、水平 (x 軸) でなく垂直軸 (y 軸) に沿って拡大します。つまり、棒チャートは縦棒チャートのように描画されますが、時計回りに 90 度回転します。

サンプル

軸の要件

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

データの要件

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

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

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

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

モジュールの要件

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

  • DataChartCoreModule
  • DataChartCategoryModule
  • DataChartCategoryCoreModule
  • DataChartInteractivityModule
// axis' modules:
import { IgxNumericXAxis } from 'igniteui-angular-charts';
import { IgxCategoryYAxis } from 'igniteui-angular-charts';
// series' modules:
import { IgxBarSeries } from 'igniteui-angular-charts';
// data chart's modules:

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

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

コード例

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

 <igx-data-chart
    [dataSource]="dataSource"
    width="700px"
    height="500px">
    <igx-numeric-x-axis  name="xAxis"></igx-numeric-x-axis>
    <igx-category-y-axis name="yAxis" label="Year"></igx-category-y-axis>
    <igx-bar-series
        name="series1"
        xAxisName="xAxis"
        yAxisName="yAxis"
        valueMemberPath="USA">
    </igx-bar-series>
 </igx-data-chart>

その他のリソース