Freigeben über

GaugeChart-Steuerelement (Vorschauversion)

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

Es gibt zwei Arten von Messdiagrammen: Geschwindigkeitsmesser und Bewertungsmesser.

GaugeChart-Steuerelement.

Der Tacho misst einen numerischen Wert gegen ein Ganzes, wie z.B. die Speicherkapazität. Die Nadel ist ein optionales Bauteil. Die Farbe des Segments, die den gemessenen Wert darstellt, kann für die bestimmte Szenarien angepasst oder an die Brandingfarben angeglichen werden.

Das Rating-Meter zeigt den Status des aktuellen Wertes innerhalb weniger vordefinierter Bereiche oder Segmente an. Die Nadel ist hier ein erforderliches Bauteil.

Diese Codekomponente bietet einen Wrapper für das Fluent UI GaugeChart-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 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 gibt den Titel des Diagramms an.

  • Sublabel: Dieser Wert gibt die Unterbeschriftung des Diagramms an.

  • ChartValue: Dieser Wert gibt den Wert an, der auf dem Messgerät angezeigt werden soll.

  • MinValue: Dieser Wert gibt den Mindestwert des Messgeräts an.

  • MaxValue: Dieser Wert gibt den Höchstwert des Messgeräts an.

  • HideMinMax: Dieser Wert gibt an, ob die Mindest- und Höchstwerte auf dem Messgerät ausgeblendet werden sollen.

  • HideLegend: Dieser Wert gibt an, ob die Legende auf dem Messgerät ausgeblendet werden soll.

  • ChartValueFormat: Dieser Wert gibt an, dass der Diagrammwert in Percentage oder Fraction angezeigt werden soll.

  • CustomColors: Wenn dieser Wert auf true gesetzt ist, können ggf. benutzerdefinierte Farben im Diagramm angezeigt werden.

  • Items: Die zu rendernden Aktionselemente:

    • ItemLegend: Der Anzeigename der jeweiligen Diagrammdaten (Element).
    • ItemSize: Die Größe der jeweiligen Diagrammdaten (Element).
    • 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

Tachometer

Es wird nur eine Zeile für Items benötigt. Verwenden Sie 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 ChartValue, um die derzeitige 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.

  • Last updated on