Udostępnij przez

GaugeChart Sterowanie (wersja zapoznawcza)

[Ten artykuł stanowi wstępną wersję dokumentacji i może ulec zmianie.]

Istnieją dwa rodzaje wykresów zegarowych: prędkościomierz i miernik oceny.

Kontrolka GaugeChart.

Prędkościomierz mierzy wartość liczbową w odniesieniu do całości, takiej jak pojemność pamięci. Igła jest elementem opcjonalnym. Kolor segmentu reprezentującego mierzoną wartość można dostosować do określonych scenariuszy lub do kolorów marki.

Miernik oceny pokazuje stan bieżącej wartości w kilku predefiniowanych zakresach lub segmentach. Igła jest tutaj wymaganym elementem.

Ten składnik kodu zawiera otokę kontrolki Fluent UI GaugeChart do użycia na stronach kanwy i niestandardowych.

Ważne

  • Jest to funkcja w wersji zapoznawczej.
  • Funkcje w wersji zapoznawczej nie są przeznaczone do użytku w środowiskach produkcyjnych i mogą mieć ograniczoną funkcjonalność. Te funkcje są udostępniane przed oficjalnym wydaniem, dzięki czemu klienci mogą szybciej uzyskać do nich dostęp i przekazać opinie na ich temat.

Uwaga

Aby zapoznać się z pełną dokumentacją i kodem źródłowym, zobacz repozytorium składników kodu GitHub. |

Właściwości

Kontrolka akceptuje następujące właściwości:

  • Tytuł - Ta wartość oznacza tytuł wykresu.

  • Etykieta podrzędna- Ta wartość oznacza etykietę podrzędną wykresu.

  • ChartValue - Ta wartość oznacza wartość, która ma być wyświetlana na mierniku.

  • MinValue — ta wartość oznacza minimalną wartość miernika.

  • MaxValue - Ta wartość oznacza maksymalną wartość miernika.

  • HideMinMax - Ta wartość określa, czy ukryć wartości minimalne i maksymalne w mierniku.

  • HideLegend — ta wartość określa, czy legenda ma być ukryta w mierniku.

  • ChartValueFormat — Ta wartość oznacza, że wartość wykresu jest wyświetlana w Percentage lub Fraction.

  • CustomColors — Ustaw tę wartość na true, aby zezwolić na niestandardowe kolory na wykresie, jeśli zostały podane.

  • Elementy - Czynności do wykonania do renderowania:

    • ItemLegend — nazwa wyświetlana określonych danych wykresu (Item).
    • ItemSize - Rozmiar określonych danych wykresu (Item).
    • ItemColor - Ustaw nazwę koloru lub wartość szesnastkową, która ma być wyświetlana dla określonych danych wykresu (elementu).

Uwaga

Kolor elementu jest stosowane tylko wtedy, gdy właściwość CustomColors jest włączona.

Dostępność

  • AccessibilityLabel - Czytnik ekranu aria-label.

Sposób użycia

Prędkościomierz

Do tego potrzebny Items jest tylko jeden rząd. Użyj, ChartValue aby wskazać pozycję docelową.

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

Miernik oceny

Podaj zakresy jako Items właściwość. Suma wszystkich ItemSize wartości musi sumować się do 100% różnicy między i MinValueMaxValue. Użyj, ChartValue aby wskazać aktualną pozycję.

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

Ograniczenia

Tego składnika kanwy można używać tylko w aplikacjach kanwy i na stronach niestandardowych.

  • Last updated on