Del via


HorizontalBarChart - Stacked Kontrolelement (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 liggende liggende søjlediagram repræsenterer en kategori. Søjlerne stables ved siden af hinanden, og længden på hver bjælke, der repræsenterer værdien for kategorien af serien.

HorizontalBarChart – stablet kontrolelement.

Denne kodekomponent indeholder en ombryder omkring kontrolelementet Fluent-brugergrænseflade-HorizontalBarChart - Stacked til brug i lærredsapps og på 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, der findes i GitHub-kodekomponenternes lager.

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.

Bemærk

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

Tilgængelighed

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

Brug

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.