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 wartości.

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 zapewnia obudowę wokół kontrolki Fluent UI GaugeChart do użycia na niestandardowych i kanwowych stronach.

Ważna

  • 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.

Note

Aby uzyskać pełną dokumentację i kod źródłowy, zobacz Repozytorium komponentów kodu na GitHubie. |

Properties

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

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

  • Podetykieta – Ta wartość oznacza podetykietę 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 działań - Elementy działań do renderowania:

    • ItemLegend — nazwa wyświetlana określonych danych wykresu (Item).
    • ItemSize - Rozmiar określonych danych wykresu (Item).
    • ItemColor — ustaw nazwę kolorów lub wartość HEX, która ma być wyświetlana dla danych określonego wykresu (element).

Note

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

Accessibility

  • AccessibilityLabel - Czytnik ekranu aria-label.

Usage

Prędkościomierz

Tylko jeden rząd jest potrzebny dla Items. Użyj, ChartValue aby wskazać pozycję docelową.

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

Wskaźnik oceny

Podaj zakresy jako Items właściwość. Suma wszystkich wartości ItemSize musi sumować się do 100% różnicy między MinValue a MaxValue. 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"
    }
)

Limitations

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

  • Last updated on