HorizontalBarChart contrôle (version préliminaire)

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

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

Ce composant de code fournit un wrapper autour du contrôle Fluent UI HorizontalBarChart à 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

La documentation complète et le code source se trouvent dans 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.
• HideLabels - Définissez cette option sur vrai 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 info-bulles sur le graphique.
• CustomColors - Définissez cette option sur vrai pour autoriser les couleurs personnalisées sur le graphique si elles sont fournies.
• Variante - Cette option permet d’afficher le graphique en Absolute scale ou Part to whole.
• ChartDataMode - Cette option permet d’afficher la valeur de chaque barre dans Fraction ou Percentage.
• Éléments - Les éléments d’action à restituer :
  • ItemTitle - Le nom complet des données de graphique particulières (Item).
  • ItemLegend - La légende associée aux données de graphique particulières (Item).
  • ItemValue - Définissez la valeur des données de graphique particulières (Item).
  • ItemTotalValue - La valeur totale à utiliser pour les données de graphique particulières (Item).
  • ItemXPopover - Le texte contextuel de l’axe X pour les données de graphique particulières (élément).
  • ItemYPopover - Le 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 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.
• Masquer les étiquettes fonctionne lorsque le type de graphique est "Échelle absolue".
• Masquer les info-bulles fonctionne bien lorsque l’application est jouée (pas en studio), mais peut ne pas s’afficher en studio.

Accessibilité

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

Utilisation

Mappez les valeurs de 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"
    }
)

Limitations

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