共用方式為

HorizontalBarChart 控制元件 (預覽版)

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

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

HorizontalBarChart 控制件。

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

重要

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

注意

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

屬性

該控制項接受以下屬性：

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

注意

  • 只有開啟 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