Web Components Data Pie Chart (データ円チャート)

    Ignite UI for Web Components データ円チャートは、データ セットのカテゴリ (部分) がどのように合計 (全体) 値に構成されるかを示す部分対全体のチャートです。カテゴリは、円形または円グラフのセクションとして表示されます。各セクションまたは円スライスには、基本データ値に比例する円弧の長さがあります。カテゴリは、分析されている合計値に対する値のパーセンテージ (100 または 100% の一部) に基づいて、他のカテゴリに比例して表示されます。

    Web Components データ円チャートの例

    データ項目を文字列と数値データでバインドすることで、IgcDataPieChartComponent の Web Components 円チャートが作成できます。これらのデータ値を足すと可視化率 100% になります。

    Web Components データ円チャートの推奨事項

    円チャートは小さなデータ セットに適しており、一目で読みやすいです。円チャートは、ドーナツ (リング) チャート、ファンネル チャート、積層型エリア チャート、積層型棒チャート、ツリーマップなど、部分から全体への視覚化の 1 つのタイプです。

    Web Components データ円チャートには、次のようなデータを分析するためのビューア ツールを提供するインタラクティブ機能が含まれています。

    • 凡例
    • スライスの選択
    • スライスのハイライト表示
    • チャート アニメーション

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

    • スライスまたはセグメントを、合計値または全体に比例するパーセンテージ値として比較します。
    • カテゴリのグループがどのように小さなセグメントに分割されるかを示します。
    • 小規模で階層化されていないデータ セット (6 ～ 8 セグメント未満のデータ) を提示します。
    • データ セグメントの合計が 100% になるようにします。
    • データの順序を最大 (最高) から最小 (最低) に並べます。
    • 12 時の位置から始めて時計回りに続けるなどの標準的なプレゼンテーション手法を使用します。
    • パーツのセグメント/スライスでカラー パレットを区別できるようにします。
    • 読みやすさを考慮して、セグメント内のデータ ラベルと凡例を比較します。
    • 理解しやすさに基づいて、円チャートの代わりに棒やリング などのチャートを選択します。
    • 比較分析のために複数の円チャートを隣り合わせに配置することは避けます。

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

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

    Web Components データ円チャートの凡例

    凡例は、各ポイントに関する情報を表示し、合計に対する各ポイントの貢献度を知るために使用されます。

    円チャートの隣に凡例を表示するには、ItemLegend を作成し、IgcLegendComponent プロパティに割り当てます。ItemLegend はデフォルトでは項目を縦方向に表示しますが、これは orientation プロパティを設定することで変更できます。

    凡例に表示されるラベルには、デフォルトで IgcDataPieChartComponent の各スライスに表示されるラベルと同じ内容が表示されますが、チャートの legendSliceLabelContentMode プロパティを使用してこれを変更できます。これにより、ラベル、値、パーセンテージ、またはそれらの任意の組み合わせをチャート内の各スライスの凡例のコンテンツとして表示できる列挙が公開されます。

    ItemLegend バッジを変更することもできます。デフォルトでは、関連付けられているチャートのスライスの色に対応する塗りつぶされた円として表示されます。これを設定するには、チャートの legendItemBadgeShape プロパティを使用し、円、折れ線、棒、縦棒などに設定できます。

    以下は、IgcDataPieChartComponent での ItemLegend の使用例です。

    Web Components 円チャートの Others (その他) カテゴリ

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

    IgcDataPieChartComponent の「その他」カテゴリには、othersCategoryType、othersCategoryThreshold、othersCategoryText という 3 つの主要な構成可能なプロパティがあり、これらを使用して、チャート内の「その他」スライスの表示方法を構成できます。これらについては、それぞれ以下で説明します。

    othersCategoryType プロパティは、IgcDataPieChartComponent の othersCategoryThreshold プロパティと連動して機能します。othersCategoryType では、othersCategoryThreshold を数値として評価するか、パーセンテージとして評価するかを定義できます。たとえば、数値を選択し、othersCategoryThreshold を 5 に設定すると、5 未満の値を持つスライスはすべて「その他」カテゴリの一部になります。パーセント タイプで同じ値 5 を使用すると、IgcDataPieChartComponent の合計値の 5 パーセント未満の値はすべて「その他」カテゴリの一部になります。

    チャートの Others スライスに含まれる基礎データ項目を取得するには、チャートの getOthersContext メソッドを利用できます。このメソッドの戻り値のタイプは、Items プロパティを公開する IgcOthersCategoryContextComponent です。items プロパティは、Others スライス内の項目を含む配列を返します。さらに、Others スライスをクリックすると、SeriesClick イベントのイベント引数の Item プロパティもこの IgcOthersCategoryContextComponent を返します。

    デフォルトでは、「その他」スライスは「その他」というラベルで表されます。チャートの othersCategoryText プロパティを変更することでこれを変更できます。

    Web Components Others (その他) のスライスのスタイル設定

    集約されたその他のスライスを他のスライスとは別にスタイル設定するには、次のプロパティを使用します。

    • OthersCategoryBrush
      「その他」のスライスに使用される塗りつぶし (ブラシ) を設定します。

    • OthersCategoryOutline
      「その他」のスライスに使用されるアウトライン (ストローク) を設定します。

    これらのプロパティは、「その他」のスライス (存在する場合) にのみ影響します。他のすべてのスライスは、通常のパレットと項目ごとの色付け動作を引き続き使用します。

    [!NOTE] 「その他」のスライスは、チャートがそれを作成するように構成されている場合にのみレンダリングされます (たとえば、othersCategoryThreshold が 0 より大きく、適切な othersCategoryType が設定されている場合)。「その他」のスライスが存在しない場合、OthersCategoryBrush と OthersCategoryOutline は表示上の効果はありません。

    IgcDataPieChartComponent に「その他」カテゴリが表示されないようにするには、othersCategoryThreshold を 0 に設定します。

    以下のサンプルは、IgcDataPieChartComponent 内の「その他」スライスの使用方法を示しています。

    Web Components データ円チャートの選択

    IgcDataPieChartComponent は、チャートにプロットされたスライスをマウスでクリックしてスライスを選択できる機能をサポートしています。これは、以下で説明するチャートの selectionBehavior プロパティと selectionMode プロパティを利用して構成できます。

    selectionBehavior の主な 2 つのオプションは PerDataItemSingleSelect と PerDataItemMultiSelect で、それぞれ単一選択と複数選択を有効にします。

    selectionMode プロパティは、円チャートのスライスが選択された場合にどのように反応するかを決定します。以下はその列挙体のオプションとその機能です。

    • Brighten: 選択したスライスがハイライト表示されます。
    • FadeOthers: 選択したスライスは同じ色のまま残り、他のスライスは色が薄くなります。
    • FocusColorFill: 選択したスライスの背景がチャートの FocusBrush に変更されます。
    • FocusColorOutline: 選択されたスライスには、チャートの FocusBrush によって定義された色のアウトラインが表示されます。
    • FocusColorThickOutline: 選択されたスライスには、チャートの FocusBrush によって定義された色のアウトラインが表示されます。このアウトラインの太さは、コントロールの Thickness プロパティを使用して設定することもできます。
    • GrayscaleOthers: 選択されていないスライスにはグレー色のフィルターが適用されます。
    • None: 選択されたスライスには影響はありません。
    • SelectionColorFill: 選択されたスライスの背景がチャートの SelectionBrush に変更されます。
    • SelectionColorOutline: 選択されたスライスには、チャートの SelectionBrush によって定義された色のアウトラインが表示されます。
    • SelectionColorThickOutline: 選択されたスライスには、チャートの FocusBrush によって定義された色のアウトラインが表示されます。このアウトラインの太さは、コントロールの Thickness プロパティを使用して設定することもできます。
    • ThickOutline: 選択されたスライスには、チャートの Thickness プロパティに応じて太さが異なるアウトラインが適用されます。

    スライスが選択されると、その基になるデータ項目がチャートの SelectedSeriesItems コレクションに追加されます。そのため、XamDataPieChart は SelectedSeriesItemsChanged イベントを公開して、スライスが選択されてこのコレクションが変更されたことを検出します。

    以下のサンプルは、IgcDataPieChartComponent コントロールの選択機能を示しています。

    Web Components データ円チャートのハイライト表示

    IgcDataPieChartComponent は、マウス オーバーによるハイライト表示と、別のデータ ソースを提供することで設定できるハイライト表示オーバーレイをサポートしています。

    highlightingBehavior 列挙プロパティは、スライスがどのようにハイライト表示されるかを決定します。以下はそのプロパティのオプションとその機能です。

    • DirectlyOver: スライスは、マウスがその上に直接置かれている場合にのみハイライト表示されます。
    • NearestItems: マウスの位置に最も近いスライスがハイライト表示されます。
    • NearestItemsAndSeries: マウスの位置に最も近いスライスとシリーズがハイライト表示されます。
    • NearestItemsRetainMainShapes: マウスの位置に最も近い項目がハイライト表示され、シリーズのメイン図形はハイライト表示されなくなります。

    highlightingMode 列挙プロパティは、データ円チャートのスライスがハイライト表示されたときにどのように反応するかを決定します。以下はそのプロパティのオプションとその機能です。

    • Brighten: マウスの位置がそのシリーズ上または近くにあると、そのシリーズの色が明るくなります。
    • BrightenSpecific: マウスの位置が特定のスライスの上または近くにある場合、そのスライスの色が明るくなります。
    • FadeOthers: マウスの位置がそのシリーズ上または近くにある場合、そのシリーズは色を保持しますが、他の部分は薄く表示されます。
    • FadeOthersSpecific: マウスの位置がそのスライスの上または近くにある場合、そのスライスの色は保持されますが、他のスライスの色は薄く表示されます。
    • None: シリーズとスライスはハイライト表示されません。

    以下の例は、IgcDataPieChartComponent コンポーネントのマウスハイライト表示の動作を示しています。

    マウスのハイライト表示に加えて、IgcDataPieChartComponent はデータのサブセットを表示できるハイライト表示フィルター機能を公開します。これは、コントロールの HighlightedDataSource を指定し、highlightedValuesDisplayMode プロパティを Overlay に設定することによって適用されます。HighlightedDataSource は、IgcDataPieChartComponent の DataSource プロパティに割り当てられたデータのサブセットを想定しています。

    これらの条件が満たされると、サブセットの値がハイライト表示され、データの全セットの残りの部分はフェードアウトされます。これにより、サブセットが効果的にハイライトされ、同じコントロール内でデータのサブセットをより簡単に視覚化できるようになります。

    以下の例は、ハイライト表示を示しています。

    Web Components データ円チャートのアニメーション

    IgcDataPieChartComponent は、スライスの表示や値の変更時のアニメーション化をサポートしています。

    isTransitionInEnabled プロパティを true に設定すると、円チャートがアニメーションで表示されます。実行されるアニメーションのタイプは、transitionInMode 列挙プロパティを表示したいアニメーションのタイプに設定することで構成できます。さらに、transitionInSpeedType プロパティを、インデックス、値、通常、またはランダム化でスケー​​ルするように設定することもできます。このアニメーションの期間は、TimeSpan を受け取る transitionInDuration プロパティで制御できます。

    データの変更をアニメーション化する場合は、animateSeriesWhenAxisRangeChanges プロパティを true に設定することでも実行できます。この変更の期間は、transitionDuration プロパティを設定することでも構成できます。

    以下のは、IgcDataPieChartComponent コントロールでのアニメーションを使用する方法を示しています。

    その他のリソース

    API リファレンス

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

    チャート タイプ コントロール名 API メンバー
    データ円チャート IgcDataPieChartComponent IgcDataPieChartComponent
    項目凡例 IgcItemLegendComponent IgcItemLegendComponent