Sdílet prostřednictvím

DonutChart ovládání (Preview)

  • Článek

[Tento článek představuje předběžnou dokumentaci a může se změnit.]

Donutové grafy se používají k zobrazení podílu, který vyjadřuje částečnou hodnotu ve srovnání s celkovou hodnotou. Tyto typy grafů jsou nejlepší pro zobrazení procenta jednotlivých částí v porovnání s celkem, kde není důležité vizualizovat změnu v čase. Jsou to kruhové statistické grafiky rozdělené na řezy pro ilustraci číselných proporcí.

Ovládání DonutChart.

Tato komponenta kódu poskytuje obal kolem ovládacího prvku Fluent UI DonutChart pro použití v plátně & vlastní stránky.

Důležité

  • Toto je funkce Preview.
  • Funkce Preview nejsou určené pro normální používání a mohou mít omezené fungování. Jsou to funkce, které jsou poskytnuté před svým oficiálním vydáním, aby si je zákazníci mohli co nejdříve vyzkoušet a mohli nám napsat své názory.

Poznámka:

Úplnou dokumentaci a zdrojový kód naleznete v úložišti komponent kódu GitHub.

Vlastnosti

Ovládací prvek má následující vlastnosti:

  • Title - Tato hodnota označuje název grafu.

  • HideLabel - Tato možnost určuje, zda se mají v grafu zobrazit nebo skrýt štítky.

  • HideTooltip – Tato možnost určuje, zda se mají v grafu zobrazit nebo skrýt popisky.

  • ShowLabelsInPercentage – Tato možnost určuje, zda se mají zobrazovat štítky v procentech.

  • InnerRadius - Nastavte hodnotu pro vnitřní poloměr prstencového grafu.

  • ValueInsideDonut - Tato vlastnost označuje hodnotu, která se má zobrazit v prstencovém grafu.

  • CustomColors - Tato vlastnost se používá k zobrazení vlastních barev v grafu, pokud je k dispozici

  • Items - Akční položky k vykreslení

    • ItemTitle - zobrazované jméno konkrétních dat grafu (položka).
    • ItemKey - Klíč, který se má použít k identifikaci položky. Klíče musí být jedinečné.
    • ItemValue - Nastavte hodnotu konkrétních dat grafu (Item).
    • ItemColor - Nastavte název barvy nebo HEX hodnotu, která se má zobrazit pro konkrétní data grafu (Item).

Poznámka:

Barva položky platí pouze v případě, že je zapnuta vlastnost CustomColors.

Přístupnost

  • AccessibilityLabel - Obrazovka Čtenář aria-label

Využití

Mapování hodnot dat na odpovídající vlastnosti grafu ve vlastnosti Items ovládacího prvku, jak ukazuje vzorec níže. Graf automaticky upraví vizuál, aby odpovídal relativním hodnotám.

Chcete-li definovat konzistentní barvy, povolte vlastnost CustomColors.

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

Omezení

Tuto komponentu plátna lze použít pouze v aplikacích plátna a vlastních stránkách.