Category Chart

Category Chart はカテゴリ データを可視化するチャート コンポーネントです。複雑なデータ ビジュアライゼーションを API で簡素化できます。

デモ

ユーザーがデータのコレクョンまたはコレクション グループにバインドしてデータを指定するプロパティを設定後、あとの作業はチャート コントロールによって処理されます。コンポーネントはデータを解析し、データを表すための最適なシリーズを自動的に選択します。また、ユーザーが chartType プロパティを設定して定義済みのチャート タイプから選択できます。チャート タイプは折れ線、エリア、柱状、ポイント、スプライン、スプライン エリア、ステップ エリア、ステップ折れ線、およびウォーターフォールを含みます。

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

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

  • Line
  • Area
  • Column
  • Point
  • Spline
  • SplineArea
  • StepArea
  • StepLine
  • Waterfall

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

依存関係

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

npm install ignite-angular-charts ignite-angular-core

カテゴリ チャートが NgModule としてエクスポートされるため、アプリケーションで AppModuleIgxCategoryChartModule をインポートする必要があります。

// app.module.ts
import { IgxCategoryChartModule } from 'ignite-angular-charts/ES5/igx-category-chart-module';

@NgModule({
    imports: [
        ...
        IgxCategoryChartModule,
        ...
    ]
})
export class AppModule {}

利用可能なシリーズのサブセットおよびその他のオプションの機能を除外するカテゴリ チャートの最小構成を読み込むことができます。それにより、igxCategoryChartCoreModule および igxLineSeriesDynamicModule などの使用されるシリーズの動的なモジュールのみを読み込みます。chartTypeauto の場合、読み込んだシリーズ型が選択されます。

使用方法

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

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

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 }
];

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

 <igx-category-chart [dataSource]="data"
                     width="700px"
                     height="500px">
 </igx-category-chart>

チャート タイプ

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

Note

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

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

プロパティ 説明
line 各データ ポイントにマーカーがあるカテゴリ折れ線シリーズを指定します。
area カテゴリ エリア シリーズを指定します。
column 各データ ポイントに垂直長方形があるカテゴリ柱状チャートを指定します。
point 各データ ポイントにマーカーがあるカテゴリ ポイント チャートを指定します。
stepLine カテゴリ ステップ折れ線チャートを指定します。
stepArea カテゴリ ステップ エリア チャートを指定します。
spline 各データ ポイントにマーカーがあるカテゴリ スプライン折れ線シリーズを指定します。
splineArea カテゴリ スプライン エリア シリーズを指定します。
waterfall カテゴリ ウォーターフォール チャートを指定します。
auto データ アダプターからの提案に基づいてチャート タイプの自動選択を指定します。