Angular 円チャート

Ignite UI for Angular 円チャート (円グラフ) は、データセットのカテゴリ (部分) が合計 (全体) 値になる方法を示す部分対全体チャートです。カテゴリは、円グラフまたは円グラフのセクションとして描画されます。各セクション (円スライス) は基本データ値に比例する円弧の長さを持ちます。カテゴリは、分析中の合計値に対する値の割合に基づいて、100 または 100% の部分として他のカテゴリに比例して表示されます。

Angular 円チャートの例

データ項目を文字列と数値データでバインドすることで、IgxPieChartComponent の円チャートが作成できます。これらのデータ値を足すと可視化率 100% になります。この例では部門ごとの予算支出の全体的な内訳を示しています。

Angular 円チャートの推奨事項

円チャートは小さいデータセットに適していて、一目で読みやすくなります。円チャートは、部分対全体の可視化の一種です。その他:

円
ドーナツ (リング)
ファンネル
積層型エリア
積層型 100% エリア (積層型パーセントエリア)
積層型棒
積層型 100% 棒 (積層型パーセント棒)
ツリーマップ
ウォーターフォール

Angular 円チャートは、データを解析するためのビューアーツールを提供するインタラクティブ機能を含みます。

凡例
スライスの分割
スライスの選択
チャートアニメーション

円チャートのベストプラクティス:

スライスまたはセグメントを、合計値または全体に対するパーセンテージ値として比較する。
カテゴリのグループがどのようにより小さなセグメントに分割されるかを表示する。
小さい非階層データセット (6 ～ 8 セグメント未満のデータ) を表示する。
データセグメントの合計が 100% になるようにする。
データの順序を最大 (最高) から最小 (最低) に並べ替える。
12 時の位置から始めて時計回りに進む標準的なプレゼンテーション方法を使用する。
カラーパレットがセグメント/スライスで識別できるようにする。
データラベルを読みやすくするため、セグメントと凡例のどちらに配置するべきか検討する。
より分かりやすい表現のために、円の代わりに棒またはリングチャートを選択する。
比較分析のために複数の円チャートを並べて配置しないようにする。

以下の場合に円チャートを使用しないでください。

経時変化を比較する場合 - 棒チャート、折れ線チャート、またはエリアチャートを使用してください。
正確なデータ比較が必要な場合 - 棒チャート、折れ線チャート、またはエリアチャートを使用してください。
6 セグメントまたは 8 セグメント (大量のデータ) がある場合 - データストーリーに適した棒チャート、折れ線チャート、またはエリアチャートを検討してください。
棒チャートで値の違いがわかりやすくなります。

Angular 円チャートの凡例

凡例は、各ポイントに関する情報を表示し、そのポイントの合計に対する割合を示します凡例クリックを使用してポイントを縮小できます。

円チャートコンポーネントの隣に凡例を表示するには、ItemLegend を作成し、IgxLegendComponent プロパティに割り当てます。legendLabelMemberPath は、各円スライスの凡例項目を表示するために使用するデータモデルのプロパティを指定します。

また、凡例項目の外観をカスタマイズするために legendItemTemplate および legendItemBadgeTemplateプロパティ、IgxItemLegendComponent の複数のフォントプロパティも使用できます。

Angular 円チャートその他の分類項目

円チャートコンポーネントの基本データに、小さい値を含む多くの項目が含まれる場合があります。この場合、Others カテゴリは、単一スライスへの複数のデータ値の自動集計を許可します。

以下のサンプルは、othersCategoryThreshold を 2 に設定、othersCategoryType は Number に設定されています。したがって、2 以下の値を含む項目は、Others カテゴリに割り当てられます。

othersCategoryType を Percent に設定すると、othersCategoryThreshold は値ではなくパーセンテージとして解釈されます。つまり、値がすべての項目の値の合計の 2% 未満である項目は、Others カテゴリに割り当てられます。使用しているアプリケーションに最も適切な othersCategoryType を使用できます。

Angular 円チャートの展開

円チャートコンポーネントは個々の円スライスの選択と展開だけでなく、選択状態を変更しカスタムロジックを実装することを可能にする SliceClick イベントをコンポーネントサポートします。

Angular 円チャートの選択

デフォルトで、円チャートはマウスクリックによるスライス選択をサポートします。選択されたスライスは、selectedItems プロパティで取得します。選択したスライスがハイライト表示されます。

円チャートのモードは selectionMode プロパティで設定します。デフォルト値は Single です。選択機能を無効化するためにはプロパティを Manual に設定します。

円チャートコンポーネントは、選択モードを 3 つコンポーネントサポートします。

Single - single モードに設定すると、一度に 1 つのスライスのみ選択します。他のスライスを選択すると、最初に選択したスライスは選択解除され、新しいスライスが選択されます。
Multiple - Multiple モードに設定すると、一度に複数のスライスを選択します。スライスをクリックするとスライスが選択され、他のスライスをクリックすると、最初のスライスも、新しくクリックしたスライスも選択されます。
手動 - Manual モードに設定すると、選択は無効化されます。

円チャートコンポーネントには、選択機能に関連する 4 つのイベントがあります。

SelectedItemChanging
SelectedItemChanged
SelectedItemsChanging
SelectedItemsChanged

「Changing」で終わるイベントはキャンセル可能なイベントです。すなわち、イベント引数プロパティ Cancel を true に設定することで、スライスの選択を停止します。True に設定すると、関連付けられたプロパティは更新されず、その結果スライスは選択されません。この設定はたとえば、スライスのデータによって一定のスライスの選択を無効化する場合に使用します。

「その他」スライスをクリックすると、IgxPieSliceOthersContext オブジェクトが返されます。オブジェクトは、「その他」スライスに含まれるデータ項目のリストがあります。

Angular 円チャートのアニメーション

チャートの半径をスケールする radiusFactor プロパティを設定して円チャートをすばやくアニメーション化できます。startAngle プロパティを設定してチャートが回転する間、チャートの角度が増加し続けるようにします。

以下のコードでは、radiusFactor がチャートをサイズの 0.25% 増加し、startAngle がチャートを 1 度回転しています。radiusFactor と startAngle が最大値に達すると、アニメーションフラグをリセットし、間隔をクリアしてアニメーションを停止します。

Angular 円チャートのスタイル設定

円チャートを作成したら、次に示すように、チャートのスライスの色を変更するなど、スタイルをさらにカスタマイズすることができます。

Angular ラジアル円チャート

ラジアル円チャートはラジアルチャートのグループに属し、チャートの中心からデータポイントの位置に向かって伸びる円スライスを使用します。このチャートタイプは、複数の一連のデータポイントを分類するという概念を採用しており、データポイントを水平線に沿って引き伸ばすのではなく、円形の軸に沿ってラップします。

その他のリソース

API リファレンス

以下のテーブルは、上記のセクションで説明した API メンバーをリストします。

チャートタイプ	コントロール名	API メンバー
円チャート	`IgxPieChartComponent`	`PieChart`
ラジアル円チャート	`IgxDataChartComponent`	`IgxRadialPieSeriesComponent`