GWT Highcharts - Gráfico de mapa de árbol

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

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

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

Configuraciones

Veamos ahora las configuraciones / pasos adicionales realizados.

serie

Configure el tipo de gráfico para que esté basado en "mapas de árbol". series.typedecide el tipo de serie del gráfico. Aquí, el valor predeterminado es "línea".

series.setType(Type.TREEMAP);

Ejemplo

HelloWorld.java

package com.tutorialspoint.client;

import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.Point;
import org.moxieapps.gwt.highcharts.client.Series;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      final Chart chart = new Chart()
         .setChartTitleText("Fruit Consumption");  

      //Defining points to act as parents  
      final Point  appleParent = new Point("Apples")  
         .setColor("#EC2500");  
      final Point bananaParent = new Point("Bananas")  
         .setColor("#ECE100");  
      final Point orangeParent = new Point("Oranges")  
         .setColor("#EC9800");  

      chart.addSeries(chart.createSeries()  
         .setType(Series.Type.TREEMAP)
         .setPoints(new Point[]{  
            appleParent,  
            bananaParent,  
            orangeParent,  
            new Point("Anne", 5)  
               .setParent(appleParent),  
            new Point("Rick", 3)  
               .setParent(appleParent),  
            new Point("Peter", 4)  
               .setParent(appleParent),  
            new Point("Anne", 4)  
               .setParent(bananaParent),  
            new Point("Rick", 10)  
               .setParent(bananaParent),  
            new Point("Peter", 1)  
               .setParent(bananaParent),  
            new Point("Anne", 1)  
               .setParent(orangeParent),  
            new Point("Rick", 3)  
               .setParent(orangeParent),  
            new Point("Peter", 3)  
               .setParent(orangeParent),  
            new Point("Susanne", 2)  
               .setParent("Kiwi")  
               .setColor("#9EDE00")  
         })  
      );  
      RootPanel.get().add(chart);
   }
}

Resultado

Verifique el resultado.