GaugeChart contrôle (version préliminaire)

Article
10/16/2024

[Cet article fait partie de la documentation préliminaire et peut faire l’objet de modifications.]

Il existe deux types de tableaux de bord : le compteur de vitesse et le compteur de vitesse.

Contrôle GaugeChart.

Le compteur de vitesse mesure une valeur numérique par rapport à un tout, comme la capacité de stockage. L’aiguille est un composant optionnel. La couleur du segment représentant la valeur mesurée peut être personnalisée pour s’adapter à certains scénarios ou pour aligner avec des couleurs de marque.

L’indicateur de notation affiche l’état de la valeur actuelle dans quelques plages ou segments prédéfinis. L’aiguille est ici un composant indispensable.

Ce composant de code fournit un wrapper autour du contrôle Fluent UI GaugeChart à utiliser dans les pages canvas et personnalisées.

Important

Cette fonctionnalité est en version préliminaire.
Les fonctionnalités en version préliminaire ne sont pas destinées à une utilisation en production et peuvent être restreintes. Ces fonctionnalités sont disponibles avant une publication officielle afin que les clients puissent y accéder de façon anticipée et fournir des commentaires.

Note

Pour la documentation complète et le code source, consultez le référentiel des composants de code GitHub . |

Propriétés

Le contrôle accepte les propriétés suivantes :

Titre - Cette valeur indique le titre du graphique.
Sous-étiquette - Cette valeur indique la sous-étiquette du graphique.
ChartValue - Cette valeur indique la valeur à afficher sur la jauge.
MinValue - Cette valeur indique la valeur minimale de la jauge.
MaxValue - Cette valeur indique la valeur maximale de la jauge.
HideMinMax - Cette valeur indique s’il faut masquer les valeurs min et max sur la jauge.
HideLegend - Cette valeur indique s’il faut masquer la légende sur la jauge.
ChartValueFormat - Cette valeur indique l’affichage de la valeur du graphique au format Percentage ou Fraction.
CustomColors - Définissez cette valeur sur true pour autoriser les couleurs personnalisées sur le graphique si elles sont fournies.
Éléments - Les éléments d’action à restituer :
- ItemLegend - Le nom complet des données de graphique particulières (Item).
- ItemSize - La taille des données de graphique particulières (Item).
- ItemColor - Définissez le nom de la couleur ou la valeur HEX à afficher pour les données de graphique particulières (élément).

Note

La couleur de l’élément ne s’applique que si la CustomColors propriété est activée.

Accessibilité

Étiquette d’accessibilité - Écran Lecteur aria-label.

Utilisation

Compteur de vitesse

Une seule ligne est nécessaire pour Items. Utilisez le ChartValue pour indiquer la position cible.

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

Compteur de notation

Fournissez les plages en tant que propriété. Items La somme de toutes les ItemSize valeurs doit totaliser 100 % de la différence entre MinValue et MaxValue. Utilisez le ChartValue pour indiquer la position actuelle.

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

Limitations

Ce composant de canevas ne peut être utilisé que dans les applications canevas et les pages personnalisées.

Partager via