HorizontalBarChart Kontrolelement (forhåndsversion)

[Denne artikel er dokumentation til den foreløbige udgivelse. Der kan forekomme ændringer.]

Et vandret søjlediagram er et diagram, der præsenterer kategoriske data med rektangulære søjler med længder, der er proportionale med de værdier, de repræsenterer. Denne type diagram er nyttigt, når hensigten er at vise sammenligninger mellem forskellige kategorier, og etiketterne for disse kategorier er lange.

Denne kodekomponent indeholder en ombrydning omkring kontrolelementet Fluent UI HorizontalBarChart til brug på lærred og brugerdefinerede sider.

Vigtigt!

• Dette er en forhåndsversion af funktionen.
• Forhåndsversionsfunktionerne er ikke beregnet til produktionsformål og kan have begrænset funktionalitet. Disse funktioner er tilgængelige før en officiel udgivelse, så kunderne kan få tidlig adgang og give feedback.

Bemærk

Fuld dokumentation og kildekode findes i GitHub-kodekomponentlageret.

Egenskaber

Kontrolelementet accepterer følgende egenskaber:

• Titel - Denne værdi angiver titlen på diagrammet.
• HideLabels - Indstil denne indstilling til sand for at skjule etiketter i diagrammet.
• BarHeight - Denne værdi angiver højden på søjlen, der vises i diagrammet.
• SkjulVærktøjstip - Indstil denne indstilling til sand for at skjule værktøjstip i diagrammet.
• Brugerdefinerede farver - Indstil denne indstilling til sand for at tillade brugerdefinerede farver på diagrammet, hvis det er angivet.
• Variant - Denne indstilling gør det muligt at vise diagrammet i Absolute scale eller Part to whole.
• ChartDataMode – Denne indstilling giver mulighed for at vise værdien af hver søjle i Fraction eller Percentage.
• Elementer – de handlingspunkter, der skal gengives:
  • ItemTitle - Visningsnavnet på de bestemte diagramdata (Item).
  • ItemLegend - Den forklaring, der er knyttet til de bestemte diagramdata (Item).
  • ItemValue - Indstil værdien af de bestemte diagramdata (Item).
  • ItemTotalValue - Den samlede værdi, der skal bruges til de bestemte diagramdata (Item).
  • ItemXPopover - X-aksens popover-tekst for de bestemte diagramdata (Item).
  • ItemYPopover - Y-aksens popover-tekst for de bestemte diagramdata (Item).
  • ItemColor - Indstil det farvenavn eller HEX-værdi, der skal vises for de bestemte diagramdata (Item).

Bemærk

• Elementfarven gælder kun, hvis CustomColors egenskaben er slået til.
• Skjul etiketter virker, når diagramtypen er 'Absolut skala'.
• Skjul værktøjstip fungerer fint, når appen afspilles (ikke i studiet), men gengives muligvis ikke, mens den er i studiet.

Tilgængelighed

• AccessibilityLabel - Skærm Læser aria-etiket.

Brug

Tilknyt dataværdier til de tilsvarende diagramegenskaber i egenskaben Items for kontrolelementet, som vist i følgende formel.

Aktiver egenskaben CustomColors for at definere ensartede farver.

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ænsninger

Denne lærredkomponent kan kun bruges i lærredapps og brugerdefinerede sider.