共用方式為

DonutChart 控制 (預覽版)

  • 發行項

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

圓環圖用於顯示比例，它表示與總值相比的部分值。 這些類型的圖表最好顯示單個部分與整體的百分比，其中隨時間的變化對於可視化並不重要。 它們是圓形統計圖形，分為多個切片以說明數位比例。

DonutChart 控制件。

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

重要

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

注意

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

內容

該控制項接受以下屬性：

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

  • HideLabel - 此選項控制是在圖表上顯示還是隱藏標籤。

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

  • ShowLabelsInPercentage - 此選項控制是否以百分比顯示標籤。

  • InnerRadius - 設置圓環圖的內半徑值。

  • ValueInsideDonut - 此屬性表示要在圓環圖中顯示的值。

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

  • Items - 要渲染的操作項

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

注意

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

網頁可及性

  • AccessibilityLabel - 螢幕讀者 aria-label

使用狀況

將資料值對應到控制項的 Items 屬性中對應的圖表屬性，如下列公式所示。 圖表會自動調整視覺效果以符合相對值。

啟用 CustomColors 屬性來定義一致的顏色。

Table(
    {
        ItemLegend: "First",
        ItemValue: 60,
        ItemColor:"#00A892"
    },
    {
        ItemLegend: "Second",
        ItemValue: 10,
        ItemColor:"#9A44FC"
    },
    {
        ItemLegend: "Third",
        ItemValue: 30,
        ItemColor:"#3483FA"
    }
)

限制

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