共用方式為

GaugeChart 控制 (預覽版)

  • 發行項

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

儀錶圖有兩種類型：Speedometer 和 rating meter。

GaugeChart 控制件。

車速表根據整體 (如存儲容量) 測量數值。 針是可選元件。 可以自定義表示所測量值的區段的顏色，以適應某些場景或對齊品牌顏色。

評分指示器顯示幾個預定義範圍或段內當前值的狀態。 針在這裡是必需的元件。

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

重要

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

注意

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

內容

該控制項接受以下屬性：

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

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

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

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

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

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

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

  • ChartValueFormat - 此值表示在 or Percentage 中 Fraction顯示圖表值。

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

  • Items - 要渲染的操作項：

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

注意

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

網頁可及性

  • AccessibilityLabel - 篩選讀者 aria-label。

使用狀況

速度計

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

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

額定值計

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

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

限制

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