次の方法で共有

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

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

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

HorizontalBarChart コントロール。

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

重要

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

注意

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

プロパティ

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

  • タイトル - この値はグラフのタイトルを示します。
  • HideLabels - このオプションを true に設定すると、グラフ上のラベルが非表示になります。
  • BarHeight - この値は、グラフに表示されるバーの高さを示します。
  • HideTooltip - このオプションを true に設定すると、グラフ上のヒントが非表示になります。
  • CustomColors - このオプションを true に設定すると、グラフにカスタム カラーを表示できます。
  • バリアント - このオプションを使用すると、チャートを Absolute scale または Part to wholeに表示できます。
  • ChartDataMode - このオプションは、各バーの値を Fraction または Percentageに表示できます。
  • Items - レンダリングするアクション アイテム:
    • 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"
    }
)

制限事項

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

  • Last updated on