次の方法で共有

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

  • [アーティクル]

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

水平に積み上げられた横棒グラフは、複数のデータ系列を積み上げられたバーとして表示し、各バーはカテゴリを表します。 バーは互いに並んで積み重ねられており、各バーの長さはシリーズのカテゴリの値を表します。

Horizo​​ntalBarChart - 積み重ねコントロール。

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

重要

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

注意Note

ドキュメントの全文とソース コードについては、GitHub コード コンポーネント リポジトリを参照してください。

プロパティ​​

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

  • HideLegend - この値は、グラフ上の凡例を表示するか非表示にするかを示します。

  • BarHeight - この値は、グラフに表示されるバーの高さを示します。

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

  • CustomColors - このオプションは、チャートにカスタムカラーを表示するために使用されます。

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

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

注意Note

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

アクセシビリティ

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

使い方

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

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

Table(
    {
        ItemKey: "1",
        ItemTitle: "First",
        ItemCallout:"First item callout title",
        ItemValue: 40,
        ItemColor: "#00A892"
    },
    {
        ItemKey: "2",
        ItemTitle: "Second",
        ItemCallout:"Second item callout title",
        ItemValue: 20,
        ItemColor: "#9A44FC"
    },
    {
        ItemKey: "3",
        ItemTitle: "Third",
        ItemCallout:"Third item callout title",
        ItemValue: 120,
        ItemColor: "#3483FA"
    },
    {
        ItemKey: "4",
        ItemTitle: "Fourth",
        ItemCallout:"Fourth item callout title",
        ItemValue: 90,
        ItemColor: "#EBA800"
    }
)

制限

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