次の方法で共有

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

  • [アーティクル]

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

水平方向の 横棒グラフ は、表す値に比例した長さの長方形の棒でカテゴリデータを表示するグラフです。 このタイプのグラフは、さまざまなカテゴリ間の比較を示すことが目的で、それらのカテゴリのラベルが長い場合に役立ちます。

HorizontalBarChartコントロール。

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

重要

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

注意

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

プロパティ​​

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

  • タイトル - この値はグラフのタイトルを示します。
  • HideLabels - グラフ上のラベルを非表示にするには、このオプションをtrueに設定します。
  • BarHeight - この値は、グラフに表示されるバーの高さを示します。
  • HideTooltip - このオプションをtrueに設定すると、チャートのツールチップが非表示になります。
  • CustomColors - このオプションをtrueに設定すると、チャートにカスタム カラーが追加されます。
  • バリアント - このオプションを使用すると、チャートを Absolute scale または Part to wholeで表示できます。
  • ChartDataMode - このオプションでは、各バーの値を Fraction または Percentageで表示できます。
  • アイテム - レンダリングするアクション アイテム:
    • ItemTitle - 特定のチャート データ (アイテム) のタイトル。
    • ItemLegend - 特定のグラフ データ (項目) に関連付けられた凡例。
    • ItemValue - 特定のグラフ データ (項目) の値を設定します。
    • ItemTotalValue - 特定のグラフ データ (項目) に使用される合計値。
    • ItemXPopover - 特定のグラフ データ (項目) のX軸ポップオーバー テキスト。
    • ItemYPopover - 特定のグラフ データ (項目) のY軸ポップオーバー テキスト。
    • ItemColor - 特定のチャート データ (アイテム) に表示される色の名前またはHEX値を設定します。

注意

  • アイテムの色は、CustomColors プロパティがオンになっている場合にのみ適用されます。
  • グラフの種類が「絶対スケール」の場合、ラベルを非表示にすることができます。
  • ツールチップの非表示は、アプリの再生時（スタジオ内ではない）には正常に機能しますが、スタジオ内ではレンダリングされない場合があります。

アクセシビリティ

  • AccessibilityLabel - 画面 閲覧者aria-label。

使い方

次の数式に示すように、コントロールの Items プロパティ内の対応するグラフ プロパティにデータ値をマップします。

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

Table(
    {
        ItemTitle: "First",
        ItemLegend: "First",
        ItemValue: 40,
        ItemTotalValue: 100,
        ItemXPopOver: "10/2/2024",
        ItemYPopOver: "10%",
        ItemColor: "#00A892"
    },
    {
        ItemTitle: "Second",
        ItemLegend: "Second",
        ItemValue: 20,
        ItemTotalValue: 100,
        ItemXPopOver: "20/4/2024",
        ItemYPopOver: "20%",
        ItemColor: "#9A44FC"
    },
    {
        ItemTitle: "Third",
        ItemLegend: "Third",
        ItemValue: 120,
        ItemTotalValue: 100,
        ItemXPopOver: "10/6/2024",
        ItemYPopOver: "30%",
        ItemColor: "#3483FA"
    },
    {
        ItemTitle: "Fourth",
        ItemLegend: "Fourth",
        ItemValue: 90,
        ItemTotalValue: 100,
        ItemXPopOver: "20/4/2024",
        ItemYPopOver: "40%",
        ItemColor: "#EBA800"
    }
)

制限

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