HorizontalBarChart Kontroll (forhåndsversjon)

[Denne artikkelen inneholder dokumentasjon for forhåndsversjonen og kan bli endret.]

Et vannrett stolpediagram er et diagram som presenterer kategoriske data med rektangulære stolper med lengder proporsjonale med verdiene de representerer. Denne typen diagram er nyttig når hensikten er å vise sammenligninger mellom ulike kategorier og etikettene for disse kategoriene er lange.

Denne kodekomponenten gir en innpakning rundt Fluent UI HorizontalBarChart-kontrollen for bruk på lerret og egendefinerte sider.

Viktig!

• Dette er forhåndsversjonsfunksjon.
• Forhåndsversjonsfunksjonene er ikke ment for produksjonsbruk og kan ha begrenset funksjonalitet. Disse funksjonene er tilgjengelige før en offisiell utgivelse, slik at kunder kan få tidlig tilgang og gi tilbakemeldinger.

Notat

Full dokumentasjon og kildekode finnes i GitHub-kodekomponentrepositoriet.

Egenskaper

Kontrollen godtar følgende egenskaper:

• Tittel - Denne verdien angir tittelen på diagrammet.
• HideLabels - Sett dette alternativet til true for å skjule etiketter i diagrammet.
• BarHeight - Denne verdien angir høyden på stolpen som presenteres i diagrammet.
• SkjulVerktøytips - Sett dette alternativet til sann for å skjule verktøytips i diagrammet.
• CustomColors - Sett dette alternativet til true for å tillate egendefinerte farger i diagrammet hvis det er gitt.
• Variant - Dette alternativet lar diagrammet vises i Absolute scale eller Part to whole.
• ChartDataMode - Dette alternativet gir deg muligheten til å vise verdien av hver stolpe i Fraction eller Percentage.
• Elementer – Handlingselementene som skal gjengis:
  • ItemTitle - Visningsnavnet til de bestemte diagramdataene (Element).
  • ItemLegend - Forklaringen knyttet til de bestemte diagramdataene (Item).
  • ItemValue - Angi verdien for de bestemte diagramdataene (Item).
  • ItemTotalValue - Totalverdien som skal brukes for de bestemte diagramdataene (Item).
  • ItemXPopover - X-aksens popover-tekst for de bestemte diagramdataene (Element).
  • ElementYPopover - Popover-teksten for Y-aksen for de bestemte diagramdataene (Element).
  • ItemColor - Angi fargenavnet eller HEX-verdien som skal vises for de bestemte diagramdataene (Item).

Notat

• Elementfarge gjelder bare hvis CustomColors-egenskapen er aktivert.
• Skjul etiketter fungerer når diagramtypen er «Absolutt skala».
• Skjul verktøytips fungerer fint når appen spilles av (ikke i studio), men gjengis kanskje ikke mens den er i studio.

Tilgjengelighet

• AccessibilityLabel - Skjermleser aria-etikett.

Bruk

Tilordne dataverdier til de tilsvarende diagramegenskapene i egenskapen Items til kontrollen, som vist i formelen nedenfor.

Aktiver CustomColors-egenskapen for å definere konsekvente farger.

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

Begrensninger

Denne lerretskomponenten kan bare brukes i lerretsapper og egendefinerte sider.