GaugeChart ovládání (Preview)

Článek
10/16/2024

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

Existují dva typy měřidel: Tachometr a měřidlo hodnocení.

Ovládání GaugeChart.

Rychloměr měří číselnou hodnotu vůči celku, jako je kapacita paměti. Jehla je volitelná součást. Barvu segment představující měřenou hodnotu lze upravit tak, aby vyhovovala určitým scénářům nebo aby odpovídala barvám značky.

Měřič hodnocení ukazuje stav aktuální hodnoty v několika předdefinovaných rozsazích nebo segmentech. Jehla je zde povinná součást.

Tato komponenta kódu poskytuje obal kolem ovládacího prvku Fluent UI GaugeChart 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 najdete 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.
Sublabel - Tato hodnota označuje dílčí popisek grafu.
ChartValue - Tato hodnota označuje hodnotu, která se má zobrazit na měřidle.
MinValue - Tato hodnota označuje minimální hodnotu měřidla.
MaxValue - Tato hodnota označuje maximální hodnotu měřidla.
HideMinMax - Tato hodnota určuje, zda se mají skrýt minimální a maximální hodnoty na měřidle.
HideLegend - Tato hodnota určuje, zda se má skrýt legenda na měřidle.
ChartValueFormat – Tato hodnota označuje zobrazení hodnoty grafu v Percentage nebo Fraction.
CustomColors – Nastavte tuto hodnotu na true, abyste povolili vlastní barvy v grafu, pokud jsou k dispozici.
Items - Položky akcí, které se mají vykreslit:
- ItemLegend - zobrazované jméno konkrétních dat grafu (položky).
- ItemSize - Velikost 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í

Rychloměr

Pro Items je potřeba pouze jeden řádek. Pomocí ChartValue označte cílovou pozici.

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

Měřič hodnocení

Zadejte rozsahy jako vlastnost Items . Součet všech ItemSize hodnot musí činit 100 % rozdílu mezi MinValue a MaxValue. Pomocí ChartValue označte aktuální pozici.

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

Omezení

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

Sdílet prostřednictvím