Udostępnij za pośrednictwem

DonutChart Kontrolka (wersja zapoznawcza)

  • Artykuł

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

Uwaga

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 są podane

  • Elementy - Czynności do wyrenderowania

    • ItemTitle — wyświetlana nazwa 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).

Uwaga

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

Dostępność

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