Angular ドーナツ チャート
The Ignite UI for Angular ドーナツ チャートは円チャートと同様、変数の発生を比例的に表示します。ドーナツ型チャートは、複数の変数をコンセントリック リングで表示でき、階層データの可視化を組み込みでサポートします。リングは、異なるデータ項目にバインドすることも、共通のデータ ソースを共有することもできます。
Angular ドーナツ チャートの例
DoughnutChart コントロールでドーナツ チャートを作成するには、以下の例のように、データをバインドします。
Angular ドーナツ チャートの推奨事項
Angular ドーナツ チャートはプロジェクトに適していますか?
ドーナツ チャートは小さなデータ セットに適しており、一目で読みやすいです。ドーナツ チャートは、部分から全体への視覚化の 1 つのタイプにすぎません。その他は次のとおりです。
Angular ドーナツ チャートには、次のようなデータを分析するためのビューア ツールを提供するインタラクティブ機能が含まれています。
- 凡例
- スライスの分割
- スライスの選択
- チャート アニメーション
ドーナツ チャートのベスト プラクティス
- 複数のデータ セットを使用して、データを輪に表示します。
- データをすばやく説明するために、ドーナツの穴の中に値やラベルなどの情報を配置します。
- スライスまたはセグメントを、合計値または全体に比例するパーセンテージ値として比較します。
- カテゴリのグループがどのように小さなセグメントに分割されるかを示します。
- データ セグメントの合計が 100% になるようにします。
- パーツのセグメント/スライスでカラー パレットを区別できるようにします。
以下の場合にドーナツ チャートを使用しないでください
- 時間の経過に伴う変化の比較の場合 - 棒、折れ線、またはエリアチャートを使用します。
- 正確なデータ比較が必要である場合 - 棒、折れ線、またはエリアチャートを使用します。
- 6 つまたは 8 つを超えるセグメント (大量のデータ) がある場合 — データ ストーリーに適している場合は、棒、折れ線、またはエリアチャートを検討してください。
- 棒チャートで、ビューアが値の違いを認識しやすくなります。
- 負のデータがある場合、これはドーナツ チャートで表すことができません。
ドーナツ チャート - スライスの選択
Angular ドーナツ チャートには、クリック時にスライスを選択する機能があります。任意で、単一のカスタム ビジュアル スタイルを選択済みスライスに適用できます。SliceClick イベントは、ユーザーがスライスをクリックすると発生します。スライス選択を有効にすると、クリック時にスライスの選択を変更できます。次のサンプルは、スライスの選択を有効にし、選択したスライスの色を灰色に設定する方法を示しています。
Angular ドーナツ チャート - 複数のリング
Angular ドーナツ チャートに複数の輪を表示して、各輪を異なるデータ 項目にバインドしたり、共通のデータ ソースを共有したりすることができます。これは、以下の季節ごとのデータ表示など、基礎となる共通のカテゴリを持つ層としてデータを表示する必要がある場合に役立ちます:
その他のリソース
関連するチャートタイプの詳細については、以下のトピックを参照してください。
API リファレンス
DoughnutChart