HorizontalBarChart Kontrolka (wersja zapoznawcza)

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

Poziomy wykres słupkowy to wykres przedstawiający dane podzielone na kategorie za pomocą prostokątnych słupków o długościach proporcjonalnych do reprezentowanych przez nie wartości. Ten typ wykresu jest przydatny, gdy celem jest pokazanie porównań między różnymi kategoriami, a etykiety dla tych kategorii są długie.

Ten składnik kodu zawiera otokę kontrolki Fluent UI HorizontalBarChart 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.
• HideLabels - Ustaw tę opcję na true, aby ukryć etykiety na wykresie.
• BarHeight - Ta wartość oznacza wysokość słupka przedstawionego na wykresie.
• HideTooltip - Ustaw tę opcję na true, aby ukryć etykietki narzędzi na wykresie.
• CustomColors — Ustaw tę opcję na true, aby zezwolić na niestandardowe kolory na wykresie, jeśli są dostępne.
• Wariant - Ta opcja umożliwia wyświetlanie wykresu w lub Absolute scalePart to whole.
• ChartDataMode — Ta opcja umożliwia pokazanie wartości każdego słupka w Fraction lub Percentage.
• Elementy - Czynności do wykonania do renderowania:
  • ItemTitle — wyświetlana nazwa określonych danych wykresu (elementu).
  • ItemLegend - Legenda skojarzona z określonymi danymi wykresu (Item).
  • ItemValue - Ustaw wartość określonych danych wykresu (Item).
  • ItemTotalValue — łączna wartość, która ma być używana dla określonych danych wykresu (Item).
  • ItemXPopover - Tekst wyskakujący osi X dla określonych danych wykresu (elementu).
  • PozycjaTakPodgląd- Tekst wyskakujący osi Y dla określonych danych wykresu (elementu).
  • ItemColor - Ustaw nazwę koloru lub wartość szesnastkową, która ma być wyświetlana dla określonych danych wykresu (elementu).

Notatka

• Kolor elementu jest stosowane tylko wtedy, gdy właściwość CustomColors jest włączona.
• Opcja Ukryj etykiety działa, gdy typ wykresu to "Skala bezwzględna".
• Opcja Ukryj etykietki narzędzi działa dobrze, gdy aplikacja jest odtwarzana (nie w programie Studio), ale może nie być renderowana w programie Studio.

Dostępność

• AccessibilityLabel - Czytelnik ekranu aria-label.

Sposób użycia

Zamapuj wartości danych na odpowiednie właściwości wykresu Items we właściwości formantu, jak pokazano w poniższej formule.

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

Table(
    {
        ItemTitle: "First",
        ItemLegend: "First",
        ItemValue: 40,
        ItemTotalValue: 100,
        ItemXPopOver: "10/2/2024",
        ItemYPopOver: "10%",
        ItemColor: "#00A892"
    },
    {
        ItemTitle: "Second",
        ItemLegend: "Second",
        ItemValue: 20,
        ItemTotalValue: 100,
        ItemXPopOver: "20/4/2024",
        ItemYPopOver: "20%",
        ItemColor: "#9A44FC"
    },
    {
        ItemTitle: "Third",
        ItemLegend: "Third",
        ItemValue: 120,
        ItemTotalValue: 100,
        ItemXPopOver: "10/6/2024",
        ItemYPopOver: "30%",
        ItemColor: "#3483FA"
    },
    {
        ItemTitle: "Fourth",
        ItemLegend: "Fourth",
        ItemValue: 90,
        ItemTotalValue: 100,
        ItemXPopOver: "20/4/2024",
        ItemYPopOver: "40%",
        ItemColor: "#EBA800"
    }
)

Ograniczenia

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