Freigeben über

DonutChart Kontrolle (Vorschauversion)

  • Artikel

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

Ringdiagramme dienen zur Darstellung von Proportionen, die einen Teilwert im Vergleich zu einem Gesamtwert ausdrücken. Diese Art von Diagrammen eignet sich am besten dazu, den Prozentsatz einzelner Teile im Vergleich zu einem Ganzen anzuzeigen, wenn die Veränderung über einen bestimmten Zeitraum hinweg für die Visualisierung nicht wichtig ist. Es handelt sich dabei um kreisförmige statistische Grafiken, die in Abschnitte unterteilt sind, um die numerischen Proportionen zu veranschaulichen.

DonutChart-Steuerelement.

Diese Codekomponente stellt einen Wrapper um das Fluent UI DonutChart -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.

  • HideLabel – Diese Option steuert, ob Beschriftungen im Diagramm angezeigt oder ausgeblendet werden.

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

  • ShowLabelsInPercentage : Diese Option steuert, ob Beschriftungen als Prozentwerte angezeigt werden.

  • InnerRadius – Legen Sie den Wert für den Innenradius des Ringdiagramms fest.

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

  • CustomColors – Diese Eigenschaft 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.

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(
    {
        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.