次の方法で共有

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

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

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

DonutChart コントロール。

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

重要

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

注意

説明書の全文とソース コードは、GitHub コード コンポーネント リポジトリ を参照してください。

プロパティ

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

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

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

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

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

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

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

  • CustomColors - このプロパティは、指定された場合、グラフにカスタム カラーを表示するために使用されます

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

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

注意

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

アクセシビリティ

  • AccessibilityLabel - スクリーン リーダーの aria-label

使い方

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

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

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

制限

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

  • Last updated on