Gráficos de Google: gráfico TreeMap
TreeMap es una representación visual de un árbol de datos, donde cada nodo puede tener cero o más hijos y un padre (excepto la raíz). Cada nodo se muestra como un rectángulo, se puede dimensionar y colorear según los valores que le asignemos. Los tamaños y colores se valoran en relación con todos los demás nodos del gráfico. A continuación se muestra un ejemplo de un gráfico de mapa de árbol. Ya hemos visto la configuración utilizada para dibujar este gráfico en el capítulo Sintaxis de configuración de Google Charts . Entonces, veamos el ejemplo completo.
Configuraciones
Hemos usado TreeMap class para mostrar el diagrama de mapa de árbol.
//TreeMap chart
var chart = new google.visualization.TreeMap(document.getElementById('container'));Ejemplo
googlecharts_treemap.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript" src = "https://www.google.com/jsapi">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['treemap']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
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],
['USA', 'America', 52, 31],
['Mexico', 'America', 24, 12],
['Canada', 'America', 16, -23],
['France', 'Europe', 42, -11],
['Germany', 'Europe', 31, -2],
['Sweden', 'Europe', 22, -13],
['China', 'Asia', 36, 4],
['Japan', 'Asia', 20, -12],
['India', 'Asia', 40, 63],
['Egypt', 'Africa', 21, 0],
['Congo', 'Africa', 10, 12],
['Zaire', 'Africa', 8, 10]
]);
var options = {
minColor: '#f00',
midColor: '#ddd',
maxColor: '#0d0',
headerHeight: 15,
fontColor: 'black',
showScale: true
};
// Instantiate and draw the chart.
var chart = new google.visualization.TreeMap(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Resultado
Verifique el resultado.