HorizontalBarChart - Stacked ovládání (Preview)

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

Horizontální skládaný pruhový graf zobrazuje několik řad dat jako složené pruhy, přičemž každý pruh představuje kategorii. Pruhy jsou naskládány vedle sebe, přičemž délka každého pruhu představuje hodnotu kategorie řady.

Tato komponenta kódu poskytuje obálku kolem ovládacího prvku Fluent UI HorizontalBarChart – skládaný pro použití na plátně a vlastních stránkách.

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 najdete v úložišti komponent kódu GitHub.

Vlastnosti

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

• HideLegend – Tato hodnota určuje, zda se mají v grafu zobrazit nebo skrýt legendy.

• BarHeight - Tato hodnota označuje výšku sloupce zobrazené v grafu.

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

• CustomColors - Tato možnost 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).
  • ItemCallout - Nastavte hodnotu, která se má zobrazit na vyskakovacím okně/popisu.

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(
    {
        ItemKey: "1",
        ItemTitle: "First",
        ItemCallout:"First item callout title",
        ItemValue: 40,
        ItemColor: "#00A892"
    },
    {
        ItemKey: "2",
        ItemTitle: "Second",
        ItemCallout:"Second item callout title",
        ItemValue: 20,
        ItemColor: "#9A44FC"
    },
    {
        ItemKey: "3",
        ItemTitle: "Third",
        ItemCallout:"Third item callout title",
        ItemValue: 120,
        ItemColor: "#3483FA"
    },
    {
        ItemKey: "4",
        ItemTitle: "Fourth",
        ItemCallout:"Fourth item callout title",
        ItemValue: 90,
        ItemColor: "#EBA800"
    }
)

Omezení

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