HorizontalBarChart Kontroll (förhandsversion)

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

Ett vågrätt stapeldiagram är ett diagram som visar kategoriska data med rektangulära staplar med längder som är proportionella mot de värden de representerar. Den här typen av diagram är användbar när avsikten är att visa jämförelser mellan olika kategorier och etiketterna för dessa kategorier är långa.

Den här kodkomponenten tillhandahåller en omslutning runt Fluent UI HorizontalBarChart-kontrollen för användning på arbetsytor 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.

Obs

Fullständig dokumentation och källkod som finns i lagringsplatsen för GitHub-kodkomponenter.

Egenskaper

Kontrollen accepterar följande egenskaper:

• Titel – Det här värdet anger diagrammets titel.
• HideLabels – Ställ in det här alternativet på true för att dölja etiketter i diagrammet.
• BarHeight - Det här värdet anger höjden på stapeln som visas i diagrammet.
• HideTooltip – Ställ in det här alternativet på true för att dölja knappbeskrivningar i diagrammet.
• CustomColors – Ställ in det här alternativet på true för att tillåta anpassade färger i diagrammet om det finns.
• Variant - Med det här alternativet kan diagrammet visas i Absolute scale eller Part to whole.
• ChartDataMode - Det här alternativet ger dig möjlighet att visa värdet för varje stapel i Fraction eller Percentage.
• Objekt – Åtgärdsalternativen som ska återges:
  • ItemTitle - visningsnamnet för specifika diagramdata (objekt).
  • ItemLegend – Förklaringen som är kopplad till specifika diagramdata (Item).
  • ItemValue - Ställ in värdet för specifika diagramdata (Item).
  • ItemTotalValue - Det totala värdet som ska användas för specifika diagramdata (Item).
  • ItemXPopover - X-axelns popover-text för specifika diagramdata (Item).
  • ItemYPopover - Y-axelns popover-text för specifika diagramdata (Item).
  • ItemColor - Ställ in färgnamnet eller HEX-värdet som ska visas för specifika sjökortsdata (Objekt).

Obs

• Objektfärg tillämpas endast om CustomColors egenskapen är aktiverad.
• Dölj etiketter fungerar när diagramtypen är "Absolut skala".
• Dölj knappbeskrivningar fungerar bra när appen spelas upp (inte i studio), men kanske inte renderas i studio.

Hjälpmedel

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

Användning

Mappa datavärden till motsvarande diagramegenskaper i kontrollens Items egenskap, vilket visas i följande formel.

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

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"
    }
)

Begränsningar

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