Udostępnij przez

DonutChart Sterowanie (wersja zapoznawcza)

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

Wykresy pierścieniowe służą do przedstawiania proporcji, która wyraża wartość częściową w porównaniu z wartością całkowitą. Tego typu wykresy najlepiej pokazują procent poszczególnych części w porównaniu z całością, gdzie zmiana w czasie nie jest ważna do wizualizacji. Są to okrągłe grafiki statystyczne podzielone na wycinki, aby zilustrować proporcje liczbowe.

Kontrolka DonutChart.

Ten składnik kodu zawiera otokę kontrolki Fluent UI DonutChart 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.

Notatka

Pełna dokumentacja i kod źródłowy znajdują się w repozytorium komponentów kodu GitHub.

Właściwości

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

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

  • HideLabel - Ta opcja określa, czy etykiety mają być pokazywane, czy ukrywane na wykresie.

  • Ukryj etykietkę narzędzia — ta opcja określa, czy chcesz pokazać, czy ukryć etykietki narzędzi na wykresie.

  • ShowLabelsInPercentage — ta opcja określa, czy etykiety mają być wyświetlane w procentach.

  • InnerRadius - Ustaw wartość promienia wewnętrznego wykresu pierścieniowego.

  • ValueInsideDonut - Ta właściwość oznacza wartość, która ma być wyświetlana na wykresie pierścieniowym.

  • CustomColors — Ta właściwość służy do wyświetlania kolorów niestandardowych na wykresie, jeśli jest podana

  • Przedmioty - Czynności do wykonania do renderowania

    • ItemTitle — nazwa wyświetlana określonych danych wykresu (Item).
    • ItemKey — klucz, który ma być używany do identyfikowania elementu. Klucze muszą być niepowtarzalne.
    • ItemValue - Ustaw wartość określonych danych wykresu (Item).
    • ItemColor - Ustaw nazwę koloru lub wartość szesnastkową, która ma być wyświetlana dla określonych danych wykresu (Item).

Notatka

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

Jak pokazano w poniższej formule, należy zamapować wartości danych na odpowiadające im właściwości wykresu we właściwościach formantu Items. Na wykresie zostanie automatycznie skorygowane położenie wizualne w celu dopasowania do względnych wartości.

Włącz właściwość CustomColors w celu zdefiniowania spójnych kolorów.

Table(
    {
        ItemLegend: "First",
        ItemValue: 60,
        ItemColor:"#00A892"
    },
    {
        ItemLegend: "Second",
        ItemValue: 10,
        ItemColor:"#9A44FC"
    },
    {
        ItemLegend: "Third",
        ItemValue: 30,
        ItemColor:"#3483FA"
    }
)

Ograniczenia

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

  • Last updated on