Web Components 円チャート
Ignite UI for Web Components 円チャート (円グラフ) は、データセットのカテゴリ (部分) が合計 (全体) 値になる方法を示す部分対全体チャートです。カテゴリは、円グラフまたは円グラフのセクションとして描画されます。各セクション (円スライス) は基本データ値に比例する円弧の長さを持ちます。カテゴリは、分析中の合計値に対する値の割合に基づいて、100 または 100% の部分として他のカテゴリに比例して表示されます。
Web Components 円チャートの例
データ項目を文字列と数値データでバインドすることで、IgcPieChartComponent
の円チャートが作成できます。これらのデータ値を足すと可視化率 100% になります。この例では部門ごとの予算支出の全体的な内訳を示しています。
Web Components 円チャートの推奨事項
円チャートは小さいデータ セットに適していて、一目で読みやすくなります。円チャートは、部分対全体の可視化の一種です。その他:
- 円
- ドーナツ (リング)
- ファンネル
- 積層型エリア
- 積層型 100% エリア (積層型パーセント エリア)
- 積層型棒
- 積層型 100% 棒 (積層型パーセント棒)
- ツリーマップ
- ウォーターフォール
Web Components 円チャートは、データを解析するためのビューアー ツールを提供するインタラクティブ機能を含みます。
- 凡例
- スライスの分割
- スライスの選択
- チャート アニメーション
円チャートのベスト プラクティス:
- スライスまたはセグメントを、合計値または全体に対するパーセンテージ値として比較する。
- カテゴリのグループがどのようにより小さなセグメントに分割されるかを表示する。
- 小さい非階層データ セット (6 ~ 8 セグメント未満のデータ) を表示する。
- データ セグメントの合計が 100% になるようにする。
- データの順序を最大 (最高) から最小 (最低) に並べ替える。
- 12 時の位置から始めて時計回りに進む標準的なプレゼンテーション方法を使用する。
- カラー パレットがセグメント/スライスで識別できるようにする。
- データラベルを読みやすくするため、セグメントと凡例のどちらに配置するべきか検討する。
- より分かりやすい表現のために、円の代わりに棒またはリング チャートを選択する。
- 比較分析のために複数の円チャートを並べて配置しないようにする。
以下の場合に円チャートを使用しないでください。
- 経時変化を比較する場合 - 棒チャート、折れ線チャート、またはエリア チャートを使用してください。
- 正確なデータ比較が必要な場合 - 棒チャート、折れ線チャート、またはエリア チャートを使用してください。
- 6 セグメントまたは 8 セグメント (大量のデータ) がある場合 - データ ストーリーに適した棒チャート、折れ線チャート、またはエリア チャートを検討してください。
- 棒チャートで値の違いがわかりやすくなります。
Web Components 円チャートの凡例
凡例は、各ポイントに関する情報を表示し、そのポイントの合計に対する割合を示します 凡例クリックを使用してポイントを縮小できます。
円チャート コンポーネントの隣に凡例を表示するには、ItemLegend を作成し、IgcLegendComponent
プロパティに割り当てます。legendLabelMemberPath
は、各円スライスの凡例項目を表示するために使用するデータ モデルのプロパティを指定します。
また、凡例項目の外観をカスタマイズするために legendItemTemplate
および legendItemBadgeTemplate
プロパティ、IgcItemLegendComponent
の複数のフォント プロパティも使用できます。
Web Components 円チャートその他の分類項目
円チャート コンポーネントの基本データに、小さい値を含む多くの項目が含まれる場合があります。この場合、Others カテゴリは、単一スライスへの複数のデータ値の自動集計を許可します。
以下のサンプルは、othersCategoryThreshold
を 2 に設定、othersCategoryType
は Number に設定されています。したがって、2 以下の値を含む項目は、Others カテゴリに割り当てられます。
othersCategoryType
を Percent に設定すると、othersCategoryThreshold
は値ではなくパーセンテージとして解釈されます。つまり、値がすべての項目の値の合計の 2% 未満である項目は、Others カテゴリに割り当てられます。使用しているアプリケーションに最も適切な othersCategoryType
を使用できます。
Web Components 円チャートの展開
円チャート コンポーネントは個々の円スライスの選択と展開だけでなく、選択状態を変更しカスタム ロジックを実装することを可能にする SliceClick
イベントをコンポーネントサポートします。
Web Components 円チャートの選択
デフォルトで、円チャートはマウス クリックによるスライス選択をサポートします。選択されたスライスは、selectedItems
プロパティで取得します。選択したスライスがハイライト表示されます。
円チャートのモードは selectionMode
プロパティで設定します。デフォルト値は Single
です。選択機能を無効化するためにはプロパティを Manual
に設定します。
円チャート コンポーネントは、選択モードを 3 つコンポーネントサポートします。
- Single - single モードに設定すると、一度に 1 つのスライスのみ選択します。他のスライスを選択すると、最初に選択したスライスは選択解除され、新しいスライスが選択されます。
- Multiple - Multiple モードに設定すると、一度に複数のスライスを選択します。スライスをクリックするとスライスが選択され、他のスライスをクリックすると、最初のスライスも、新しくクリックしたスライスも選択されます。
- 手動 - Manual モードに設定すると、選択は無効化されます。
円チャート コンポーネントには、選択機能に関連する 4 つのイベントがあります。
- SelectedItemChanging
- SelectedItemChanged
- SelectedItemsChanging
- SelectedItemsChanged
「Changing」で終わるイベントはキャンセル可能なイベントです。すなわち、イベント引数プロパティ Cancel
を true に設定することで、スライスの選択を停止します。True に設定すると、関連付けられたプロパティは更新されず、その結果スライスは選択されません。この設定はたとえば、スライスのデータによって一定のスライスの選択を無効化する場合に使用します。
「その他」スライスをクリックすると、IgcPieSliceOthersContext
オブジェクトが返されます。オブジェクトは、「その他」スライスに含まれるデータ項目のリストがあります。
Web Components 円チャートのアニメーション
チャートの半径をスケールする radiusFactor
プロパティを設定して円チャートをすばやくアニメーション化できます。startAngle
プロパティを設定してチャートが回転する間、チャートの角度が増加し続けるようにします。
以下のコードでは、radiusFactor がチャートをサイズの 0.25% 増加し、startAngle がチャートを 1 度回転しています。radiusFactor と startAngle が最大値に達すると、アニメーション フラグをリセットし、間隔をクリアしてアニメーションを停止します。
Web Components 円チャートのスタイル設定
円チャートを作成したら、次に示すように、チャートのスライスの色を変更するなど、スタイルをさらにカスタマイズすることができます。
Web Components ラジアル円チャート
ラジアル円チャートはラジアル チャートのグループに属し、チャートの中心からデータ ポイントの位置に向かって伸びる円スライスを使用します。このチャート タイプは、複数の一連のデータ ポイントを分類するという概念を採用しており、データ ポイントを水平線に沿って引き伸ばすのではなく、円形の軸に沿ってラップします。
その他のリソース
API リファレンス
以下のテーブルは、上記のセクションで説明した API メンバーをリストします。
legendItemBadgeTemplate
legendItemTemplate
legendLabelMemberPath
othersCategoryThreshold
othersCategoryType
selectionMode
チャート タイプ | コントロール名 | API メンバー |
---|---|---|
円チャート | IgcPieChartComponent |
PieChart |
ラジアル円チャート | IgcDataChartComponent |
IgcRadialPieSeriesComponent |