#Donut

Le graphique en anneau convient pour afficher les proportions de données à une seule dimension ; la zone vide au centre peut afficher des informations de synthèse.

Cas d'utilisation :

• Afficher à la fois les données globales et la part de chaque composant

• Mettre en évidence la relation entre le tout et ses parties

• Afficher des indicateurs clés ou un titre dans la zone centrale :::

:::warning{title=Warning} Exigences de données :

• Au moins 1 champ de mesure

• Toutes les dimensions sont fusionnées avec les noms de mesures (lorsqu'il existe plusieurs mesures) et affichées comme éléments de légende

• Toutes les mesures sont automatiquement fusionnées en une seule mesure

Fonctionnalités activées par défaut :

• La légende, les étiquettes de données, les infobulles, le calcul des proportions et le texte central sont activés par défaut :::

#chartType

Type: "donut"

:::note{title=Description} Graphique en anneau

Graphique en anneau, une variante du graphique circulaire avec une zone vide au centre.

Jeu de données

Jeu de données déjà agrégé et conforme à la spécification TidyData, utilisé pour définir la source et la structure des données du graphique. Les données saisies par l'utilisateur ne nécessitent aucun traitement supplémentaire ; VSeed dispose de puissantes capacités de remodelage des données et reformate automatiquement les données. Les données du graphique en anneau sont finalement converties en 1 dimension et 1 mesure.

Champs de dimension

Toutes les dimensions du graphique en anneau sont fusionnées avec les noms de mesures (lorsqu’il existe plusieurs mesures) en une seule dimension, mappées à l’angle du graphique circulaire et affichées comme éléments de légende.

ID du champ correspondant à la dimension

Alias de dimension

Configuration du format de date de la dimension

Granularité temporelle, détermine la précision d’affichage de la date

Canal auquel la dimension est mappée

- color : prend en charge le mapping de plusieurs dimensions vers le canal de couleur

- detail : prend en charge le mapping de plusieurs dimensions vers le canal de détail

- tooltip : permet de mapper plusieurs dimensions au canal d'infobulle

- label : permet de mapper plusieurs dimensions au canal d'étiquette

- row : prend en charge le mapping de plusieurs dimensions vers le canal de ligne

- column : prend en charge le mapping de plusieurs dimensions vers le canal de colonne

Mesures

Toutes les mesures du graphique en anneau sont automatiquement fusionnées en une seule mesure et mappées au rayon du graphique circulaire. Lorsqu'il existe plusieurs mesures, les noms de mesures sont fusionnés avec les autres dimensions et affichés comme éléments de légende.

ID de mesure. Ne peut pas être dupliqué

Alias de mesure. Les doublons sont autorisés. Si non renseigné, alias prend la valeur de id

Formatage automatique des nombres, activé par défaut et prioritaire

Lorsque autoFormat=true, il remplace toutes les configurations numFormat

Lorsqu’il est activé, les étiquettes et infobulles du graphique choisissent automatiquement le format approprié selon les valeurs de mesure et la locale

Règles de formatage : nombres décimaux avec compact notation activée, au minimum 0 décimale, au maximum 2 décimales, arrondi automatique, implémenté avec Intl.NumberFormat du navigateur

Exemple :

- locale=zh-CN: 749740.264 → 74.45万

- locale=en-US: 749740.264 → 744.5K

Formatage numérique personnalisé des mesures, appliqué automatiquement à label et tooltip

Remarque : pour utiliser un formatage personnalisé, définissez explicitement autoFormat=false ; sinon autoFormat remplace cette configuration

Type de format numérique. Prend en charge nombre (décimal), pourcentage (%), pour mille (‰) et notation scientifique

Ratio de formatage numérique. Ne peut pas être 0

Symbole de formatage numérique, par exemple % ou ‰

Séparateur de milliers pour le formatage numérique

Suffixe de formatage numérique

Préfixe de formatage numérique

Décimales du formatage numérique, avec minimumFractionDigits et maximumFractionDigits de Intl.NumberFormat du navigateur. Priorité inférieure à significantDigits

Chiffres significatifs du formatage numérique, avec minimumSignificantDigits et maximumSignificantDigits de Intl.NumberFormat du navigateur. Priorité supérieure à fractionDigits

Priorité d’arrondi du formatage numérique lorsque significantDigits et fractionDigits sont tous deux définis, avec Intl.NumberFormat du navigateur selon les mêmes règles que roundingPriority

Mode d’arrondi du formatage numérique, avec Intl.NumberFormat du navigateur selon les mêmes règles que roundingMode

Type de format numérique. Prend en charge nombre (décimal), pourcentage (%), pour mille (‰) et notation scientifique

Ratio de formatage numérique. Ne peut pas être 0

Symbole de formatage numérique, par exemple % ou ‰

Séparateur de milliers pour le formatage numérique

Suffixe de formatage numérique

Préfixe de formatage numérique

Décimales du formatage numérique, avec minimumFractionDigits et maximumFractionDigits de Intl.NumberFormat du navigateur. Priorité inférieure à significantDigits

Chiffres significatifs du formatage numérique, avec minimumSignificantDigits et maximumSignificantDigits de Intl.NumberFormat du navigateur. Priorité supérieure à fractionDigits

Priorité d’arrondi du formatage numérique lorsque significantDigits et fractionDigits sont tous deux définis, avec Intl.NumberFormat du navigateur selon les mêmes règles que roundingPriority

Mode d’arrondi du formatage numérique, avec Intl.NumberFormat du navigateur selon les mêmes règles que roundingMode

Canal auquel la mesure est mappée

- angle : angle auquel la mesure est mappée

- color : mesure mappée vers le canal de couleur

- label : mesure mappée au canal d'étiquette

- tooltip : mesure mappée au canal d'infobulle

Dans une configuration de mesures plate, construit un groupe de mesures en arbre. parentId pointe vers l'id du groupe de mesures parent et sert à construire l'arbre des mesures

Configuration de pagination, utilisée pour spécifier le nom du champ de pagination, qui doit être une dimension.

Champ de pagination ; indique le nom du champ utilisé pour la pagination et doit être une dimension

Valeur de pagination actuelle ; indique la valeur utilisée pour déterminer la page courante

Couleur d'arrière-plan du graphique

La couleur d'arrière-plan peut être une chaîne de couleur (par ex. 'red', 'blue') ou une valeur hex, rgb ou rgba (par ex. '#ff0000', 'rgba(255,0,0,0.5)')

Couleurs

Configuration des couleurs utilisée pour définir le schéma de couleurs du graphique, notamment la liste des couleurs, le mappage des couleurs, les dégradés, etc.

Palette de couleurs discrètes utilisée pour définir les couleurs des différents éléments du graphique

Palette de couleurs en dégradé linéaire utilisée pour définir les couleurs des différents éléments du graphique

Mappage de couleurs, utilisé pour associer les valeurs de données à des couleurs précises

Configuration des couleurs positif/négatif ; définit la couleur des valeurs positives dans le graphique

Configuration des couleurs positif/négatif ; définit la couleur des valeurs négatives dans le graphique

Étiquette

Configuration des étiquettes de données du graphique, incluant leur position, leur format et leur style.

Indique si les étiquettes sont activées

Indique si les étiquettes passent à la ligne

Indique si les étiquettes affichent les valeurs de mesure

Dans les scénarios à plusieurs mesures, il n’y a pas de risque de valeurs contradictoires, car toutes les mesures liées au rendu sont traitées par foldMeasures et fusionnées en une seule mesure représentant un point de données.

Remarque : encoding.label a une priorité plus élevée ; cette configuration n’affecte pas encoding.label

Indique si les étiquettes affichent le pourcentage des valeurs de mesure

Dans les scénarios à plusieurs mesures, il n’y a pas de risque de valeurs contradictoires, car toutes les mesures liées au rendu sont traitées par foldMeasures et fusionnées en une seule mesure représentant un point de données.

Remarque : encoding.label a une priorité plus élevée ; cette configuration n’affecte pas encoding.label

Indique si les étiquettes affichent les libellés de dimension

Affiche tous les libellés de dimension

Remarque : encoding.label a une priorité plus élevée ; cette configuration n’affecte pas encoding.label

Indique si les valeurs d’étiquette sont formatées automatiquement. Lorsque autoFormat vaut true, la configuration numFormat est ignorée

Configuration du format des valeurs d’étiquette. Elle est fusionnée avec format dans measure ; format dans measure a une priorité plus élevée. numFormat a une priorité inférieure à autoFormat

Type de format numérique. Prend en charge nombre (décimal), pourcentage (%), pour mille (‰) et notation scientifique

Ratio de formatage numérique. Ne peut pas être 0

Symbole de formatage numérique, par exemple % ou ‰

Séparateur de milliers pour le formatage numérique

Suffixe de formatage numérique

Préfixe de formatage numérique

Décimales du formatage numérique, avec minimumFractionDigits et maximumFractionDigits de Intl.NumberFormat du navigateur. Priorité inférieure à significantDigits

Chiffres significatifs du formatage numérique, avec minimumSignificantDigits et maximumSignificantDigits de Intl.NumberFormat du navigateur. Priorité supérieure à fractionDigits

Priorité d’arrondi du formatage numérique lorsque significantDigits et fractionDigits sont tous deux définis, avec Intl.NumberFormat du navigateur selon les mêmes règles que roundingPriority

Mode d’arrondi du formatage numérique, avec Intl.NumberFormat du navigateur selon les mêmes règles que roundingMode

Taille de police de l’étiquette

Graisse de police de l’étiquette

Couleur d’arrière-plan de l’étiquette

Couleur du contour de l’étiquette

Couleur de police de l’étiquette

Indique si la couleur de police de l’étiquette est automatiquement inversée selon la couleur du marqueur

Position de l’étiquette

Indique si l’évitement du chevauchement des étiquettes est activé

Filtre d’étiquette. Par défaut, la relation entre selectors est OR

Champ de dimension, id d’un élément de dimensions

Opérateur

- in : sélectionne les éléments de données dont la valeur du champ de dimension est dans value

- not in : sélectionne les éléments de données dont la valeur du champ de dimension n’est pas dans value

Opérateur

- in : sélectionne les éléments de données dont la valeur du champ de dimension est dans value

- not in : sélectionne les éléments de données dont la valeur du champ de dimension n’est pas dans value

identique à operator

Sélectionne les valeurs du champ de dimension dans les éléments de données. Les tableaux sont pris en charge

Filtre dynamique (exécution de code généré par IA)

Implémente une logique complexe de filtrage des données via du code JavaScript généré par IA

Capacités clés :

- Prend en charge des conditions de filtrage de données arbitrairement complexes

- Utilise des fonctions utilitaires intégrées pour les opérations sur les données

- S’exécute en toute sécurité dans l’environnement navigateur (sandbox Web Worker)

Exigence d’environnement : uniquement pris en charge dans le navigateur ; les environnements Node.js utilisent fallback

Remarque : selector et dynamicFilter ne peuvent pas être utilisés simultanément. dynamicFilter a une priorité plus élevée

Configuration du filtre dynamique du graphique

Utilise du code JavaScript généré par IA pour filtrer les marques du graphique (barres, points, etc.)

Description du besoin de filtrage utilisateur (langage naturel)

Code de filtrage JavaScript généré par IA

- Seules les fonctions utilitaires intégrées peuvent être utilisées (via _ ou R)

- Paramètre d’entrée : data (tableau), chaque item contient le champ __row_index indiquant le numéro de ligne

- Doit retourner un tableau de combinaisons index de ligne et champ : Array<{ __row_index: number, field: string }>

- __row_index indique le numéro de ligne de l’élément de données original, field indique le champ à mettre en évidence

- Interdit : eval, Function, opérations asynchrones, API DOM, requêtes réseau

Fallback lorsque l’exécution du code échoue ou que l’environnement n’est pas pris en charge

Champ de dimension, id d’un élément de dimensions

Opérateur

- in : sélectionne les éléments de données dont la valeur du champ de dimension est dans value

- not in : sélectionne les éléments de données dont la valeur du champ de dimension n’est pas dans value

Opérateur

- in : sélectionne les éléments de données dont la valeur du champ de dimension est dans value

- not in : sélectionne les éléments de données dont la valeur du champ de dimension n’est pas dans value

identique à operator

Sélectionne les valeurs du champ de dimension dans les éléments de données. Les tableaux sont pris en charge

Résultat d’exécution du filtre dynamique (champ runtime)

Écrit pendant prepare(); en lecture seule à l’exécution

Mode de disposition des étiquettes, actif uniquement pour les graphiques en secteurs et en anneau lorsque labelPosition vaut outside

- arc : dispose les étiquettes selon l’arc

- labelLine : aligne les deux extrémités des étiquettes et relie les secteurs aux étiquettes par des lignes de guidage

- edge : aligne les deux extrémités des étiquettes, relie les secteurs aux étiquettes par des lignes de guidage et les rapproche des bords du graphique

Légende

Configuration de la légende du graphique, incluant sa position, son format et son style.

Indique si la légende est activée

Indique si la bordure de légende est activée

Couleur de police de la légende

Couleur de l’icône du pager

Couleur de l’icône du pager désactivée

Taille de police de la légende

Couleur de police de la légende

Graisse de police de la légende

Forme de la légende

Position de la légende

Nombre maximal de colonnes ou de lignes lorsqu’il y a beaucoup d’éléments de légende

Si position est horizontale (bottom, bottomLeft, bottomRight, bl, br, top, topLeft, topRight, tl, tr), maxSize contrôle le nombre de colonnes affichées

Si position est verticale (left, leftTop, leftBottom, lt, lb, right, rightTop, rightBottom, rt, rb), maxSize contrôle le nombre de lignes affichées

Infobulle

Configuration des infobulles du graphique, incluant leur position, leur format et leur style.

Indique si les infobulles sont activées

Sélection par brush

Configuration du brush utilisée pour activer ou désactiver la sélection par brush.

Configuration de sélection par brush du graphique

Indique si la sélection par brush est activée

Type de brush

Définit la forme de la zone de sélection et la direction de sélection.

- rect : sélection rectangulaire, possible simultanément dans les directions X et Y

- polygon : sélection polygonale, dessine un polygone libre en cliquant plusieurs points

- x : sélection dans la direction de l’axe X uniquement, sans contrainte sur Y

- y : sélection dans la direction de l’axe Y uniquement, sans contrainte sur X

Mode de brush, sélection simple ou multiple

Définit le mode de sélection.

- single : mode sélection simple ; une seule zone de sélection peut exister à la fois

- multiple : mode sélection multiple ; plusieurs zones de sélection peuvent exister simultanément

Indique si la zone de brush est effacée à la fin de la sélection

Style des données dans la zone de brush

Définit le style des points de données sélectionnés

Opacité

Opacité des points de données sélectionnés, valeur comprise entre 0 et 1

Couleur du trait

Largeur du trait

Style des données hors de la zone de brush

Définit le style des points de données non sélectionnés

Opacité

Opacité des points de données non sélectionnés, valeur comprise entre 0 et 1

Couleur du trait

Largeur du trait

Configuration d’animation

Configuration des animations du graphique ; les effets disponibles sont contraints par le type de graphique

Indique s’il faut activer l’animation des graphiques en secteurs/en anneau/en rose

Paramètres d’animation des graphiques en secteurs/en anneau/en rose

Configuration de l’animation d’entrée des graphiques en secteurs/en anneau/en rose

Effet d’entrée des graphiques en secteurs/en anneau/en rose, avec prise en charge des animations radiales et de zoom

Indique si l’étape d’animation actuelle est activée

Fonction easing de l’animation

Durée de l’animation, en millisecondes

Couleur de surbrillance ou d’ambiance de l’animation

Configuration de l’animation de mise à jour des graphiques en secteurs/en anneau/en rose

Effet de mise à jour des graphiques en secteurs/en anneau/en rose, avec prise en charge de l’animation radiale

Indique si l’étape d’animation actuelle est activée

Fonction easing de l’animation

Durée de l’animation, en millisecondes

Couleur de surbrillance ou d’ambiance de l’animation

Configuration de l’animation en boucle des graphiques en secteurs/en anneau/en rose

Indique si l’animation en boucle est activée

Intervalle de l’animation en boucle, en millisecondes

Configuration de l’animation en boucle des graphiques en secteurs/en anneau/en rose

Effet de boucle des graphiques en secteurs/en anneau/en rose

Indique si l’étape d’animation actuelle est activée

Fonction easing de l’animation

Durée de l’animation, en millisecondes

Couleur de surbrillance ou d’ambiance de l’animation

Configuration de l’animation d’ambiance des graphiques en secteurs/en anneau/en rose

Fonction easing de l’animation d’ambiance

Couleur de l’animation d’ambiance

Thème du graphique. Le thème est une configuration fonctionnelle de priorité plus faible, comprenant les configurations communes à tous les types de graphiques et les configurations partagées par un type de graphique

Les thèmes intégrés light et dark sont disponibles. Les utilisateurs peuvent personnaliser les thèmes via Builder

Thème

Les thèmes intégrés light et dark sont disponibles. De nouveaux thèmes peuvent être personnalisés via registerTheme.

Langue

Configuration de langue du graphique. Prend en charge 'zh-CN' et 'en-US' ; vous pouvez aussi appeler intl.setLocale('zh-CN') pour définir la langue