HorizontalBarChart - Stacked-kontrolelementet (forhåndsversion)

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

Vandret stablet søjlediagram viser flere dataserier som stablede søjler, hvor hver søjle repræsenterer en kategori. Søjlerne stables ved siden af hinanden, hvor længden af hver søjle repræsenterer værdien for kategorien i dataserien.

HorizontalBarChart – stablet kontrolelement.

Denne kodekomponent indeholder en ombryder omkring kontrolelementet Fluent-brugergrænseflade-HorizontalBarChart - Stacked til brug i lærredsapps og på brugerdefinerede sider.

Vigtig

  • Dette er en forhåndsversionsfunktion.
  • Prøveversionsfunktioner er ikke beregnet til produktionsbrug 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.

Note

Du kan finde den fulde dokumentation og kildekode under GitHub-kodekomponentlageret.

Egenskaber

Kontrolelementet accepterer følgende egenskaber:

  • HideLegend - Denne værdi angiver, om forklaringer skal vises eller skjules i diagrammet.

  • BarHeight - Denne værdi angiver højden på søjlen, der vises i diagrammet.

  • SkjulVærktøjstip - Denne indstilling styrer, om værktøjstip skal vises eller skjules i diagrammet.

  • CustomColors – Denne indstilling bruges til at vise brugerdefinerede farver på diagrammet, hvis den er angivet

  • Elementer – de handlingspunkter, der skal gengives

    • ItemTitle - Visningsnavnet på de bestemte diagramdata (Item).
    • ItemKey - Nøglen, der skal bruges til at identificere elementet. Nøglerne skal være entydige.
    • ItemValue - Indstil værdien af de bestemte diagramdata (Item).
    • ItemColor - Indstil farvenavnet eller HEX-værdien, der skal vises for de bestemte diagramdata (Item).
    • ItemCallout – Angiv den værdi, der skal vises i et pop op-vindue/værktøjstip.

Note

Elementfarven gælder kun, hvis CustomColors egenskaben er slået til.

Tilgængelighed

  • AccessibilityLabel – Skærmlæser aria-etiket

Anvendelse

Knyt dataværdier til de tilsvarende diagramegenskaber i Items objektets egenskab, som vist i nedenstående formel. I diagrammet justeres det visuelle element automatisk, så det stemmer overens med de relative værdier.

Aktiver egenskaben CustomColors for at definere ensartede farver.

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

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

  • Last updated on