HorizontalBarChart - Stacked contrôle (version préliminaire)

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

Graphique à barres empilées horizontalement affiche plusieurs séries de données sous forme de barres empilées, chaque barre représentant une catégorie. Les barres sont empilées les unes à côté des autres, la longueur de chaque barre représentant la valeur de la catégorie de la série.

Ce composant de code fournit un wrapper autour du contrôle HorizontalBarChart – empilé de l’interface utilisateur Fluent à utiliser dans 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 :

• HideLegend - Cette valeur indique s’il faut afficher ou masquer les légendes sur le graphique.

• BarHeight - Cette valeur indique la hauteur de la barre présentée dans le graphique.

• HideTooltip - Cette option contrôle si les info-bulles doivent être affichées ou masquées sur le graphique.

• CustomColors - Cette option est utilisée pour afficher des couleurs personnalisées sur le graphique si elles sont fournies

• Éléments - Les éléments d’action à restituer

  • ItemTitle - Le nom complet des données de graphique particulières (Item).
  • ItemKey - La clé à utiliser pour identifier l’élément. Les clés doivent être uniques.
  • ItemValue - Définissez la valeur 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 (Item).
  • ItemCallout - Définissez la valeur à afficher dans une fenêtre contextuelle/info-bulle.

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

Mappez les valeurs des données aux propriétés de graphique correspondantes dans la Items propriété du contrôle, comme démontré dans la formule ci-dessous. Le graphique ajuste automatiquement le visuel pour correspondre aux valeurs relatives.

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

Table(
    {
        ItemKey: "1",
        ItemTitle: "First",
        ItemCallout:"First item callout title",
        ItemValue: 40,
        ItemColor: "#00A892"
    },
    {
        ItemKey: "2",
        ItemTitle: "Second",
        ItemCallout:"Second item callout title",
        ItemValue: 20,
        ItemColor: "#9A44FC"
    },
    {
        ItemKey: "3",
        ItemTitle: "Third",
        ItemCallout:"Third item callout title",
        ItemValue: 120,
        ItemColor: "#3483FA"
    },
    {
        ItemKey: "4",
        ItemTitle: "Fourth",
        ItemCallout:"Fourth item callout title",
        ItemValue: 90,
        ItemColor: "#EBA800"
    }
)

Limitations

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