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 parents). Chaque nœud s'affiche sous la forme d'un rectangle, dimensionné et coloré 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 afficher des niveaux plus profonds avec des indications. 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 sera affiché sous la forme d'un 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 les noms de certains nœuds feuilles sont trop longs pour être affichés, ils seront tronqués avec 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 indiquer si les éléments doivent être mis en surbrillance et définir des couleurs spécifiques pour certains d'entre eux. Pour activer la mise en surbrillance, définissez highlightOnMouseOver:true (pour les versions 49 et antérieures) ou enableHighlight: true (pour les versions 50 et ultérieures). Vous pouvez alors définir les couleurs à utiliser pour mettre en avant 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 pour la carte proportionnelle sont basiques et affichent le libellé de la cellule de la carte proportionnelle. Cela est utile lorsque les cellules sont trop petites pour contenir les libellés, mais vous pouvez les personnaliser davantage, comme décrit dans cette section.
Les info-bulles de carte proportionnelle sont personnalisées différemment des autres graphiques: vous définissez une fonction, puis vous 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 contenant le code HTML à afficher chaque fois que 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>';
}
Vous pouvez utiliser n'importe quel code JavaScript dans la fonction generateTooltip. En règle générale, vous avez 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'affichera pour chaque cellule. Les fonctions d'info-bulle de la carte proportionnelle ont 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 sous la forme d'un nombre compris entre 0 et 1
Dans showFullTooltip, la chaîne renvoyée est une zone HTML de cinq lignes:
- La ligne 1 affiche la ligne appropriée du tableau de données en utilisant généreusement
data.getValue. - La ligne 2 vous indique de quelle ligne il s'agit. Il s'agit simplement du paramètre
row. - La ligne 3 fournit les informations de la colonne 3 du tableau 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 avoir quatre colonnes au format suivant:
- Colonne 0 - [chaîne] ID de ce nœud. Il peut s'agir de n'importe quelle chaîne JavaScript valide, espaces compris, et de n'importe quelle longueur qu'une chaîne peut contenir. Cette valeur s'affiche en tant qu'en-tête du 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 la couleur est d'abord recalculée sur une échelle allant de
minColorValueàmaxColorValue, puis une couleur issue du dégradé est attribuée au nœud à partir du dégradé entreminColoretmaxColor.
Options de configuration
| Nom | |
|---|---|
| enableHighlight (pour v50+) |
Détermine si les éléments doivent afficher des effets en surbrillance. Le déclencheur par défaut a lieu lorsque l'utilisateur passe la souris dessus.
Le déclencheur peut être configuré avec Type:booléen
Par défaut : "false"
|
| eventConfig (pour v50+) |
Configuration de l'événement permettant de déclencher des interactions d'arborescence. Format pour 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 s'il est manquant pour une interaction, la valeur default est utilisée.
Si la configuration est un tableau vide, l'interaction est 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 touches de modification facultatives.
Par exemple, utilisez Ctrl+Maj+Clic droit pour remonter dans l'arborescence:
{ rollup: ['contextmenu', 'ctrlKey', 'shiftKey'] }Type:objet
Par défaut:
{
highlight: ['mouseover'],
unhighlight: ['mouseout'],
rollup: ['contextmenu'], // right-click
drilldown: ['click']
}
|
| fontColor |
Couleur du texte. Spécifiez une valeur de couleur HTML. Type:chaîne
Par défaut : #ffffff
|
| fontFamily |
Famille de polices à utiliser pour tout le texte. Type:chaîne
Par défaut:auto
|
| fontSize |
Taille de police de tout le texte, en points. Type:nombre
Par défaut:12
|
| forceIFrame |
Dessine le graphique dans un cadre intégré. Notez que dans IE8, cette option est ignorée, car tous les graphiques IE8 sont dessinés dans des i-frames. Type:booléen
Par défaut : "false"
|
| headerColor |
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
|
| headerHeight |
Hauteur de la section d'en-tête de chaque nœud, en pixels (elle peut être égale à zéro). Saisissez le numéro
Par défaut:0
|
| headerHighlightColor |
Couleur de l'en-tête d'un nœud sur lequel vous pointez. Spécifiez une valeur de couleur HTML ou une valeur nulle. Si la valeur est nulle, cette valeur sera Type:chaîne
Par défaut:null
|
| highlightOnMouseOver (obsolète pour les versions v50+) |
Obsolète pour les versions 50 et ultérieures. Pour les versions v50 et ultérieures, veuillez utiliser Type:booléen
Par défaut : "false"
|
| hintOpacity |
Lorsque Type:nombre
Par défaut:0.0
|
| maxColor |
Couleur d'un rectangle dont la valeur de la colonne 3 est Type:chaîne
Par défaut : #00dd00
|
| maxDepth |
Nombre maximal de niveaux de nœud à afficher dans la vue actuelle. Les niveaux seront aplatis dans le plan actuel. Si l'arborescence comporte plusieurs niveaux, vous devez monter ou descendre pour les afficher. Vous pouvez également voir Type:nombre
Par défaut : 1
|
| maxHighlightColor |
Couleur de mise en surbrillance à utiliser pour le nœud avec la valeur la plus élevée dans la colonne 3. Spécifiez une valeur de couleur HTML ou une valeur nulle. Si la valeur est nulle, cette valeur correspondra à la valeur de Type:chaîne
Par défaut:null
|
| maxPostDepth |
Nombre de niveaux de nœuds au-delà de Type:nombre
Par défaut:0
|
| maxColorValue |
Valeur maximale autorisée dans la colonne 3. Toutes les valeurs supérieures à cette valeur seront réduites à cette valeur. S'il est défini sur "null", il sera défini sur la valeur maximale de la colonne. Type:nombre
Par défaut:null
|
| midColor |
Couleur d'un rectangle dont la valeur de la colonne 3 se situe à mi-chemin entre Type:chaîne
Par défaut : #000000
|
| midHighlightColor |
Couleur de mise en surbrillance à utiliser pour le nœud dont la valeur de colonne 3 est proche de la médiane de Type:chaîne
Par défaut:null
|
| minColor |
Couleur d'un rectangle avec la valeur Type:chaîne
Par défaut : #dd0000
|
| minHighlightColor |
Couleur de mise en surbrillance à utiliser pour le nœud dont la valeur de colonne 3 est la plus proche de Type:chaîne
Par défaut:null
|
| minColorValue |
Valeur minimale autorisée dans la colonne 3. Toutes les valeurs inférieures à cette valeur seront réduites à cette valeur. Si la valeur est nulle, elle est calculée comme la 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
|
| noHighlightColor |
Couleur à utiliser pour un rectangle de couleur "non" lorsqu'il est mis en surbrillance. Spécifiez une valeur de couleur HTML ou une valeur nulle. Si la valeur est nulle, il s'agit de la valeur de Type:chaîne
Par défaut:null
|
| showScale |
Indique si le dégradé de couleurs doit être affiché de Type:booléen
Par défaut : "false"
|
| showTooltips |
Permet d'afficher ou non les info-bulles. Type:booléen
Valeur par défaut : "true"
|
| textStyle |
Objet spécifiant le style de texte pour certains graphiques comportant 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> }
Type:objet
Par défaut:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| titre |
Texte à afficher au-dessus du graphique. Type:chaîne
Par défaut:aucun titre
|
| titleTextStyle |
Objet spécifiant le style du texte du titre. L'objet a le format suivant:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Type:objet
Par défaut:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| useWeightedAverageForAggregation |
Permet d'utiliser ou non des moyennes pondérées pour l'agrégation. Type:booléen
Par défaut : "false"
|
Méthodes
| Méthode | |
|---|---|
draw(data, options) |
Permet de dessiner le graphique. Return Type (Type renvoyé) : aucun
|
getEventsConfig() (for v50+) |
Renvoie la configuration d'interaction actuelle. Cela permet de vérifier l'option de configuration Type renvoyé : "Object" (Objet)
{ // An empty array (i.e. []) means the interaction is disabled.
highlight: string[],
unhighlight: string[],
rollup: string[],
drilldown: string[] }
|
getSelection() |
Implémentation standard de Type renvoyé:tableau d'éléments de sélection
|
setSelection() |
Implémentation standard de Return Type (Type renvoyé) : aucun
|
goUpAndDraw() |
Remontez d'un niveau dans l'arborescence et redessinez-la. Elle ne génère pas d'erreur si le nœud est le nœud racine. Il se déclenche automatiquement lorsque l'utilisateur effectue un clic droit sur un nœud. Return Type (Type renvoyé) : aucun
|
getMaxPossibleDepth() |
Renvoie la profondeur maximale possible pour la vue actuelle. Type renvoyé:nombre
|
clearChart() |
Efface le graphique et libère toutes les ressources allouées. Return Type (Type renvoyé) : aucun
|
Événements
eventsConfig pour connaître les déclencheurs d'événements configurables.| Nom | |
|---|---|
onmouseover |
Déclenché lorsque l'utilisateur pointe 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 en surbrillance un nœud. Le déclencheur par défaut est le survol avec la souris.
Elle peut être configurée avec Properties (Propriétés) : ligne
|
onmouseout |
Déclenché lorsque l'utilisateur déplace le curseur en dehors 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 la sortie du curseur.
Elle peut être configurée avec Properties (Propriétés) : ligne
|
ready |
Déclenché lorsque le graphique est prêt pour les appels de méthode externes. Si vous souhaitez interagir avec le graphique et appeler des méthodes après l'avoir dessiné, vous devez configurer un écouteur pour cet événement avant d'appeler la méthode Propriétés:aucune
|
rollup |
Déclenché lorsque l'utilisateur remonte 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 affiche plus ou moins de détails sur un nœud. Déclenché également lorsque la méthode Propriétés:aucune
|
drilldown (for v50+) |
Déclenché lorsque l'utilisateur accède à des données plus profondes dans l'arborescence. Le déclencheur par défaut est le clic.
Vous pouvez la configurer avec Propriétés:aucune
|
Règles concernant les données
L'ensemble du code et des données sont traités et affichés dans le navigateur. Aucune donnée n'est envoyée à aucun serveur.