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.

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

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 Tooltips 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 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.

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

Limitations

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

  • Last updated on