Freigeben über

HorizontalBarChart Kontrolle (Vorschauversion)

  • Artikel

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

Ein horizontales Balkendiagramm ist ein Diagramm, das kategorische Daten mit rechteckigen Balken darstellt, deren Länge proportional zu den von ihnen dargestellten Werten ist. Dieser Diagrammtyp ist nützlich, wenn Vergleiche zwischen verschiedenen Kategorien angezeigt werden sollen und die Beschriftungen für diese Kategorien lang sind.

HorizontalBarChart-Steuerelement.

Diese Codekomponente stellt einen Wrapper um das Fluent UI HorizontalBarChart -Steuerelement zur Verwendung in Canvas- und benutzerdefinierten Seiten bereit.

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

Vollständige Dokumentation und Quellcode finden Sie im GitHub-Codekomponenten-Repository.

Eigenschaften

Das Steuerelement akzeptiert die folgenden Eigenschaften:

  • Titel – Dieser Wert bezeichnet den Titel des Diagramms.
  • HideLabels – Setzen Sie diese Option auf „True“, um Beschriftungen im Diagramm auszublenden.
  • BarHeight – Dieser Wert gibt die Höhe des im Diagramm dargestellten Balkens an.
  • HideTooltip – Setzen Sie diese Option auf „True“, um Tooltips im Diagramm auszublenden.
  • CustomColors – Setzen Sie diese Option auf „True“, um benutzerdefinierte Farben im Diagramm zuzulassen, sofern vorhanden.
  • Variante – Mit dieser Option kann das Diagramm in Absolute scale oder Part to whole angezeigt werden.
  • ChartDataMode – Diese Option ermöglicht die Anzeige des Werts jedes Balkens in Fraction oder Percentage.
  • Elemente – Die zu rendernden Aktionselemente:
    • ItemTitle – Der Anzeigename der jeweiligen Diagrammdaten (Element).
    • ItemLegend – Die mit den jeweiligen Diagrammdaten (Element) verknüpfte Legende.
    • ItemValue – Legt den Wert der jeweiligen Diagrammdaten (Element) fest.
    • ItemTotalValue – Der Gesamtwert, der für die jeweiligen Diagrammdaten (Element) verwendet werden soll.
    • ItemXPopover – Der Popover-Text der X-Achse für die jeweiligen Diagrammdaten (Element).
    • ItemYPopover – Der Popover-Text der Y-Achse für die jeweiligen Diagrammdaten (Element).
    • ItemColor – Legen Sie den Farbnamen oder HEX-Wert fest, der für die jeweiligen Diagrammdaten (Element) angezeigt werden soll.

Anmerkung

  • Die Elementfarbe wird nur angewendet, wenn die CustomColors-Eigenschaft aktiviert ist.
  • Das Ausblenden von Beschriftungen funktioniert, wenn der Diagrammtyp „Absolute Skala“ ist.
  • Das Ausblenden von Tooltips funktioniert einwandfrei, wenn die App abgespielt wird (nicht im Studio), wird im Studio jedoch möglicherweise nicht gerendert.

Barrierefreiheit

  • AccessibilityLabel – Bildschirm Leser aria-Label.

Verbrauch

Ordnen Sie Datenwerte den entsprechenden Diagrammeigenschaften in der Items -Eigenschaft des Steuerelements zu, wie in der folgenden Formel gezeigt.

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

Table(
    {
        ItemTitle: "First",
        ItemLegend: "First",
        ItemValue: 40,
        ItemTotalValue: 100,
        ItemXPopOver: "10/2/2024",
        ItemYPopOver: "10%",
        ItemColor: "#00A892"
    },
    {
        ItemTitle: "Second",
        ItemLegend: "Second",
        ItemValue: 20,
        ItemTotalValue: 100,
        ItemXPopOver: "20/4/2024",
        ItemYPopOver: "20%",
        ItemColor: "#9A44FC"
    },
    {
        ItemTitle: "Third",
        ItemLegend: "Third",
        ItemValue: 120,
        ItemTotalValue: 100,
        ItemXPopOver: "10/6/2024",
        ItemYPopOver: "30%",
        ItemColor: "#3483FA"
    },
    {
        ItemTitle: "Fourth",
        ItemLegend: "Fourth",
        ItemValue: 90,
        ItemTotalValue: 100,
        ItemXPopOver: "20/4/2024",
        ItemYPopOver: "40%",
        ItemColor: "#EBA800"
    }
)

Einschränkungen

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