#Pie

Graphique en secteurs, adapté à l’affichage des proportions de données d’une seule dimension, en représentant la part de chaque catégorie par la surface des secteurs.

Scénarios d’utilisation :

- Afficher la distribution proportionnelle de données catégorielles

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

- Analyse de proportions avec un petit nombre de catégories (6 au maximum recommandé)

Graphique en secteurs

Graphique en secteurs, affichant les proportions de données d’une seule dimension

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 prétraitement ; VSeed dispose de puissantes capacités de restructuration des données et effectue cette restructuration automatiquement. Les données du graphique en secteurs sont finalement converties en 1 dimension et 1 mesure.

Champs de dimension

Toutes les dimensions du graphique en secteurs sont fusionnées avec les noms de mesures s’il existe plusieurs mesures pour former une seule dimension, mappée sur l’angle, puis affichées comme éléments de légende

ID de 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 secteurs sont automatiquement fusionnées en une seule mesure et mappées sur l’axe radial. S’il existe plusieurs mesures, leurs noms sont fusionnés avec les autres dimensions et affichés comme éléments de légende.

ID de mesure, doit être unique

Alias de mesure, doublons autorisés ; s'il n'est pas défini, alias vaut id

Formatage numérique automatique, activé par défaut, priorité la plus élevée

Lorsque autoFormat=true, toutes les configurations numFormat sont remplacées

Lorsqu'il est activé, les étiquettes de données et les infobulles choisissent automatiquement le format adapté selon les valeurs de mesure et la locale

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

Par exemple :

- locale=zh-CN: 749740.264 → 74.45万

- locale=en-US: 749740.264 → 744.5K

Formatage numérique personnalisé pour les mesures ; appliqué automatiquement aux étiquettes et infobulles

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

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

Ratio de format numérique, ne peut pas être 0

Symbole de format numérique, par ex. %, ‰

Séparateur des milliers pour le formatage numérique

Suffixe de format numérique

Préfixe de format numérique

Nombre de décimales pour le formatage numérique, utilise minimumFractionDigits et maximumFractionDigits de Intl.NumberFormat du navigateur ; priorité inférieure à significantDigits

Chiffres significatifs pour le formatage numérique, utilise 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 ; utilise Intl.NumberFormat du navigateur et suit les mêmes règles que roundingPriority

Mode d'arrondi du formatage numérique, utilise Intl.NumberFormat du navigateur et suit les mêmes règles que roundingMode

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

Ratio de format numérique, ne peut pas être 0

Symbole de format numérique, par ex. %, ‰

Séparateur des milliers pour le formatage numérique

Suffixe de format numérique

Préfixe de format numérique

Nombre de décimales pour le formatage numérique, utilise minimumFractionDigits et maximumFractionDigits de Intl.NumberFormat du navigateur ; priorité inférieure à significantDigits

Chiffres significatifs pour le formatage numérique, utilise 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 ; utilise Intl.NumberFormat du navigateur et suit les mêmes règles que roundingPriority

Mode d'arrondi du formatage numérique, utilise Intl.NumberFormat du navigateur et suit 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)')

Couleur

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

Configuration des étiquettes pour définir les étiquettes de données du graphique, y compris leur position, format et 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

Indique si la sélection brush est activée

Indique si les infobulles sont activées

Mode de selection par brush : simple ou multiple

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

Opacité of selected data points, range 0-1

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

Axe X, axe categoriel, configuration de l axe X ; definit l axe X du graphique, notamment sa position, son format, son style, etc.

- 100000 devient 10万, ratio:10000, symbol:"万"

Couleur du trait

Largeur du trait

Intervalle de masquage automatique des etiquettes d axe ; si l intervalle entre deux etiquettes est inferieur a autoHideGap, l etiquette en chevauchement est masquee automatiquement. Effectif uniquement pour les axes categoriels.

Lorsque autoHide est desactive, utilisez l echantillonnage configure sur minGap

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

Sélecteur de données. S’il est configuré, il fournit des capacités de correspondance pour les valeurs numériques, les éléments de données partiels, les dimensions ou les mesures. S’il n’est pas défini, les styles s’appliquent globalement.

const maxItems = _.map(grouped, group =>

_.map(maxItems, item => [

Langue

Configuration de la langue du graphique, prenant en charge 'zh-CN' et 'en-US'. Il est aussi possible d’appeler intl.setLocale('zh-CN') pour définir la langue