Gwt-highcharts-tree-map

GWTハイチャート-ツリーマップチャート

以下は、ツリーマップチャートの例です。

link：/gwt_highcharts/gwt_highcharts_configuration_syntax [Highcharts構成構文]の章で、チャートを描画するために使用される構成をすでに確認しました。

ツリーマップチャートの例を以下に示します。

構成

ここで、追加の構成/実行された手順を見てみましょう。

シリーズ

チャートタイプを「ツリーマップ」ベースに設定します。 series.type は、チャートのシリーズタイプを決定します。 ここで、デフォルト値は「line」です。

series.setType(Type.TREEMAP);

例

*_HelloWorld.java_*

package com.finddevguides.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);
   }
}

結果

結果を確認します。

ツリーマップチャート