GaugeChart Kontrolle (Vorschauversion)

Artikel
10/16/2024

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

Es gibt zwei Arten von Messdiagrammen: Tachometer und Bewertungsmesser.

GaugeChart-Steuerung.

Der Tachometer misst einen numerischen Wert im Verhältnis zu einem Ganzen, beispielsweise zur Speicherkapazität. Die Nadel ist eine optionale Komponente. Die Farbe des Segment, das den gemessenen Wert darstellt, kann an bestimmte Szenarien angepasst oder mit Markenfarben für ausrichten verwendet werden.

Die Bewertungsanzeige zeigt den Status des aktuellen Werts innerhalb einiger vordefinierter Bereiche oder Segmente an. Die Nadel ist hierbei ein notwendiges Bauteil.

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

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

Eigenschaften

Das Steuerelement akzeptiert die folgenden Eigenschaften:

Titel – Dieser Wert bezeichnet den Titel des Diagramms.
Unterbeschriftung – Dieser Wert kennzeichnet die Unterbeschriftung des Diagramms.
ChartValue – Dieser Wert bezeichnet den Wert, der auf der Anzeige angezeigt werden soll.
MinValue – Dieser Wert bezeichnet den Mindestwert der Anzeige.
MaxValue – Dieser Wert bezeichnet den Maximalwert der Anzeige.
HideMinMax : Dieser Wert gibt an, ob die Minimal- und Maximalwerte auf der Anzeige ausgeblendet werden sollen.
HideLegend : Dieser Wert gibt an, ob die Legende auf der Anzeige ausgeblendet werden soll.
ChartValueFormat – Dieser Wert gibt an, dass der Diagrammwert in Percentage oder Fraction angezeigt werden soll.
CustomColors – Setzen Sie diesen Wert auf „true“, um benutzerdefinierte Farben im Diagramm zuzulassen, sofern vorhanden.
Elemente – Die zu rendernden Aktionselemente:
- ItemLegend – Die Anzeigename der jeweiligen Diagrammdaten (Element).
- ItemSize – Die Größe der 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.

Barrierefreiheit

AccessibilityLabel – Bildschirm Leser aria-Label.

Verbrauch

Tachometer

Für Items wird nur eine Zeile benötigt. Verwenden Sie die ChartValue , um die Zielposition anzugeben.

Table(
    {
        ItemSize: 15,
        ItemColor: "#3483FA"
    }
)

Bewertungsmesser

Geben Sie die Bereiche als Items Eigenschaft an. Die Summe aller ItemSize Werte muss 100 % der Differenz zwischen MinValue und MaxValue ergeben. Verwenden Sie die ChartValue -Taste, um die aktuelle Position anzugeben.

Table(
    {
        ItemLegend: "Critical",
        ItemSize: 11,
        ItemColor: "#C50F1F"
    },
    {
        ItemLegend: "Warning",
        ItemSize: 25,
        ItemColor: "#F2610C"
    },
    {
        ItemLegend: "No risk",
        ItemSize: 30,
        ItemColor: "#107C10"
    }
)

Einschränkungen

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

Freigeben über