GWT Highcharts - Carte d'arbre

Voici un exemple de carte d'arbre.

Nous avons déjà vu la configuration utilisée pour dessiner un graphique dans le chapitre Syntaxe de configuration Highcharts .

Un exemple de carte d'arbre est donné ci-dessous.

Configurations

Voyons maintenant les configurations / étapes supplémentaires prises.

séries

Configurez le type de graphique pour qu'il soit basé sur un 'treemap'. series.typedécide du type de série du graphique. Ici, la valeur par défaut est "line".

series.setType(Type.TREEMAP);

Exemple

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

Résultat

Vérifiez le résultat.