Partager via

Contrôle HorizontalBarChart (version préliminaire)

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

Un graphique à barres horizontales est un graphique qui présente des données catégorielles avec des barres rectangulaires de longueur proportionnelle aux valeurs qu’elles représentent. Ce type de graphique est utile lorsque l’intention est d’afficher des comparaisons entre différentes catégories et que les étiquettes de ces catégories sont longues.

Contrôle HorizontalBarChart

Ce composant de code fournit un wrapper autour du contrôle HorizontalBarChart 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 version officielle afin que les clients puissent obtenir un accès anticipé et fournir des commentaires.

Nonte

La documentation complète et le code source sont accessibles dans 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.
  • HideLabelsÉ: définissez cette option sur True pour masquer les étiquettes sur le graphique.
  • BarHeight : cette valeur indique la hauteur de la barre présentée dans le graphique.
  • HideTooltip : définissez cette option sur True pour masquer les conseils sur le graphique.
  • CustomColors : définissez cette option sur True pour afficher des couleurs personnalisées sur le graphique si elles sont fournies.
  • Variante : cette option permet d’afficher le graphique dans Absolute scale ou Part to whole.
  • ChartDataMode : offre la possibilité d’afficher la valeur de chaque barre dans Fraction ou Percentage.
  • Éléments : éléments d’action à afficher :
    • ItemTitle : le nom d’affichage des données (Élément) graphiques particulières.
    • ItemLegend : légende associée aux données de graphique particulières (Élément).
    • ItemValue : définissez la valeur des données (Élément) graphiques particulières.
    • ItemTotalValue : valeur totale à utiliser pour les données de graphique particulières (Élément).
    • ItemXPopover : texte contextuel de l’axe X pour les données de graphique particulières (Élément).
    • ItemYPopover : texte contextuel de l’axe Y pour les 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.

Nonte

  • La couleur de l’élément ne s’applique que si la CustomColors propriété est activée.
  • Les étiquettes de masquage fonctionnent lorsque le type de graphique est « Échelle absolue ».
  • Masquer les info-bulles fonctionne correctement lorsque l’application est lue (pas en studio), mais peut ne pas s’afficher en studio.

Accessibilité

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

Utilisation

Mappez les valeurs des données aux propriétés de graphique correspondantes dans la propriété Items du contrôle, comme illustré dans la formule suivante.

Activez la CustomColors propriété pour définir des couleurs cohérentes.

Table(
    {
        ItemTitle: "First",
        ItemLegend: "First",
        ItemValue: 40,
        ItemTotalValue: 100,
        ItemXPopOver: "10/2/2024",
        ItemYPopOver: "10%",
        ItemColor: "#00A892"
    },
    {
        ItemTitle: "Second",
        ItemLegend: "Second",
        ItemValue: 20,
        ItemTotalValue: 100,
        ItemXPopOver: "20/4/2024",
        ItemYPopOver: "20%",
        ItemColor: "#9A44FC"
    },
    {
        ItemTitle: "Third",
        ItemLegend: "Third",
        ItemValue: 120,
        ItemTotalValue: 100,
        ItemXPopOver: "10/6/2024",
        ItemYPopOver: "30%",
        ItemColor: "#3483FA"
    },
    {
        ItemTitle: "Fourth",
        ItemLegend: "Fourth",
        ItemValue: 90,
        ItemTotalValue: 100,
        ItemXPopOver: "20/4/2024",
        ItemYPopOver: "40%",
        ItemColor: "#EBA800"
    }
)

Limites

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

  • Last updated on