共用方式為

HorizontalBarChart 控制 (預覽版)

  • 發行項

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

水準長條圖是一種圖表，它使用矩形條表示分類數據，矩形條的長度與它們所表示的值成正比。 當目的是顯示各種類別之間的比較並且這些類別的標籤很長時，這種類型的圖表非常有用。

HorizontalBarChart 控制件。

此代碼元件為 Fluent UI HorizontalBarChart 控件提供了一個包裝 器，用於畫布和自定義頁面。

重要

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

注意

完整的文件和原始碼可在 GitHub 代碼元件儲存庫中找到。

內容

該控制項接受以下屬性：

  • 標題 - 此值表示圖表的標題。
  • HideLabels - 將此選項設定為 true 以隱藏圖表上的標籤。
  • BarHeight - 此值表示圖表中顯示的條形的高度。
  • HideTooltip - 將此選項設定為 true 可在圖表上隱藏工具提示。
  • CustomColors - 將此選項設置為 true，以允許在圖表上顯示自定義顏色 (如果提供)。
  • Variant - 此選項允許圖表顯示在 Absolute scale or Part to whole 中。
  • ChartDataMode - 此選項用於顯示 or Fraction 中 Percentage每個條形的值。
  • Items - 要渲染的操作項：
    • ItemTitle - 特定圖表資料 (Item) 的顯示名稱。
    • ItemLegend - 與特定圖表資料 (Item) 關聯的圖例。
    • ItemValue - 設定特定圖表資料 (Item) 的值。
    • ItemTotalValue - 用於特定圖表資料 (Item) 的總值。
    • ItemXPopover - 特定圖表資料 (Item) 的 X 軸彈出文字。
    • ItemYPopover - 特定圖表資料 (Item) 的 Y 軸彈出框文本。
    • ItemColor - 設定要為特定圖表資料 (Item) 顯示的顏色名稱或十六進位值。

注意

  • 只有開啟 CustomColors 屬性時，項目顏色才適用。
  • 當圖表類型為 'Absolute Scale' 時，隱藏標籤有效。
  • Hide tooltips 在播放應用程式時 (不在 Studio 中) 工作正常，但在 Studio 中可能無法呈現。

網頁可及性

  • 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"
    }
)

限制

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