Highcharts - Mapa de árboles

A continuación se muestra un ejemplo de un gráfico de mapa de árbol con eje de color.

Ya hemos visto la configuración utilizada para dibujar un gráfico en el capítulo Sintaxis de configuración de Highcharts .

Configuraciones

Veamos ahora las configuraciones / pasos adicionales realizados.

series.type

Configure el tipo de serie para que se base en un mapa de árbol. Establezca el tipo como 'mapa de árbol'.

var series = {
   type: 'treemap'
};

Ejemplo

highcharts_tree_map.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>    
      <script src = "https://code.highcharts.com/modules/treemap.js"></script>    
      <script src = "https://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>

Resultado

Verifique el resultado.

↰ Previous page