HorizontalBarChart - Stacked Kontroll (förhandsversion)

[Den här artikeln är en förhandsversion av dokumentationen och kan komma att ändras.]

Horisontellt stapeldiagram visar flera dataserier som staplar, där varje stapel representerar en kategori. Staplarna staplas bredvid varandra och längden på varje stapel motsvarar värdet för seriens kategori.

Den här kodkomponenten fungerar som omslutare runt kontrollen Fluent UI HorizontalBarChart – staplad för användning i arbetsyta och anpassade sidor.

Viktigt

• Detta är en förhandsversion.
• Förhandsversionsfunktioner ska inte användas i produktion och funktionerna kan vara begränsade. funktionerna är tillgängliga före den officiella publiceringen så att kunderna kan få tillgång tidigare och ge oss feedback.

Kommentar

Den fullständiga dokumentationen och källkoden finns i databasen för GitHub-kodkomponenter.

Egenskaper

Kontrollen accepterar följande egenskaper:

• HideLegend - Det här värdet anger om du vill visa eller dölja förklaringar i diagrammet.

• BarHeight - Det här värdet anger höjden på stapeln som visas i diagrammet.

• HideTooltip - Det här alternativet styr om verktygstips ska visas eller döljas i diagrammet.

• CustomColors - Det här alternativet används för att visa anpassade färger i diagrammet om det finns

• Objekt – De åtgärdsobjekt som ska återges

  • ItemTitle - visningsnamnet för specifika diagramdata (objekt).
  • ItemKey – Nyckeln som ska användas för att identifiera objektet. Nycklarna måste vara unika.
  • ItemValue - Ställ in värdet för specifika diagramdata (Item).
  • ItemColor - Ställ in färgnamnet eller HEX-värdet som ska visas för den specifika sjökortsdatan (objekt).
  • ItemCallout – Ställ in värdet som ska visas i ett flytande fönster/knappbeskrivning.

Kommentar

Objektfärg tillämpas endast om CustomColors egenskapen är aktiverad.

Hjälpmedel

• AccessibilityLabel - Skärmläsare, läsare, aria-etikett

Användning

Mappa datavärden till motsvarande diagramegenskaper i Items för kontrollens, vilket visas i formeln nedan. Diagrammet justerar automatiskt de visuella elementen för att matcha de relativa värdena.

Aktivera egenskapen CustomColors för att definiera konsekventa färger.

Table(
    {
        ItemKey: "1",
        ItemTitle: "First",
        ItemCallout:"First item callout title",
        ItemValue: 40,
        ItemColor: "#00A892"
    },
    {
        ItemKey: "2",
        ItemTitle: "Second",
        ItemCallout:"Second item callout title",
        ItemValue: 20,
        ItemColor: "#9A44FC"
    },
    {
        ItemKey: "3",
        ItemTitle: "Third",
        ItemCallout:"Third item callout title",
        ItemValue: 120,
        ItemColor: "#3483FA"
    },
    {
        ItemKey: "4",
        ItemTitle: "Fourth",
        ItemCallout:"Fourth item callout title",
        ItemValue: 90,
        ItemColor: "#EBA800"
    }
)

Begränsningar

Den här arbetsytekomponenten kan endast användas i arbetsyteappar och på anpassade sidor.