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

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

結果

驗證結果。