React カテゴリチャートの概要

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

サンプル

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

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

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

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

依存関係

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

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

モジュールの要件

IgrCategoryChart は以下のモジュールを要求します。

import { IgrCategoryChartModule } from 'igniteui-react-charts';

IgrCategoryChartModule.register();

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

使用方法

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

React カテゴリチャートコンポーネントを作成するには、はじめにデータをバインドする必要があります。以下のコードスニペットは、シンプルなデータソースを作成する方法を示します。

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 プロパティを設定します。以下は、カテゴリチャートでサポートされるすべてのタイプです。

Note

特別なケースにプロパティの Auto 設定があります。Auto を使用した場合、チャートがデータを分析し、最適なチャートタイプを割り当てます。

サポートされるチャートタイプ

プロパティ	説明	例
`Line`	各データポイントにマーカーがあるカテゴリ折れ線シリーズを指定します。
`Area`	カテゴリエリアシリーズを指定します。
`Column`	各データポイントに垂直長方形があるカテゴリ縦棒チャートを指定します。
`Point`	各データポイントにマーカーがあるカテゴリポイントチャートを指定します。
`StepLine`	カテゴリステップ折れ線チャートを指定します。
`StepArea`	カテゴリステップエリアチャートを指定します。
`Spline`	各データポイントにマーカーがあるカテゴリスプライン折れ線シリーズを指定します。
`SplineArea`	カテゴリスプラインエリアシリーズを指定します。
`Waterfall`	カテゴリウォーターフォールチャートを指定します。
`Auto`	データアダプターからの提案に基づいてチャートタイプの自動選択を指定します。

React カテゴリ チャートの概要