HorizontalBarChart - Stacked Kontrolle (Vorschauversion)

[Dieser Artikel ist Teil der Dokumentation zur Vorschauversion und kann geändert werden.]

Horizontale gestapelte Balkendiagramme zeigen mehrere Datenreihen als gestapelte Balken an, wobei jeder Balken für eine Kategorie steht. Die Balken werden nebeneinander gestapelt, wobei die Länge jedes Balkens den Wert der Kategorie der Reihe angibt.

Diese Codekomponente bietet einen Wrapper um das Fluent UI HorizontalBarChart – gestapelt-Steuerelement zur Verwendung in Canvas-Apps und auf angepassten Seiten.

Wichtig

• Dies ist eine Vorschauversion.
• Funktionen in der Vorschauversion sind nicht für den Produktionseinsatz gedacht und können eine eingeschränkte Funktionalität aufweisen. Diese Funktionen stehen vor der offiziellen Veröffentlichung zur Verfügung, damit Kunden frühzeitig Zugriff erhalten und Feedback geben können.

Anmerkung

Die vollständige Dokumentation und den Quellcode finden Sie im GitHub-Codekomponenten-Repository.

Eigenschaften

Das Steuerelement akzeptiert die folgenden Eigenschaften:

• HideLegend : Dieser Wert gibt an, ob Legenden im Diagramm angezeigt oder ausgeblendet werden sollen.

• BarHeight – Dieser Wert gibt die Höhe des im Diagramm dargestellten Balkens an.

• HideTooltip – Diese Option steuert, ob Tooltips im Diagramm angezeigt oder ausgeblendet werden.

• CustomColors - Diese Option wird verwendet, um benutzerdefinierte Farben im Diagramm anzuzeigen, sofern diese bereitgestellt werden.

• Elemente - Die zu rendernden Aktionselemente

  • ItemTitle – Der Anzeigename der jeweiligen Diagrammdaten (Element).
  • ItemKey – Der zur Identifizierung des Artikels zu verwendende Schlüssel. Die Tasten müssen eindeutig sein.
  • ItemValue – Legt den Wert der jeweiligen Diagrammdaten (Element) fest.
  • ItemColor – Legen Sie den Farbnamen oder HEX-Wert fest, der für die bestimmten Diagrammdaten (Element) angezeigt werden soll.
  • ItemCallout – Legen Sie den Wert fest, der in einem Popover/Tooltip angezeigt werden soll.

Anmerkung

Die Elementfarbe wird nur angewendet, wenn die CustomColors-Eigenschaft aktiviert ist.

Barrierefreiheit

• AccessibilityLabel - Bildschirm Leser aria-Label

Verbrauch

Ordnen Sie Datenwerte in der Items-Eigenschaft des Steuerelements den entsprechenden Diagrammeigenschaften zu, wie in der folgenden Formel gezeigt. Das Diagramm passt die Darstellung automatisch an die relativen Werte an.

Aktivieren Sie die CustomColors-Eigenschaft, um konsistente Farben festzulegen.

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

Einschränkungen

Diese Canvas-Komponente kann nur in Canvas-Apps und benutzerdefinierten Seiten verwendet werden.