#TreeMap

Le graphique treemap sert à afficher des données hiérarchiques, la taille de chaque zone rectangulaire représentant sa valeur numérique.

Scénarios adaptés :

- Afficher la répartition en pourcentage de données hiérarchiques

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

Graphique treemap

Graphique treemap affichant les relations proportionnelles des données hiérarchiques.

Jeu de données

Jeu de données agrégé conforme aux spécifications TidyData, utilisé pour définir la source et la structure des données du graphique.

Champs de dimension

Configuration des dimensions utilisée pour définir la structure hiérarchique des données.

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

- hierarchy : permet de mapper plusieurs dimensions au canal hiérarchique

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

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

Mesures

Configuration des mesures utilisée pour définir la taille (surface) des secteurs.

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

- size : mesure mappée au canal de taille, utilisée pour afficher la surface ou la taille dans les graphiques comme Treemap et Sunburst.

- 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é pour spécifier le nom du champ de pagination ; doit être une dimension

Champ de pagination ; spécifie le nom du champ pour la pagination, doit être une dimension

Valeur de pagination actuelle ; spécifie 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

Configuration des couleurs pour définir la palette du graphique, y compris les listes, mappages et dégradés de couleurs.

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

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

Mappage de couleurs utilisé pour associer des valeurs de données à des couleurs spécifiques

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

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

Étiquette

Configuration des étiquettes pour définir les étiquettes de données du graphique, y compris leur position, format et style.

Indique si la fonction d'étiquette est activée

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 conflit de valeurs, car toutes les mesures liées au tracé passent par foldMeasures et sont fusionnées en une seule mesure représentant un point de données

Remarque : le label d'encoding a une priorité plus élevée ; cette configuration n'affecte pas le label d'encoding

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

Dans les scénarios à plusieurs mesures, il n'y a pas de conflit de valeurs, car toutes les mesures liées au tracé passent par foldMeasures et sont fusionnées en une seule mesure représentant un point de données

Remarque : le label d'encoding a une priorité plus élevée ; cette configuration n'affecte pas le label d'encoding

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

Afficher tous les libellés de dimension

Remarque : le label d'encoding a une priorité plus élevée ; cette configuration n'affecte pas le label d'encoding

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 ; fusionnée avec format dans measure, où le format de measure a une priorité plus élevée. La priorité de numFormat est inférieure à autoFormat

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

Étiquette font size

Étiquette font weight

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

Couleur de contour de l'étiquette

ÉtiquettefontCouleur

Indique si la couleur de police de l'étiquette s'inverse automatiquement selon la couleur de l'élément graphique

Position de l'étiquette

Indique si la fonction anti-chevauchement des étiquettes est activée

Étiquette filtering; the default relationship between selectors is OR

Champ de dimension ; ID d'un élément de dimension spécifique

Opérateur

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

- not in : sélectionne les éléments de données dont la valeur du champ de dimension n'est pas incluse dans la valeur spécifiée

Opérateur

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

- not in : sélectionne les éléments de données dont la valeur du champ de dimension n'est pas incluse dans la valeur spécifiée

identique à operator

Sélectionne les valeurs de champ de dimension ; prend en charge les tableaux

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

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

Fonctionnalités principales :

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

- Utilise les fonctions utilitaires intégrées pour manipuler les données

- Exécution sécurisée dans l'environnement navigateur (bac à sable Web Worker)

Exigences d'environnement : prend uniquement en charge les environnements 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

Implémente le filtrage des marques du graphique (barres, points, etc.) via du code JavaScript généré par IA

Description des besoins de filtrage de l'utilisateur (langage naturel)

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

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

- Paramètres d'entrée : data (tableau), chaque élément incluant un champ __row_index représentant le numéro de ligne

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

- __row_index représente le numéro de ligne de l'élément de données d'origine ; field représente le champ à mettre en évidence

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

Plan de 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 dimension spécifique

Opérateur

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

- not in : sélectionne les éléments de données dont la valeur du champ de dimension n'est pas incluse dans la valeur spécifiée

Opérateur

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

- not in : sélectionne les éléments de données dont la valeur du champ de dimension n'est pas incluse dans la valeur spécifiée

identique à operator

Sélectionne les valeurs de champ de dimension ; prend en charge les tableaux

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

Écrit pendant la phase prepare() ; lecture seule à l'exécution

Infobulles

Configuration des infobulles, utilisée pour définir les infobulles du graphique, y compris leur position, format, style, etc.

Indique si les infobulles sont activées

Thème du graphique ; les thèmes ont une priorité plus faible et incluent les configurations communes à tous les types de graphiques ainsi que les configurations propres à chaque catégorie

Thèmes clair et sombre intégrés ; les utilisateurs peuvent définir des thèmes personnalisés via le Builder

Thème

Thèmes clair et sombre intégrés ; de nouveaux thèmes peuvent être personnalisés via registerTheme.

Langue

Configuration de langue du graphique ; prend en charge 'zh-CN' et 'en-US'. La méthode intl.setLocale('zh-CN') peut aussi être appelée pour définir la langue.