共用方式為

GaugeChart 控制元件 (預覽版)

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

儀錶有兩種類型：車速表和額定表。

GaugeChart 控制件。

車速表測量一個整體的數值，例如存儲容量。 針頭是可選元件。 可以自定義表示所測量值的段的顏色，以適應某些場景或與品牌顏色保持一致。

額定值計顯示幾個預定義範圍或段內當前值的狀態。 針是這裡必需的元件。

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

重要

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

注意

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

屬性

該控制項接受以下屬性：

  • 標題 - 此值表示圖表的標題。

  • 子標籤 - 此值表示圖表的子標籤。

  • ChartValue - 此值表示要在儀錶上顯示的值。

  • MinValue - 此值表示儀錶的最小值。

  • MaxValue - 此值表示儀錶的最大值。

  • HideMinMax - 此值表示是否隱藏儀錶上的最小值和最大值。

  • HideLegend - 此值表示是否隱藏儀錶上的圖例。

  • ChartValueFormat - 此值表示以或 Percentage 顯示 Fraction圖表值。

  • CustomColors - 將此值設置為 true，以允許圖表上的自定義顏色 (如果提供)。

  • Items - 要呈現的作項：

    • ItemLegend - 特定圖表資料 (專案) 的顯示名稱。
    • ItemSize - 特定圖表資料 (Item) 的大小。
    • ItemColor - 設定要為特定圖表資料 (項目) 顯示的顏色名稱或十六進位值。

注意

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

網頁可及性

  • AccessibilityLabel - 螢幕閱讀器 aria-label。

使用狀況

速度計

只需要一行 Items。 使用指示 ChartValue 目標位置。

Table(
    {
        ItemSize: 15,
        ItemColor: "#3483FA"
    }
)

額定儀

提供範圍作為屬性。 Items 所有 ItemSize 值的總和必須為和 MinValueMaxValue 之間差值的 100%。 使用指示 ChartValue 當前位置。

Table(
    {
        ItemLegend: "Critical",
        ItemSize: 11,
        ItemColor: "#C50F1F"
    },
    {
        ItemLegend: "Warning",
        ItemSize: 25,
        ItemColor: "#F2610C"
    },
    {
        ItemLegend: "No risk",
        ItemSize: 30,
        ItemColor: "#107C10"
    }
)

限制

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

  • Last updated on