HorizontalBarChart - Stacked 控制 (預覽版)

[本文章是發行前版本文件，且隨時可能變更。]

水平堆疊長條圖會將多個系列的資料顯示為堆疊長條圖，每個長條圖代表一個類別。 這些長條圖彼此並排堆疊，每個長條圖的長度代表該系列類別的值。

此程式碼元件為 Fluent UI HorizontalBarChart - Stacked 控制項提供了一個包裝函式，以便在畫布和自訂頁面中使用。

重要

• 這是預覽功能。
• 預覽功能不供生產時使用，而且可能功能受限。 這些功能是在正式發行前先行推出，讓客戶能夠搶先體驗並提供意見反應。

注意

有關完整的文件和原始程式碼，請參閱 GitHub 程式碼元件存放庫。

內容

該控制項接受以下屬性：

• HideLegend - 此值表示是在圖表上顯示還是隱藏圖例。

• BarHeight - 此值表示圖表中顯示的條形的高度。

• HideTooltip - 此選項控制是否在圖表上顯示或隱藏工具提示。

• CustomColors - 此選項用於在圖表上顯示自訂顏色 (如果提供)

• Items - 要渲染的操作項

  • ItemTitle - 特定圖表資料 (Item) 的顯示名稱。
  • ItemKey - 用於標識 Item 的鍵。 索引鍵必須是唯一的。
  • ItemValue - 設定特定圖表資料 (Item) 的值。
  • ItemColor - 設定要為特定圖表資料 (Item) 顯示的顏色名稱或十六進位值。
  • ItemCallout - 設定要在彈出視窗/工具提示上顯示的值。

注意

只有開啟 CustomColors 屬性時，項目顏色才適用。

網頁可及性

• AccessibilityLabel - 螢幕讀者 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"
    }
)

限制

此畫布元件只能在畫布應用程式和自訂頁面中使用。