GWT Highcharts - 树形图

以下是树形图的示例。

我们已经在Highcharts 配置语法一章中看到了用于绘制图表的配置。

下面给出了树形图的示例。

配置

现在让我们看看采取的其他配置/步骤。

series

将图表类型配置为基于"treemap"。series.type 决定图表的系列类型。此处，默认值为"line"。

series.setType(Type.TREEMAP);

示例

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

      //定义作为父节点的点
      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);
   }
}

结果

验证结果。

gwt_highcharts_map_charts.html