Descripción general
Representación visual de un árbol de datos, en la que cada nodo puede tener cero o más elementos secundarios y un elemento superior (excepto la raíz, que no tiene elementos superiores). Cada nodo se muestra como un rectángulo, con un tamaño y un color de acuerdo con los valores que asignes. Los tamaños y colores se valoran en relación con todos los demás nodos del gráfico. Puedes especificar cuántos niveles mostrar simultáneamente y, opcionalmente, mostrar niveles más profundos de forma sugerida. Si un nodo es de hoja, puedes especificar un tamaño y un color; si no es una hoja, se mostrará como un cuadro delimitador para los nodos de hoja. El comportamiento predeterminado es desplazarse hacia abajo en el árbol cuando el usuario hace clic con el botón izquierdo en un nodo y regresar hacia arriba cuando el usuario hace clic con el botón derecho en el gráfico.
El tamaño total del gráfico se determina por el tamaño del elemento contenedor que insertas en tu página. Si tienes nodos hoja con nombres demasiado largos para mostrarlos, el nombre se truncará con puntos suspensivos (...).
Ejemplo
<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>
Lo más destacado
Puedes especificar si se deben destacar los elementos y establecer colores específicos para que determinados elementos los usen cuando esto ocurra. Para activar la función para destacar elementos, configura highlightOnMouseOver:true (para la versión 49 o anteriores) o enableHighlight: true (para la versión 50 y posteriores). Luego, puedes configurar los colores para destacar elementos con las diferentes opciones de 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'],
}
};
Información sobre la herramienta
De forma predeterminada, la información sobre la herramienta del mapa de árbol es básica y muestra la etiqueta de la celda del mapa de árbol. Esto es útil cuando las celdas son demasiado pequeñas para contener las etiquetas, pero puedes personalizarlas como se describe en esta sección.
La información sobre la herramienta del mapa de árbol se personaliza de manera diferente a otros gráficos: debes definir una función y, luego, configurar la opción generateTooltip para esa función. A continuación, te mostramos un ejemplo sencillo:
En el gráfico anterior, definimos una función llamada showStaticTooltip que simplemente muestra una cadena con el HTML que se mostrará cada vez que el usuario coloque el cursor sobre una celda de diagrama de árbol. Pruébalo El código que se debe generar es el siguiente:
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 función generateTooltip puede ser cualquier JavaScript que desees. Por lo general, se necesitan cuadros de información que varíen en función de los valores de datos. En el siguiente ejemplo, se muestra cómo acceder a cada campo de la tabla de datos.
Si colocas el cursor sobre las celdas del diagrama de árbol anterior, verás un cuadro de información diferente para cada celda. Las funciones de información del mapa de árbol toman tres valores: row, size y value.
row: Es la fila de la celda de la tabla de datos.size: La suma del valor (columna 3) de esta celda y todos sus elementos secundariosvalue: Es el color de la celda, expresado como un número del 0 al 1.
En showFullTooltip, la cadena que se muestra es un cuadro HTML con cinco líneas:
- En la línea 1, se muestra la fila adecuada de la tabla de datos y se hace un uso liberal de
data.getValue. - La línea 2 te indica qué fila se encuentra, que es solo el parámetro
row. - La línea 3 te proporciona información de la columna 3 de la tabla de datos: la suma del valor de la columna 3 de esta fila, más los valores de los subordinados.
- La línea 4 te proporciona la información de la columna 4 de la tabla de datos. Es el valor, pero expresado como un número entre 0 y 1 que corresponde al color de la celda.
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>';
}
}
Cargando
El nombre del paquete google.charts.load es "treemap".
google.charts.load("current", {packages: ["treemap"]});
El nombre de clase de la visualización es google.visualization.TreeMap.
var visualization = new google.visualization.TreeMap(container);
Formato de datos
Cada fila de la tabla de datos describe un nodo (un rectángulo en el gráfico). Cada nodo (excepto el nodo raíz) tiene un nodo superior. Cada nodo tiene el tamaño y el color de cada nodo según sus valores en relación con los otros nodos que se muestran en el momento.
La tabla de datos debe tener cuatro columnas en el siguiente formato:
- Columna 0 - [string] Un ID para este nodo. Puede ser cualquier cadena de JavaScript válida, incluidos los espacios, y cualquier longitud que pueda contener una cadena. Este valor se muestra como el encabezado del nodo.
- Columna 1 - [string]: ID del nodo superior. Si se trata de un nodo raíz, deja este campo en blanco. Solo se permite una raíz por mapa de árbol.
- Columna 2 [número]: El tamaño del nodo. Se permite cualquier valor positivo. Este valor determina el tamaño del nodo, que se calcula en relación con todos los demás nodos que se muestran en el momento. Para los nodos que no son de hoja, este valor se ignora y se calcula a partir del tamaño de todos sus elementos secundarios.
- Columna 3 [optional, number]: Valor opcional que se usa para calcular el color de este nodo. Se permite cualquier valor, positivo o negativo.
Primero, el valor del color se vuelve a calcular en una escala de
minColorValueamaxColorValuey, luego, al nodo se le asigna un color del gradiente entreminColorymaxColor.
Opciones de configuración
| Nombre | |
|---|---|
| enableHighlight (para versiones 50 y posteriores) |
Determina si los elementos deben mostrar efectos destacados. El activador predeterminado es cuando se desplaza el mouse sobre él.
El activador se puede configurar con Tipo: booleano
Predeterminado: falso
|
| eventsConfig (para v50 y versiones posteriores) |
La configuración de eventos para activar las interacciones del mapa de árbol. Formato para configurar las interacciones:
eventsConfig: {
interaction1: undefined, // or missing
interaction2: [], // disable
interaction3: [
'mouse_event',
'optional_key1',
'optional_key2',
'optional_key3',
'optional_key4'
],
...,
}
Si el array de configuración no está definido o falta para una interacción, se usará el default.
Si la configuración es un array vacío, se inhabilitará la interacción.
Para una configuración válida,
mouse_event es obligatorio y debe ser un evento del mouse compatible. Luego, puedes tener hasta cuatro modificadores de teclas opcionales.
Ejemplo en el que se usa Control + Mayúsculas + Clic derecho para subir el árbol:
{ rollup: ['contextmenu', 'ctrlKey', 'shiftKey'] }Tipo: objeto
Predeterminado:
{
highlight: ['mouseover'],
unhighlight: ['mouseout'],
rollup: ['contextmenu'], // right-click
drilldown: ['click']
}
|
| fontColor |
El color del texto. Especifica un valor de color HTML. Tipo: string
Configuración predeterminada: #ffffff
|
| fontFamily |
La familia de fuentes que se va a usar en todo el texto. Tipo: string
Predeterminada: automática
|
| fontSize |
El tamaño de la fuente de todo el texto, en puntos. Tipo: Número
Valor predeterminado: 12
|
| forceIFrame |
Dibuja el gráfico dentro de un marco intercalado. (Ten en cuenta que, en IE8, esta opción se ignora; todos los gráficos de IE8 se dibujan en iframes). Tipo: booleano
Predeterminado: falso
|
| headerColor |
El color de la sección del encabezado de cada nodo. Especifica un valor de color HTML. Tipo: string
Predeterminado: #988f86
|
| headerHeight |
La altura de la sección del encabezado de cada nodo, en píxeles (puede ser cero). Tipo número
Valor predeterminado: 0
|
| headerHighlightColor |
El color del encabezado de un nodo sobre el que se coloca el cursor. Especifica un valor de color HTML o nulo. Si es nulo, este valor se aclarará con Tipo: string
Valor predeterminado: nulo
|
| HighlightOnMouseOver (obsoleto para versiones 50 y posteriores) |
Obsoleto para la versión 50 y posteriores. Para la versión 50 y posteriores, usa Tipo: booleano
Predeterminado: falso
|
| hintOpacity |
Cuando Tipo: Número
Predeterminado: 0.0
|
| maxColor |
El color de un rectángulo con un valor de columna 3 de Tipo: string
Predeterminado: #00dd00
|
| maxDepth |
La cantidad máxima de niveles de nodo que se mostrarán en la vista actual. Los niveles se compactarán
en el plano actual. Si el árbol tiene más niveles que estos, tendrás que subir o bajar para verlos. Además, puedes ver los niveles de Tipo: Número
Configuración predeterminada: 1
|
| maxHighlightColor |
El color de resaltado que se usará para el nodo con el valor más alto en la columna 3. Especifica un valor de color HTML o nulo. Si es nulo, este valor será el valor de Tipo: string
Valor predeterminado: nulo
|
| maxPostDepth |
Cantidad de niveles de nodos más allá de Tipo: Número
Valor predeterminado: 0
|
| maxColorValue |
El valor máximo permitido en la columna 3. Todos los valores superiores a este valor se recortarán a este valor. Si se configura como nulo, se establecerá en el valor máximo en la columna. Tipo: Número
Valor predeterminado: nulo
|
| midColor |
El color de un rectángulo con un valor de columna 3 a mitad de camino entre Tipo: string
Predeterminado: #000000
|
| midHighlightColor |
Es el color de resaltado que se usará para el nodo con un valor de columna 3 cerca de la mediana de Tipo: string
Valor predeterminado: nulo
|
| minColor |
El color de un rectángulo con el valor Tipo: string
Predeterminado: #dd0000
|
| minHighlightColor |
Es el color de resaltado que se usará para el nodo con un valor de columna 3 más cercano a Tipo: string
Valor predeterminado: nulo
|
| minColorValue |
El valor mínimo permitido en la columna 3. Todos los valores inferiores a este valor se recortarán a este valor. Si se configura como nulo, se calculará como el valor mínimo en la columna. Tipo: Número
Valor predeterminado: nulo
|
| noColor |
El color que se debe usar para un rectángulo cuando un nodo no tiene valor para la columna 3 y ese nodo es una hoja (o solo contiene hojas). Especifica un valor de color HTML. Tipo: string
Predeterminado: #000000
|
| noHighlightColor |
Es el color que se usa para un rectángulo de color "no" cuando se destaca. Especifica un valor de color HTML o nulo. Si es nulo, este será el valor de Tipo: string
Valor predeterminado: nulo
|
| showScale |
Indica si se debe mostrar o no una escala de gradiente de color de Tipo: booleano
Predeterminado: falso
|
| showTooltips |
Especifica si se deben mostrar los cuadros de información. Tipo: booleano
Predeterminado: verdadero
|
| textStyle |
Es un objeto que especifica el estilo de texto para ciertos gráficos que tienen texto en el área de contenido, como el mapa de árbol. El objeto tiene este formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Tipo: objeto
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| título |
Es el texto que se mostrará sobre el gráfico. Tipo: string
Configuración predeterminada: Sin título
|
| titleTextStyle |
Un objeto que especifica el estilo de texto del título. El objeto tiene este formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Tipo: objeto
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| useWeightedAverageForAggregation |
Indica si se deben usar promedios ponderados para la agregación. Tipo: booleano
Predeterminado: falso
|
Métodos
| Método | |
|---|---|
draw(data, options) |
Dibuja el gráfico. Tipo de datos que se muestra: ninguno
|
getEventsConfig() (for v50+) |
Muestra la configuración de interacción actual. Se puede usar para verificar la opción de configuración Tipo de datos que se muestra: Objeto
{ // An empty array (i.e. []) means the interaction is disabled.
highlight: string[],
unhighlight: string[],
rollup: string[],
drilldown: string[] }
|
getSelection() |
Implementación estándar de Tipo de datos que se muestra: Es el array de elementos de selección.
|
setSelection() |
Implementación estándar de Tipo de datos que se muestra: ninguno
|
goUpAndDraw() |
Sube el árbol un nivel y vuelve a dibujarlo. No arroja un error si el nodo es el nodo raíz. Esto se activa automáticamente cuando el usuario hace clic con el botón derecho en un nodo. Tipo de datos que se muestra: ninguno
|
getMaxPossibleDepth() |
Muestra la profundidad máxima posible para la vista actual. Tipo de datos que se muestra: número
|
clearChart() |
Borra el gráfico y libera todos sus recursos asignados. Tipo de datos que se muestra: ninguno
|
Eventos
eventsConfig para ver los activadores de eventos configurables.| Nombre | |
|---|---|
onmouseover |
Se activa cuando el usuario desplaza el mouse sobre un nodo. Al controlador de eventos se le pasa el índice de filas de la entrada correspondiente en la tabla de datos. Properties: Fila
|
highlight (for v50+) |
Se activa cuando el usuario destaca un nodo. El activador predeterminado es el desplazamiento del mouse.
Se puede configurar con Properties: Fila
|
onmouseout |
Se activa cuando el usuario sale de un nodo con el mouse. Al controlador de eventos se le pasa el índice de filas de la entrada correspondiente en la tabla de datos. Properties: Fila
|
unhighlight (for v50+) |
Se activa cuando el usuario quita un nodo destacado. El activador predeterminado es mouseout.
Se puede configurar con Properties: Fila
|
ready |
Se activa cuando el gráfico está listo para llamadas de método externas. Si deseas interactuar con el gráfico y llamar a los métodos después de dibujarlo, debes configurar un objeto de escucha para este evento antes de llamar al método Propiedades: Ninguna
|
rollup |
Se activa cuando el usuario navega hacia atrás en el árbol. El activador predeterminado es hacer clic con el botón derecho.
Se puede configurar con Properties: Fila
|
select |
Se activa cuando el usuario desglosa o enrolla un nodo. También se activa cuando se llama a los métodos Propiedades: ninguna
|
drilldown (for v50+) |
Se activa cuando el usuario navega más profundamente por el árbol. El activador predeterminado es hacer clic.
Se puede configurar con Propiedades: ninguna
|
Política de Datos
Todo el código y los datos se procesan y renderizan en el navegador. No se envían datos a ningún servidor.