GWT Highcharts - Grafico ad albero

Di seguito è riportato un esempio di un grafico ad albero.

Abbiamo già visto la configurazione utilizzata per disegnare un grafico nel capitolo Sintassi della configurazione di Highcharts .

Di seguito viene fornito un esempio di grafico con mappa ad albero.

Configurazioni

Vediamo ora le configurazioni / passaggi aggiuntivi effettuati.

serie

Configura il tipo di grafico in base alla "mappa ad albero". series.typedecide il tipo di serie per il grafico. Qui, il valore predefinito è "line".

series.setType(Type.TREEMAP);

Esempio

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);
   }
}

Risultato

Verifica il risultato.