次の方法で共有

DonutChart コントロール (プレビュー)

  • [アーティクル]

[この記事はプレリリース ドキュメントであり、変更されることがあります。]

ドーナツ グラフは、部分的な値と合計値の比較を表す比率を表示するために使用されます。 これらのタイプのグラフは、時間の経過による変化を視覚化することが重要ではない場合に、全体と比較した個々の部分の割合を示すのに最適です。 数値の割合を示すためにスライスに分割された円形の統計グラフです。

DonutChartコントロール。

このコード コンポーネントは、キャンバスおよびカスタム ページで使用できる Fluent UI DonutChart コントロールのラッパーを提供します。

重要

  • これはプレビュー機能です。
  • プレビュー機能は運用環境での使用を想定しておらず、機能が制限されている可能性があります。 これらの機能を公式リリースの前に使用できるようにすることで、顧客が一足先にアクセスし、そこからフィードバックを得ることができます。

注意

完全なドキュメントとソース コードは、 GitHubコード コンポーネント リポジトリにあります。

プロパティ​​

コントロールは次のプロパティを受容します。

  • タイトル - この値はグラフのタイトルを示します。

  • HideLabel - このオプションは、グラフ上のラベルを表示するか非表示にするかを制御します。

  • HideTooltip - このオプションは、チャートにツールチップを表示するか非表示にするかを制御します。

  • ShowLabelsInPercentage - このオプションは、ラベルをパーセンテージで表示するかどうかを制御します。

  • InnerRadius - ドーナツ グラフの内側の半径の値を設定します。

  • ValueInsideDonut - このプロパティは、ドーナツ グラフ内に表示される値を示します。

  • CustomColors - このプロパティは、チャートにカスタムカラーを表示するために使用されます。

  • アイテム - レンダリングするアクションアイテム

    • ItemTitle - 特定のチャート データ (アイテム) のタイトル。
    • ItemKey - アイテムを識別するために使用するキー。 キーは一意である必要があります。
    • ItemValue - 特定のチャートデータ (アイテム) の値を設定します。
    • ItemColor - 特定のチャートデータ（アイテム）に表示される色の名前またはHEX値を設定します。

注意

アイテムの色は、CustomColors プロパティがオンになっている場合にのみ適用されます。

アクセシビリティ

  • アクセシビリティラベル - 画面 閲覧者aria-label

使い方

以下の数式に示すように、コントロールの Items プロパティ内の対応するグラフ プロパティにデータ値をマップします。 チャートは相対値に合わせてビジュアルを自動的に調整します。

一貫した色を定義するには、CustomColors プロパティを有効にします。

Table(
    {
        ItemLegend: "First",
        ItemValue: 60,
        ItemColor:"#00A892"
    },
    {
        ItemLegend: "Second",
        ItemValue: 10,
        ItemColor:"#9A44FC"
    },
    {
        ItemLegend: "Third",
        ItemValue: 30,
        ItemColor:"#3483FA"
    }
)

制限

このキャンバス コンポーネントは、キャンバス アプリとカスタム ページでのみ使用できます。