Partager via

Contrôle GaugeChart (version préliminaire)

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

Il existe deux types de graphiques de jauge : l’indicateur de vitesse et l’indicateur d’évaluation.

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 facultatif. La couleur du segment représentant la valeur mesurée peut être personnalisée en fonction de certains scénarios ou pour s’aligner sur les couleurs de la marque.

L’indicateur d’évaluation indique l’état de la valeur actuelle dans quelques plages ou segments prédéfinis. L’aiguille est un composant nécessaire ici.

Ce composant de code fournit un wrapper autour du contrôle GaugeChart de Fluent UI à utiliser dans les applications canevas et les pages 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 une documentation complète et le code source, voir le Référentiel de 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 afficher ou masquer la légende sur la jauge.

  • ChartValueFormat : cette valeur indique d’afficher la valeur du graphique dans Percentage ou Fraction.

  • CustomColors : définissez cette valeur sur True pour afficher des couleurs personnalisées sur le graphique si elles sont fournies.

  • Éléments : éléments d’action à afficher :

    • ItemLegend : nom d’affichage des données de graphique particulières (Élément).
    • ItemSize : taille des données de graphique particulières (Élément).
    • ItemColor : définissez le nom de la couleur ou la valeur HEX à afficher pour les données (Élément) du graphique particulières.

Note

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

Accessibilité

  • AccessibilityLabel : étiquette aria pour les lecteurs d’écran.

Utilisation

Tachymètre

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

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

Compteur d’évaluation

Indiquez les plages comme Items propriété. La somme de toutes les ItemSize valeurs doit correspondre à 100 % de la différence entre la MinValue et la MaxValue Utilisez la 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"
    }
)

Limites

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

  • Last updated on