カテゴリ チャート

IgrCategoryChart は、カテゴリ データの可視化を容易にするチャート コンポーネントです。このコントロールにより、データ可視化ドメインの複雑さを管理しやすい API に簡素化できます。

デモ

ユーザーがデータのコレクョンまたはコレクション グループにバインドしてデータを指定するプロパティを設定後、あとの作業はチャート コントロールによって処理されます。コンポーネントはデータを解析し、データを表すための最適なシリーズ タイプを自動的に選択します。

スマート データ アダプターは、データを分析して適切なビジュアライゼーションを描画します。たとえば、ChartType プロパティが Auto に設定される場合、コントロールは小さいデータ セットのために柱状チャートを使用し、より大きいデータ セットのために折れ線チャートを使用します。

ただし、ChartType を明示的に以下に設定してチャート タイプを指定することもできます。

その他のカテゴリ チャート コントロールの直感的な動作の例として、明示的にラベルを設定する必要がないことがあります。カテゴリ チャートは、提供したデータ内で最初の適切な文字列プロパティを使用し、ラベルに使用します。

依存関係

chart パッケージをインストールするときに core パッケージもインストールする必要があります。

  • npm install --save igniteui-react-core
  • npm install --save igniteui-react-charts

必要なモジュール

IgrCategoryChart は、以下のモジュールが必要です。

import { IgrCategoryChartModule } from "igniteui-react-charts/ES5/igr-category-chart-module';

IgrCategoryChartModule.register();

カテゴリ チャートのより最小限の設定をロードすることも可能で、それによって可能なシリーズのサブセットだけをロードし、代わりに IgrCategoryChartCoreModuleIgrLineSeriesDynamicModule など問題のシリーズの動的モジュールをロードして除外します。ChartTypeAuto の場合、読み込んだシリーズ型が選択されます。

使用方法

カテゴリ チャート モジュールをインポートした後、チャートをデータにバインドします。

IgrCategoryChart コントロールを作成するには、はじめにデータをバインドする必要があります。以下のコード スニペットは、シンプルなデータソースを作成する方法を示します。

var data = [
 { "CountryName": "China", "Pop1995": 1216, "Pop2005": 1297, "Pop2015": 1361, "Pop2025": 1394 },
 { "CountryName": "India", "Pop1995": 920, "Pop2005": 1090, "Pop2015": 1251, "Pop2025": 1396 },
 { "CountryName": "United States", "Pop1995": 266, "Pop2005": 295, "Pop2015": 322, "Pop2025": 351 },
 { "CountryName": "Indonesia", "Pop1995": 197, "Pop2005": 229, "Pop2015": 256, "Pop2025": 277 },
 { "CountryName": "Brazil", "Pop1995": 161, "Pop2005": 186, "Pop2015": 204, "Pop2025": 218 }
];

以下のコードはカテゴリ チャートを上記のデータにバインドします。

 <IgrCategoryChart dataSource={this.state.data}
                   width="700px"
                   height="500px"/>

チャート タイプ

表示するチャート型を設定するために、カテゴリ チャートのデフォルト動作をオーバーライドできます。これを実行するには、chartType プロパティを設定します。 以下は、カテゴリ チャートでサポートされるすべてのタイプです。