Descripción general
Una representación visual de un árbol de datos, en la que cada nodo puede tener cero o más elementos secundarios, y uno superior (salvo la raíz, que no tiene superiores). Cada nodo se muestra como un rectángulo con un tamaño y un color acordes a 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 de manera simultánea y, de manera opcional, 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 de límite para los nodos de hoja. El comportamiento predeterminado es desplazarse hacia abajo en el árbol cuando un usuario hace clic con el botón izquierdo en un nodo y moverlo hacia arriba cuando el usuario hace clic con el botón derecho en el gráfico.
El tamaño total del gráfico está determinado por el tamaño del elemento contenedor que insertas en tu página. Si tienes nodos de hoja con nombres demasiado largos para mostrar, el nombre se truncará con una elipsis (...).
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>
Destacadas
Puedes especificar si los elementos deben destacarse y establecer colores específicos para que ciertos elementos usen cuando esto ocurre. Si deseas activar el resaltado, configura highlightOnMouseOver:true (para la versión 49 o una anterior) o enableHighlight: true (para la versión v50 o superior). Desde allí, puedes configurar los colores que se usarán para destacar los elementos con las diversas 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 de diagrama de árbol es básica y muestra la etiqueta de la celda del mapa en árbol. Esto es útil cuando las celdas son demasiado pequeñas para contener las etiquetas, pero puedes personalizarlas aún más como se describe en esta sección.
La información sobre la herramienta de diagrama de árbol se personaliza de manera diferente que otros gráficos: defines una función y, luego, estableces la opción generateTooltip en esa función. A continuación, se muestra un ejemplo simple:
En el gráfico anterior, definimos una función llamada showStaticTooltip que simplemente muestra una string con el código HTML para que se muestre cada vez que el usuario se desplaza sobre una celda del mapa del árbol. Pruébela. 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, necesitarás información sobre la herramienta que varíe en función de los valores de los datos. En el siguiente ejemplo, se muestra cómo acceder a cada campo en la tabla de datos.
Si te desplazas sobre las celdas del árbol anterior, verás información sobre la herramienta diferente para cada celda. La información sobre la herramienta de mapa del árbol toma 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, expresada como un número del 0 al 1.
En showFullTooltip, la string que se muestra es un cuadro HTML con cinco líneas:
- En la línea 1, se muestra la fila correspondiente de la tabla de datos y se usa
data.getValuede manera liberal. - La línea 2 te indica qué fila es, que es solo el parámetro
row. - La línea 3 te brinda 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 descendientes.
- La línea 4 le brinda información de la columna 4 de la tabla de datos. Es el valor, pero se expresa 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 los 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. El tamaño y el color de cada nodo se calculan según sus valores en relación con los otros nodos que se muestran actualmente.
La tabla de datos debe tener cuatro columnas en el siguiente formato:
- Columna 0: [string] Un ID para este nodo. Puede ser cualquier string de JavaScript válida, incluidos los espacios y cualquier longitud que pueda contener una string. Este valor se muestra como el encabezado del nodo.
- Columna 1, [string]: ID del nodo superior. Si se trata de un nodo raíz, déjalo en blanco. Solo se permite una raíz por mapa del árbol.
- Columna 2: [número]: Tamaño del nodo. Se permite cualquier valor positivo. Este valor determina el tamaño del nodo, calculado en relación con todos los demás nodos que se muestran actualmente. 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 [opcional, número]: Un valor opcional que se usa para calcular un color de este nodo. Se permite cualquier valor, positivo o negativo.
Primero, se recalcula el valor de color en una escala de
minColorValueamaxColorValuey, luego, al nodo se le asigna un color del gradiente entreminColorymaxColor.
Opciones de configuración
| Nombre | |
|---|---|
| enableHighlight (para la versión v50 y posteriores) |
Determina si los elementos deben mostrar efectos destacados. El activador predeterminado es cuando se desplaza el mouse sobre el anuncio.
El activador se puede configurar con Tipo: booleano
Valor predeterminado: falso
|
| eventsConfig (para versiones v50 y posteriores) |
La configuración del evento para activar las interacciones con mapas 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 arreglo de configuración es indefinido o falta para una interacción, se usará el valor default.
Si el archivo de configuración es un arreglo vacío, la interacción se inhabilitará.
Para una configuración válida,
mouse_event es obligatorio y debe ser un evento del mouse compatible. Puedes tener hasta cuatro modificadores de tecla opcionales.
Ejemplo de uso de Control + Mayús + clic con el botón derecho para subir el árbol:
{ rollup: ['contextmenu', 'ctrlKey', 'shiftKey'] }Type:
Predeterminado:
{
highlight: ['mouseover'],
unhighlight: ['mouseout'],
rollup: ['contextmenu'], // right-click
drilldown: ['click']
}
|
| Color de fuente |
El color del texto Especifica un valor de color HTML. Tipo: string
Valor predeterminado: #ffffff
|
| familiadefuentes |
La familia de fuentes que se usará para todo el texto. Tipo: string
Predeterminado: automático
|
| fontSize |
El tamaño de fuente para todo el texto, en puntos Tipo: número
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 i-frames). Tipo: booleano
Valor predeterminado: falso
|
| Color del encabezado |
El color de la sección del encabezado para cada nodo Especifica un valor de color HTML. Tipo: string
Valor predeterminado: #988f86
|
| Altura del encabezado |
La altura de la sección del encabezado para cada nodo, en píxeles (puede ser cero) Tipo número
Valor predeterminado: 0
|
| DestacarColorColor |
El color del encabezado de un nodo que se desplaza. Especifica un valor de color HTML o nulo. Si es nulo, este valor se aclarará un 35%. Tipo: string
Valor predeterminado: null
|
| destaqueOnMouseOver (obsoleto para versiones posteriores a 50) |
Obsoleta a partir de la versión 50. Para la versión v50 y posteriores, usa Tipo: booleano
Valor predeterminado: falso
|
| opacidad |
Cuando Tipo: número
Predeterminado: 0.0
|
| color máximo |
El color de un rectángulo con un valor de columna 3 de Tipo: string
Valor predeterminado: #00dd00
|
| Profundidad máxima |
La cantidad máxima de niveles de nodos que se muestran en la vista actual. Se nivelarán los niveles en el plano actual. Si el árbol tiene más niveles, tendrás que subir o bajar para verlos. Además, puedes ver los niveles Tipo: número
Predeterminado: 1
|
| Color destacado máximo |
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 un valor nulo. Si es nulo, este valor será el valor de Tipo: string
Valor predeterminado: null
|
| Profundidad máxima |
Cuántos niveles de nodos después de Tipo: número
Valor predeterminado: 0
|
| valor_máximodecolor |
El valor máximo permitido en la columna 3. Todos los valores mayores que esto se recortarán a este valor. Si se establece como nulo, se establecerá en el valor máximo de la columna. Tipo: número
Valor predeterminado: null
|
| Color medio |
El color de un rectángulo con un valor de columna 3 en la mitad entre Tipo: string
Valor predeterminado: #000000
|
| Color destacado medio |
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: null
|
| Color mínimo |
El color de un rectángulo con el valor de columna 3 de Tipo: string
Valor predeterminado: #dd0000
|
| color para destacar |
El color de resaltado que se usará para el nodo con un valor de columna 3 más cercano a Tipo: string
Valor predeterminado: null
|
| valor de minColor |
El valor mínimo permitido en la columna 3. Todos los valores inferiores se recortarán a este valor. Si se establece como nulo, se calculará como el valor mínimo en la columna. Tipo: número
Valor predeterminado: null
|
| sinColor |
El color que se usará en 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
Valor predeterminado: #000000
|
| Color para dejar de destacar |
El color que se utilizará para un rectángulo del color "no" cuando esté destacado. Especifica un valor de color HTML o un valor nulo. Si es nulo, este será el valor de Tipo: string
Valor predeterminado: null
|
| Escala a programa |
Indica si se debe mostrar o no una escala de gradiente de color de Tipo: booleano
Valor predeterminado: falso
|
| sugerenciasDeHerramienta |
Indica si se muestra información sobre la herramienta. Tipo: booleano
Predeterminado: verdadero
|
| Estilo de texto |
Un objeto que especifica el estilo de texto para ciertos gráficos que tienen texto en el área de contenido, como el mapa del árbol. El objeto tiene este formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Type:
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| title |
Texto para mostrar arriba del gráfico Tipo: string
Predeterminado: sin título
|
| Estilo de texto del título |
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> }
Type:
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| useWeightedAverageForAggregation |
Indica si se deben usar los promedios ponderados para la agregación. Tipo: booleano
Valor 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 Tipo de datos que se muestra: arreglo de elementos de selección
|
setSelection() |
Implementación Tipo de datos que se muestra: ninguno
|
goUpAndDraw() |
Sube el árbol un nivel y vuelve a dibujarlo. No muestra un error si el nodo es el nodo raíz. 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 devolución: número
|
clearChart() |
Borra el gráfico y libera todos los recursos asignados. Tipo de datos que se muestra: ninguno
|
Eventos
eventsConfig para conocer los activadores de eventos configurables.| Nombre | |
|---|---|
onmouseover |
Se activa cuando el usuario desplaza el mouse sobre un nodo. El controlador de eventos recibe el índice de fila de la entrada correspondiente en la tabla de datos. Filas: de la fila
|
highlight (for v50+) |
Se activa cuando el usuario destaca un nodo. El activador predeterminado es desplazar el mouse sobre un anuncio.
Se puede configurar con Filas: de la fila
|
onmouseout |
Se activa cuando el usuario abandona un nodo. El controlador de eventos recibe el índice de fila de la entrada correspondiente en la tabla de datos. Filas: de la fila
|
unhighlight (for v50+) |
Se activa cuando el usuario deja de destacar un nodo. El activador predeterminado es mouseout.
Se puede configurar con Filas: de la fila
|
ready |
Se activa cuando el gráfico está listo para llamadas a métodos externos. 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 hace clic con el botón derecho.
Se puede configurar con Filas: de la fila
|
select |
Se activa cuando el usuario desglosa o enrolla un nodo. También se activa cuando se llama al método Propiedades: ninguna
|
drilldown (for v50+) |
Se activa cuando el usuario navega más allá del árbol. El activador predeterminado es el de hacer clic.
Se puede configurar con Propiedades: ninguna
|
Política de Datos
El código y los datos se procesan y procesan en el navegador. No se envían datos a ningún servidor.