Latest web development tutorials

Highcharts árbol (arbóreo)

En este capítulo vamos a introducir Highcharts mapa de calor.

En la sección anterior que ya sabemos sintaxis de configuración Highcharts. Veamos las otras configuraciones Highcharts.


árbol

configuración en serie

El atributo type se establece treemap serie, columna series.type describe el tipo de datos. El valor por defecto es "línea".

var chart = {
   type: 'treemap'
};

Ejemplos

Nombre del archivo: highcharts_tree_map.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 本教程(w3big.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/treemap.js"></script>    
<script src="http://code.highcharts.com/modules/heatmap.js"></script>  
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {    
   var title = {
      text: 'Highcharts Treemap'   
   };       
   
   var colorAxis = {
      minColor: '#FFFFFF',
      maxColor: Highcharts.getOptions().colors[0]
   };
   
   var series= [{
     type: "treemap",
     layoutAlgorithm: 'squarified',
     data: [{
        name: 'A',
        value: 6,
        colorValue: 1
     }, {
        name: 'B',
        value: 6,
        colorValue: 2
     }, {
        name: 'C',
        value: 4,
        colorValue: 3
     }, {
        name: 'D',
        value: 3,
        colorValue: 4
     }, {
        name: 'E',
        value: 2,
        colorValue: 5
     }, {
        name: 'F',
        value: 2,
        colorValue: 6
     }, {
        name: 'G',
        value: 1,
        colorValue: 7
     }]
   }];     
      
   var json = {};     
   json.title = title;          
   json.colorAxis = colorAxis;   
   json.series = series;       
   
   $('#container').highcharts(json);
});
</script>
</body>
</html>

La salida del ejemplo anterior es:


Diferentes niveles de árbol

El siguiente ejemplo utiliza diferentes colores para identificar los diferentes niveles del árbol.

Ejemplos

Nombre del archivo: highcharts_tree_levels.htm (ejemplos de código fuente completo, por favor haga clic para ver)

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 本教程(w3big.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/treemap.js"></script>    
<script src="http://code.highcharts.com/modules/heatmap.js"></script>  
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {    
   var title = {
      text: 'Fruit consumption'   
   };        
   
   var series = [{
      type: "treemap",
      layoutAlgorithm: 'stripes',
      alternateStartingDirection: true,
      levels: [{
         level: 1,
         layoutAlgorithm: 'sliceAndDice',
         dataLabels: {
            enabled: true,
            align: 'left',
            verticalAlign: 'top',
            style: {
               fontSize: '15px',
               fontWeight: 'bold'
            }
         }
      }],
      data: [{
         id: 'A',
         name: 'Apples',
         color: "#EC2500"
      }, {
         id:'B',
         name: 'Bananas',
         color: "#ECE100"
      }, {
         id: 'O',
         name: 'Oranges',
         color: '#EC9800'
      }, {
         name: 'Anne',
         parent: 'A',
         value: 5
      }, {
         name: 'Rick',
         parent: 'A',
         value: 3
      }, {
         name: 'Peter',
         parent: 'A',
         value: 4
      }, {
         name: 'Anne',
         parent: 'B',
         value: 4
      }, {
         name: 'Rick',
         parent: 'B',
         value: 10
      }, {
         name: 'Peter',
         parent: 'B',
         value: 1
      }, {
         name: 'Anne',
         parent: 'O',
         value: 1
      }, {
         name: 'Rick',
         parent: 'O',
         value: 3
      }, {
         name: 'Peter',
         parent: 'O',
         value: 3
      }, {
         name: 'Susanne',
         parent: 'Kiwi',
         value: 2,
         color: '#9EDE00'
      }]
   }]; 
      
   var json = {};     
   json.title = title;            
   json.series = series;       
   
   $('#container').highcharts(json);
});
</script>
</body>
</html>

La salida del ejemplo anterior es:


Grandes cantidades de árbol de datos

Los siguientes ejemplos de color de gran cantidad de árbol de datos, ejemplos específicos de los datos disponibles haciendo clic en la "prueba" para ver.

Nombre del archivo: highcharts_tree_largemap.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 本教程(w3big.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>   
<script src="http://code.highcharts.com/modules/treemap.js"></script>    
<script src="http://code.highcharts.com/modules/heatmap.js"></script>  
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() { 
//省略部分 js 代码
 var data = {……};
 var points = [],
		region_p,
		region_val,
		region_i,
		country_p,
		country_i,
		cause_p,
		cause_i,
		cause_name = [];
	cause_name['Communicable & other Group I'] = 'Communicable diseases';
	cause_name['Noncommunicable diseases'] = 'Non-communicable diseases';
	cause_name['Injuries'] = 'Injuries';
	region_i = 0;
	for (var region in data) {
		region_val = 0;
		region_p = {
			id: "id_" + region_i,
			name: region,
			color: Highcharts.getOptions().colors[region_i]
		};
		country_i = 0;
		for (var country in data[region]) {
			country_p = {
				id: region_p.id + "_" + country_i,
				name: country,
				parent: region_p.id
			};
			points.push(country_p);
			cause_i = 0;
			for (var cause in data[region][country]) {
				cause_p = {
					id: country_p.id + "_" + cause_i,
					name: cause_name[cause],
					parent: country_p.id,
					value: Math.round(+data[region][country][cause])
				};
				region_val += cause_p.value;
				points.push(cause_p);
				cause_i++;
			}
			country_i++;
		}
		region_p.value = Math.round(region_val / country_i);
		points.push(region_p);
		region_i++;
	}
   var chart = {
      renderTo: 'container'
   };

   var title = {
      text: 'Global Mortality Rate 2012, per 100 000 population'   
   };        
   
   var subtitle: {
      text: 'Click points to drill down. Source: <a href="http://apps.who.int/gho/data/node.main.12?lang=en">WHO</a>.'
   };
   
   var series = [{
      type: "treemap",
      layoutAlgorithm: 'squarified',
      allowDrillToNode: true,
      dataLabels: {
         enabled: false
      },
      levelIsConstant: false,
      levels: [{
         level: 1,
         dataLabels: {
            enabled: true
         },
      borderWidth: 3
      }],
      data: points
   }]; 
      
   var json = {};     
   json.title = title;            
   json.series = series;       
   
   $('#container').highcharts(json);
});
</script>
</body>
</html>

La salida del ejemplo anterior es: