HorizontalBarChart ovládání (Preview)

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

Horizontální pruhový graf je graf, který představuje kategorická data s obdélníkovými pruhy s délkami úměrnými hodnotám, které představují. Tento typ grafu je užitečný, pokud je záměrem zobrazit srovnání mezi různými kategoriemi a popisky těchto kategorií jsou dlouhé.

Tato komponenta kódu poskytuje obal kolem ovládacího prvku Fluent UI HorizontalBarChart 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.
• HideLabels – Chcete-li skrýt štítky v grafu, nastavte tuto možnost na hodnotu true.
• BarHeight - Tato hodnota označuje výšku sloupce zobrazené v grafu.
• HideTooltip – Nastavte tuto možnost na true, chcete-li skrýt popisky v grafu.
• CustomColors – Nastavte tuto možnost na hodnotu true, chcete-li povolit vlastní barvy v grafu, pokud jsou k dispozici.
• Varianta - Tato možnost umožňuje zobrazení grafu v Absolute scale nebo Part to whole.
• ChartDataMode - Tato možnost umožňuje zobrazit hodnotu každého sloupce v Fraction nebo Percentage.
• Items - Akční položky k vykreslení:
  • ItemTitle - zobrazované jméno konkrétních dat grafu (položky).
  • ItemLegend - Legenda spojená s konkrétními daty grafu (Item).
  • ItemValue - Nastavte hodnotu konkrétních dat grafu (Item).
  • ItemTotalValue - Celková hodnota, která má být použita pro konkrétní data grafu (Item).
  • ItemXPopover - Text popover na ose X pro konkrétní data grafu (Item).
  • ItemYPopover - Text popover na ose Y pro konkrétní data 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.
• Skrýt štítky fungují, když je typ grafu „Absolutní měřítko“.
• Skrýt popisky funguje dobře, když se aplikace přehrává (ne ve studiu), ale ve studiu se nemusí vykreslit.

Přístupnost

• AccessibilityLabel - Obrazovka Čtenář aria-label.

Využití

Mapujte hodnoty dat na odpovídající vlastnosti grafu ve vlastnosti Items ovládacího prvku, jak ukazuje následující vzorec.

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

Table(
    {
        ItemTitle: "First",
        ItemLegend: "First",
        ItemValue: 40,
        ItemTotalValue: 100,
        ItemXPopOver: "10/2/2024",
        ItemYPopOver: "10%",
        ItemColor: "#00A892"
    },
    {
        ItemTitle: "Second",
        ItemLegend: "Second",
        ItemValue: 20,
        ItemTotalValue: 100,
        ItemXPopOver: "20/4/2024",
        ItemYPopOver: "20%",
        ItemColor: "#9A44FC"
    },
    {
        ItemTitle: "Third",
        ItemLegend: "Third",
        ItemValue: 120,
        ItemTotalValue: 100,
        ItemXPopOver: "10/6/2024",
        ItemYPopOver: "30%",
        ItemColor: "#3483FA"
    },
    {
        ItemTitle: "Fourth",
        ItemLegend: "Fourth",
        ItemValue: 90,
        ItemTotalValue: 100,
        ItemXPopOver: "20/4/2024",
        ItemYPopOver: "40%",
        ItemColor: "#EBA800"
    }
)

Omezení

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