DonutChart contrôle (version préliminaire)

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

Les graphiques en anneau sont utilisés pour afficher une proportion, qui exprime une valeur partielle par rapport à une valeur totale. Ces types de graphiques sont idéaux pour montrer le pourcentage de parties individuelles par rapport à un tout, lorsque le changement au fil du temps n’est pas important à visualiser. Il s’agit de graphiques statistiques circulaires divisés en tranches pour illustrer la proportion numérique.

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

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

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

• ShowLabelsInPercentage - Cette option contrôle si les étiquettes doivent être affichées en pourcentage.

• InnerRadius - Définissez la valeur du rayon intérieur du graphique en anneau.

• ValueInsideDonut - Cette propriété indique la valeur à afficher à l’intérieur du graphique en anneau.

• CustomColors - Cette propriété 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).

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(
    {
        ItemLegend: "First",
        ItemValue: 60,
        ItemColor:"#00A892"
    },
    {
        ItemLegend: "Second",
        ItemValue: 10,
        ItemColor:"#9A44FC"
    },
    {
        ItemLegend: "Third",
        ItemValue: 30,
        ItemColor:"#3483FA"
    }
)

Limitations

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