HorizontalBarChart - Stacked Kontroll (forhåndsversjon)

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

Vannrett stablet stolpediagram viser flere serier med data som stablede stolper, og hver stolpe representerer en kategori. Stolpene stables ved siden av hverandre, og lengden på hver stolpe representerer verdien av kategorien for serien.

Denne kodekomponenten gir en wrapper rundt Fluent UI HorizontalBarChart - Stacked-kontrollen for bruk i lerret og på 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.

Merk

Hvis du vil ha fullstendig dokumentasjon og kildekode, kan du se GitHub-kodekomponentrepositoriet.

Egenskaper

Kontrollen godtar følgende egenskaper:

• HideLegend - Denne verdien angir om forklaringer skal vises eller skjules i diagrammet.

• BarHeight - Denne verdien angir høyden på stolpen som presenteres i diagrammet.

• SkjulVerktøytips – Dette alternativet styrer om verktøytips skal vises eller skjules i diagrammet.

• CustomColors – Dette alternativet brukes til å vise egendefinerte farger på diagrammet hvis det er angitt

• Elementer – Handlingselementene som skal gjengis

  • ItemTitle - Visningsnavnet til de bestemte diagramdataene (Item).
  • ItemKey - Nøkkelen som skal brukes til å identifisere elementet. Nøklene må være unikt.
  • ItemValue - Angi verdien for de bestemte diagramdataene (Item).
  • ItemColor - Angi fargenavnet eller HEX-verdien som skal vises for de bestemte diagramdataene (Item).
  • ItemCallout – Angi verdien som skal vises i et popup-/verktøytips.

Merk

Elementfarge gjelder bare hvis CustomColors-egenskapen er aktivert.

Tilgjengelighet

• AccessibilityLabel - Skjerm leser aria-etikett

Bruk

Tilordne dataverdier til de tilsvarende diagramegenskapene i Items-egenskapen for kontrollen, som vist i formelen nedenfor. Diagrammet justerer automatisk visualobjektet slik at det samsvarer med de relative verdiene.

Aktiver CustomColors-egenskapen for å definere konsekvente farger.

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

Begrensninger

Denne lerretskomponenten kan bare brukes i lerretsapper og egendefinerte sider.