Freigeben über

DonutChart-Steuerelement (Vorschauversion)

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

Ringdiagramme werden verwendet, um den Anteil darzustellen, der einen Teilwert im Vergleich zu einem Gesamtwert ausdrückt. Diese Arten von Diagrammen eignen sich am besten, um den prozentualen Anteil einzelner Teile im Vergleich zu einem Ganzen darzustellen, bei dem die Veränderung im Zeitverlauf nicht wichtig ist, um sie zu visualisieren. Es handelt sich um kreisförmige statistische Grafiken, die in Segmente unterteilt sind, um numerische Proportionen zu veranschaulichen.

DonutChart-Steuerelement.

Diese Codekomponente bietet einen Wrapper für das Fluent UI DonutChart-Steuerelement zur Verwendung auf Canvas- und benutzerdefinierten 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 dem offiziellen Release zur Verfügung, damit Kunden früher Zugriff darauf erhalten und Feedback geben können.

Anmerkung

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

Eigenschaften

Das Steuerelement akzeptiert die folgenden Eigenschaften:

  • Titel: Dieser Wert gibt den Titel des Diagramms an.

  • HideLabel: Diese Option steuert, ob Beschriftungen im Diagramm ein- oder ausgeblendet werden.

  • HideTooltip: Diese Option steuert, ob QuickInfos im Diagramm angezeigt oder ausgeblendet werden.

  • ShowLabelsInPercentage: Diese Option steuert, ob Beschriftungen als Prozentsatz angegeben werden.

  • InnerRadius: Legt den Wert für den inneren Radius des Ringdiagramms fest.

  • ValueInsideDonut: Diese Eigenschaft gibt den Wert an, der im Ringdiagramm angezeigt werden soll.

  • CustomColors: Diese Eigenschaft wird verwendet, um ggf. benutzerdefinierte Farben im Diagramm anzuzeigen

  • Items: Die zu rendernden Aktionselemente

    • ItemTitle: Der Anzeigename der jeweiligen Diagrammdaten (Element).
    • ItemKey: Der zur Identifizierung des Elements zu verwendende Schlüssel. Die Tasten 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.

Anmerkung

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

Barrierefreiheit

  • AccessibilityLabel: Aria-Beschriftung der Sprachausgabe

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(
    {
        ItemLegend: "First",
        ItemValue: 60,
        ItemColor:"#00A892"
    },
    {
        ItemLegend: "Second",
        ItemValue: 10,
        ItemColor:"#9A44FC"
    },
    {
        ItemLegend: "Third",
        ItemValue: 30,
        ItemColor:"#3483FA"
    }
)

Einschränkungen

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

  • Last updated on