Présentation
Représentation visuelle d'une arborescence de données, où chaque nœud peut avoir zéro ou plusieurs enfants, et un parent (à l'exception de la racine, qui n'a pas de parent). Chaque nœud s'affiche sous la forme d'un rectangle, de taille et de couleur en fonction des valeurs que vous attribuez. Les tailles et les couleurs sont évaluées par rapport à tous les autres nœuds du graphique. Vous pouvez spécifier le nombre de niveaux à afficher simultanément et éventuellement des niveaux plus profonds. Si un nœud est un nœud feuille, vous pouvez spécifier une taille et une couleur. S'il ne s'agit pas d'une feuille, il s'affichera en tant que cadre de délimitation pour les nœuds feuilles. Le comportement par défaut consiste à descendre dans l'arborescence lorsqu'un utilisateur effectue un clic gauche sur un nœud, et à remonter dans l'arborescence lorsqu'un utilisateur effectue un clic droit sur le graphique.
La taille totale du graphique est déterminée par la taille de l'élément conteneur que vous insérez dans votre page. Si certains de vos nœuds feuilles sont trop longs pour être affichés, ils sont tronqués par des points de suspension (...).
Exemple
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['treemap']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
['Global', null, 0, 0],
['America', 'Global', 0, 0],
['Europe', 'Global', 0, 0],
['Asia', 'Global', 0, 0],
['Australia', 'Global', 0, 0],
['Africa', 'Global', 0, 0],
['Brazil', 'America', 11, 10],
['USA', 'America', 52, 31],
['Mexico', 'America', 24, 12],
['Canada', 'America', 16, -23],
['France', 'Europe', 42, -11],
['Germany', 'Europe', 31, -2],
['Sweden', 'Europe', 22, -13],
['Italy', 'Europe', 17, 4],
['UK', 'Europe', 21, -5],
['China', 'Asia', 36, 4],
['Japan', 'Asia', 20, -12],
['India', 'Asia', 40, 63],
['Laos', 'Asia', 4, 34],
['Mongolia', 'Asia', 1, -5],
['Israel', 'Asia', 12, 24],
['Iran', 'Asia', 18, 13],
['Pakistan', 'Asia', 11, -52],
['Egypt', 'Africa', 21, 0],
['S. Africa', 'Africa', 30, 43],
['Sudan', 'Africa', 12, 2],
['Congo', 'Africa', 10, 12],
['Zaire', 'Africa', 8, 10]
]);
tree = new google.visualization.TreeMap(document.getElementById('chart_div'));
tree.draw(data, {
minColor: '#f00',
midColor: '#ddd',
maxColor: '#0d0',
headerHeight: 15,
fontColor: 'black',
showScale: true
});
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Points forts
Vous pouvez spécifier si les éléments doivent être mis en surbrillance et définir des couleurs spécifiques pour certains éléments à utiliser lorsque cela se produit. Pour activer la mise en surbrillance, définissez highlightOnMouseOver:true (pour la version 49 ou antérieure) ou enableHighlight: true (pour la version 50 ou ultérieure). Vous pouvez alors définir les couleurs à utiliser pour mettre en évidence les éléments à l'aide des différentes options HighlightColor.
var options = { // For v49 or before
highlightOnMouseOver: true,
maxDepth: 1,
maxPostDepth: 2,
minHighlightColor: '#8c6bb1',
midHighlightColor: '#9ebcda',
maxHighlightColor: '#edf8fb',
minColor: '#009688',
midColor: '#f7f7f7',
maxColor: '#ee8100',
headerHeight: 15,
showScale: true,
height: 500,
useWeightedAverageForAggregation: true
};
var optionsV50 = { // For v50+
enableHighlight: true,
maxDepth: 1,
maxPostDepth: 2,
minHighlightColor: '#8c6bb1',
midHighlightColor: '#9ebcda',
maxHighlightColor: '#edf8fb',
minColor: '#009688',
midColor: '#f7f7f7',
maxColor: '#ee8100',
headerHeight: 15,
showScale: true,
height: 500,
useWeightedAverageForAggregation: true,
// Use click to highlight and double-click to drill down.
eventsConfig: {
highlight: ['click'],
unhighlight: ['mouseout'],
rollup: ['contextmenu'],
drilldown: ['dblclick'],
}
};
Info-bulles
Par défaut, les info-bulles de la carte proportionnelle sont de base et affichent le libellé de la cellule de carte proportionnelle. Cela s'avère utile lorsque les cellules sont trop petites pour contenir les étiquettes, mais vous pouvez les personnaliser davantage comme décrit dans cette section.
Les info-bulles Treemap sont personnalisées différemment des autres graphiques: vous définissez une fonction, puis définissez l'option generateTooltip sur cette fonction. Prenons un exemple simple :
Dans le graphique ci-dessus, nous définissons une fonction appelée showStaticTooltip qui renvoie simplement une chaîne avec le code HTML à afficher lorsque l'utilisateur pointe sur une cellule de carte proportionnelle. Essayer Le code à générer est le suivant:
var options = {
minColor: '#e7711c',
midColor: '#fff',
maxColor: '#4374e0',
showScale: true,
generateTooltip: showStaticTooltip
};
tree.draw(data, options);
function showStaticTooltip(row, size, value) {
return '<div style="background:#fd9; padding:10px; border-style:solid">' +
'Read more about the <a href="http://en.wikipedia.org/wiki/Kingdom_(biology)">kingdoms of life</a>.</div>';
}
La fonction generateTooltip peut être n'importe quel code JavaScript. Généralement, vous aurez besoin d'info-bulles qui varient en fonction des valeurs des données. L'exemple suivant montre comment accéder à chaque champ du tableau de données.
Si vous pointez sur les cellules de la carte proportionnelle ci-dessus, une info-bulle différente s'affiche pour chaque cellule. Les fonctions de l'info-bulle "treemap" utilisent toutes trois valeurs : row, size et value.
row: ligne de la cellule dans le tableau de donnéessize: somme de la valeur (colonne 3) de cette cellule et de tous ses enfantsvalue: couleur de la cellule, exprimée par un nombre compris entre 0 et 1
Dans showFullTooltip, la chaîne renvoyée est une zone HTML avec cinq lignes:
- La ligne 1 affiche la ligne appropriée de la table de données, utilisant ainsi
data.getValuede façon libérale. - La ligne 2 vous indique la ligne qui correspond au paramètre
row. - La ligne 3 vous fournit des informations de la colonne 3 de la table de données: la somme de la valeur de la colonne 3 de cette ligne, plus les valeurs des descendants.
- La ligne 4 vous donne les informations de la colonne 4 du tableau de données. Il s'agit de la valeur, mais exprimée sous la forme d'un nombre compris entre 0 et 1 correspondant à la couleur de la cellule.
var options = {
minColor: '#e7711c',
midColor: '#fff',
maxColor: '#4374e0',
showScale: true,
generateTooltip: showFullTooltip
};
tree.draw(data, options);
function showFullTooltip(row, size, value) {
return '<div style="background:#fd9; padding:10px; border-style:solid">' +
'<span style="font-family:Courier"><b>' + data.getValue(row, 0) +
'</b>, ' + data.getValue(row, 1) + ', ' + data.getValue(row, 2) +
', ' + data.getValue(row, 3) + '</span><br>' +
'Datatable row: ' + row + '<br>' +
data.getColumnLabel(2) +
' (total value of this cell and its children): ' + size + '<br>' +
data.getColumnLabel(3) + ': ' + value + ' </div>';
}
}
Chargement...
Le nom du package google.charts.load est "treemap".
google.charts.load("current", {packages: ["treemap"]});
Le nom de classe de la visualisation est google.visualization.TreeMap.
var visualization = new google.visualization.TreeMap(container);
Format des données
Chaque ligne du tableau de données décrit un nœud (un rectangle dans le graphique). Chaque nœud (à l'exception du nœud racine) a un nœud parent. Chaque nœud est dimensionné et coloré en fonction de ses valeurs par rapport aux autres nœuds actuellement affichés.
Le tableau de données doit comporter quatre colonnes au format suivant:
- Colonne 0 – [chaîne] ID pour ce nœud. Il peut s'agir de n'importe quelle chaîne JavaScript valide, y compris d'espaces, et de toutes les longueurs qu'elle peut contenir. Cette valeur s'affiche en tant qu'en-tête de nœud.
- Colonne 1 - [chaîne] - ID du nœud parent. S'il s'agit d'un nœud racine, laissez ce champ vide. Une seule racine est autorisée par carte proportionnelle.
- Colonne 2 - [nombre] : taille du nœud. Toute valeur positive est autorisée. Cette valeur détermine la taille du nœud, calculée par rapport à tous les autres nœuds actuellement affichés. Pour les nœuds non-feuilles, cette valeur est ignorée et calculée à partir de la taille de tous ses enfants.
- Colonne 3 : [facultatif, nombre] : valeur facultative permettant de calculer une couleur pour ce nœud. Toute valeur, positive ou négative, est autorisée.
La valeur de couleur est d'abord recalculée sur une échelle allant de
minColorValueàmaxColorValue, puis une couleur du gradient entreminColoretmaxColorest attribuée au nœud.
Options de configuration
| Nom | |
|---|---|
| enablehighlight (v50+) |
Détermine si les éléments doivent mettre en évidence les effets appliqués. Le déclencheur par défaut se produit lorsque l'utilisateur passe la souris dessus.
Le déclencheur peut être configuré avec Type : booléen
Par défaut : false
|
| eventsConfig (pour les versions v50 et ultérieures) |
Configuration de l'événement pour déclencher des interactions de mappage d'arborescence. Format permettant de configurer les interactions:
eventsConfig: {
interaction1: undefined, // or missing
interaction2: [], // disable
interaction3: [
'mouse_event',
'optional_key1',
'optional_key2',
'optional_key3',
'optional_key4'
],
...,
}
Si le tableau de configuration n'est pas défini ou est manquant pour une interaction, la valeur default sera utilisée.
Si la configuration est un tableau vide, l'interaction sera désactivée.
Pour une configuration valide,
mouse_event est obligatoire et doit être un événement de souris compatible. Vous pouvez ensuite ajouter jusqu'à quatre modificateurs de touche facultatifs.
Exemple d'utilisation de la combinaison Ctrl+Maj+clic droit pour monter dans l'arborescence:
{ rollup: ['contextmenu', 'ctrlKey', 'shiftKey'] }Type:objet
Par défaut :
{
highlight: ['mouseover'],
unhighlight: ['mouseout'],
rollup: ['contextmenu'], // right-click
drilldown: ['click']
}
|
| Couleur de police |
Couleur du texte. Spécifiez une valeur de couleur HTML. Type : chaîne
Par défaut : #ffffff
|
| Famille de polices |
Famille de polices à utiliser pour tous les textes. Type : chaîne
Par défaut : auto
|
| Taille de police |
Taille de police de l'ensemble du texte, en points. Type : nombre
Par défaut : 12
|
| Forcer le cadre iFrame |
Dessine le graphique dans un cadre intégré. (Notez que dans IE8, cette option est ignorée. Tous les graphiques IE8 sont dessinés dans des cadres iFrame.) Type : booléen
Par défaut : false
|
| Couleur de l'en-tête |
Couleur de la section d'en-tête de chaque nœud. Spécifiez une valeur de couleur HTML. Type:chaîne
Par défaut : #988f86
|
| hauteurHauteur |
Hauteur en pixels de la section d'en-tête de chaque nœud (peut être zéro). Type (nombre)
Par défaut:0
|
| en-têteSurCouleur |
Couleur de l'en-tête d'un nœud sur lequel on pointe. Spécifiez une valeur de couleur HTML ou la valeur NULL. Si la valeur est null, cette valeur sera Type : chaîne
Par défaut : null
|
| highlightOnMouseOver (obsolète pour les versions 50 et ultérieures) |
Obsolète pour les versions 50 et ultérieures. Pour les versions 50 et ultérieures, veuillez utiliser Type : booléen
Par défaut:false
|
| hintOpacity |
Lorsque Type : nombre
Par défaut:0.0
|
| Couleur max. |
Couleur d'un rectangle dont la valeur de colonne 3 est Type:chaîne
Par défaut : #00dd00
|
| maxDepth |
Nombre maximal de niveaux de nœuds à afficher dans la vue actuelle. Les niveaux seront aplatis dans le plan actuel. Si votre arbre comporte plusieurs niveaux, vous devez monter ou descendre pour les voir. En outre, les niveaux Type:nombre
Par défaut : 1
|
| CouleurSurligne max |
Couleur de surlignage à utiliser pour le nœud dont la valeur est la plus élevée dans la colonne 3. Spécifiez une valeur de couleur HTML ou la valeur null. Si elle est nulle, la valeur de Type : chaîne
Par défaut : null
|
| MaxPostDepth |
Nombre de nœuds au-delà de Type : nombre
Par défaut:0
|
| ValeurMaxColor |
Valeur maximale autorisée dans la colonne 3. Toutes les valeurs supérieures seront tronquées à cette valeur. Si la valeur est définie sur null, elle est définie sur la valeur maximale de la colonne. Type:nombre
Par défaut:null
|
| mi-couleur |
Couleur d'un rectangle avec une valeur de colonne 3 à mi-chemin entre Type : chaîne
Par défaut : #000000
|
| couleur_médium |
Couleur de surlignage à utiliser pour le nœud avec une valeur de colonne 3 proche de la médiane de Type : chaîne
Par défaut:null
|
| Couleur min |
Couleur d'un rectangle avec la valeur de la colonne 3 Type:chaîne
Par défaut : #dd0000
|
| Couleur en surbrillance min |
Couleur de surlignage à utiliser pour le nœud dont la valeur de colonne 3 est la plus proche de Type : chaîne
Par défaut:null
|
| Valeur min. couleur |
Valeur minimale autorisée dans la colonne 3. Toutes les valeurs inférieures seront tronquées à cette valeur. Si la valeur est définie sur null, elle est calculée comme valeur minimale de la colonne. Type : nombre
Par défaut : null
|
| NoColor |
Couleur à utiliser pour un rectangle lorsqu'un nœud n'a pas de valeur pour la colonne 3 et que ce nœud est une feuille (ou ne contient que des feuilles). Spécifiez une valeur de couleur HTML. Type:chaîne
Par défaut : #000000
|
| AucuneSurCouleur |
Couleur à utiliser pour un rectangle de couleur "non" lorsqu'elle est en surbrillance. Spécifiez une valeur de couleur HTML ou la valeur null ; si la valeur est null, il s'agit de la valeur de Type:chaîne
Par défaut:null
|
| showScale |
Indique si un dégradé de couleur entre Type : booléen
Par défaut : false
|
| info-bulles |
Afficher ou non les info-bulles. Type:booléen
Par défaut:true
|
| styletexte |
Objet spécifiant le style de texte, pour certains graphiques contenant du texte dans la zone de contenu, comme la carte proportionnelle. L'objet a le format suivant:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Le Type : objet
Par défaut :
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| title |
Texte à afficher au-dessus du graphique. Type : chaîne
Par défaut : pas de titre
|
| titreTexteStyle |
Objet spécifiant le style du titre. L'objet a le format suivant:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Le Type : objet
Par défaut:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| useWeightedAverageForAggregation |
Indique si les moyennes pondérées doivent être agrégées. Type : booléen
Par défaut : false
|
Méthodes
| Méthode | |
|---|---|
draw(data, options) |
Dessine le graphique. Return Type (Type de retour) : aucun
|
getEventsConfig() (for v50+) |
Renvoie la configuration de l'interaction actuelle. Il permet de vérifier l'option de configuration Return Type (Type de retour) : Object (Objet)
{ // An empty array (i.e. []) means the interaction is disabled.
highlight: string[],
unhighlight: string[],
rollup: string[],
drilldown: string[] }
|
getSelection() |
Implémentation Type de renvoi:tableau des éléments de sélection
|
setSelection() |
Implémentation Return Type (Type de retour) : aucun
|
goUpAndDraw() |
Montez l'arbre d'un niveau et redessinez-le. Ne génère pas d'erreur si le nœud est le nœud racine. Elle se déclenche automatiquement lorsque l'utilisateur fait un clic droit sur un nœud. Return Type (Type de retour) : aucun
|
getMaxPossibleDepth() |
Renvoie la profondeur maximale de la vue actuelle. Return Type (Type de retour) : nombre
|
clearChart() |
Efface le graphique et libère toutes ses ressources allouées. Return Type (Type de retour) : aucun
|
Événements
eventsConfig pour connaître les déclencheurs d'événements configurables.| Nom | |
|---|---|
onmouseover |
Déclenché lorsque l'utilisateur passe la souris sur un nœud Le gestionnaire d'événements reçoit l'index de ligne de l'entrée correspondante dans la table de données. Properties (Propriétés) : ligne
|
highlight (for v50+) |
Déclenché lorsque l'utilisateur met un nœud en surbrillance. Le déclencheur par défaut est le survol avec la souris.
Il peut être configuré avec Properties (Propriétés) : ligne
|
onmouseout |
Déclenché lorsque l'utilisateur sort d'un nœud Le gestionnaire d'événements reçoit l'index de ligne de l'entrée correspondante dans la table de données. Properties (Propriétés) : ligne
|
unhighlight (for v50+) |
Déclenché lorsque l'utilisateur annule la mise en surbrillance d'un nœud Le déclencheur par défaut est "mouseout".
Il peut être configuré avec Properties (Propriétés) : ligne
|
ready |
Déclenché lorsque le graphique est prêt pour les appels de méthode externe Si vous souhaitez interagir avec le graphique et appeler des méthodes après l'avoir tracé, vous devez configurer un écouteur pour cet événement avant d'appeler la méthode Properties (Propriétés) : aucune
|
rollup |
Déclenché lorsque l'utilisateur revient dans l'arborescence Le déclencheur par défaut est un clic droit.
Elle peut être configurée avec Properties (Propriétés) : ligne
|
select |
Déclenché lorsque l'utilisateur explore ou fait défiler un nœud Se déclenche également lorsque la méthode Properties (Propriétés) : aucune
|
drilldown (for v50+) |
Déclenché lorsque l'utilisateur navigue plus profondément dans l'arborescence Le déclencheur par défaut est un clic.
Elle peut être configurée avec Properties (Propriétés) : aucune
|
Règles relatives aux données
L'ensemble du code et des données est traité et affiché dans le navigateur. Aucune donnée n'est envoyée à un serveur.