HorizontalBarChart - Stacked Steuerelement (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.

HorizontalBarChart – gestapeltes Steuerelement.

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

Important

  • Dies ist eine Vorschaufunktion.
  • Vorschaufunktionen sind nicht für den Produktionsgebrauch gedacht und verfügen möglicherweise über eingeschränkte Funktionalität. Diese Features sind vor einer offiziellen Veröffentlichung verfügbar, damit Kunden frühzeitigen Zugriff erhalten und Feedback geben können.

Note

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 solche bereitgestellt werden

  • Items: Die zu rendernden Aktionselemente

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

Note

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

Accessibility

  • AccessibilityLabel: Aria-Label des Bildschirmlesegeräts

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

Limitations

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

  • Last updated on