GWT Google Charts - แผนภูมิ TreeMap

TreeMap เป็นการแสดงภาพของแผนผังข้อมูลโดยที่แต่ละโหนดอาจมีเด็กเป็นศูนย์หรือมากกว่าและมีพาเรนต์หนึ่งตัว (ยกเว้นรูท) แต่ละโหนดจะแสดงเป็นสี่เหลี่ยมผืนผ้าสามารถกำหนดขนาดและสีได้ตามค่าที่เรากำหนด ขนาดและสีมีมูลค่าเทียบกับโหนดอื่น ๆ ทั้งหมดในกราฟ ต่อไปนี้เป็นตัวอย่างของแผนภูมิทรีแมป

เราได้เห็นการกำหนดค่าที่ใช้ในการวาดแผนภูมิในบทไวยากรณ์การกำหนดค่าแผนภูมิของ Googleแล้ว ตอนนี้ให้เราดูตัวอย่างแผนภูมิ TreeMap

การกำหนดค่า

เราเคยใช้ TreeMap คลาสเพื่อแสดงแผนภูมิ TreeMap

TreeMap chart = new TreeMap();

ตัวอย่าง

HelloWorld.java

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.treemap.TreeMap;
import com.googlecode.gwt.charts.client.treemap.TreeMapOptions;

public class HelloWorld implements EntryPoint {
   private TreeMap chart;

   private void initialize() {
      ChartLoader chartLoader = new ChartLoader(ChartPackage.TREEMAP);
      chartLoader.loadApi(new Runnable() {
         public void run() {
            // Create and attach the chart
            chart = new TreeMap();
            RootPanel.get().add(chart);
            draw();
         }
      });
   }
   private void draw() {
      // Prepare the data
      DataTable dataTable = DataTable.create();
      dataTable.addColumn(ColumnType.STRING, "Location");
      dataTable.addColumn(ColumnType.STRING, "Parent");
      dataTable.addColumn(ColumnType.NUMBER, "Market trade volume (size)");
      dataTable.addColumn(ColumnType.NUMBER, "Market increase/decrease (color)");

      dataTable.addRow("Global",null,0,0);
      dataTable.addRow("America","Global",0,0);
      dataTable.addRow("Europe","Global",0,0);
      dataTable.addRow("Asia","Global",0,0);
      dataTable.addRow("Australia","Global",0,0);
      dataTable.addRow("Africa","Global",0,0);  

      dataTable.addRow("USA","America",52,31);
      dataTable.addRow("Mexico","America",24,12);
      dataTable.addRow("Canada","America",16,-23);

      dataTable.addRow("France","Europe",42,-11);
      dataTable.addRow("Germany","Europe",31,-2);
      dataTable.addRow("Sweden","Europe",22,-13);   

      dataTable.addRow("China","Asia",36,4);
      dataTable.addRow("Japan","Asia",20,-12);
      dataTable.addRow("India","Asia",40,63);

      dataTable.addRow("Egypt","Africa",21,0); 
      dataTable.addRow("Congo","Africa",10,12);
      dataTable.addRow("Zaire","Africa",8,10);

      // Set options
      TreeMapOptions options = TreeMapOptions.create();
      options.setMinColor("#ff7777");
      options.setMidColor("#ffff77");
      options.setMaxColor("#77ff77");
      options.setHeaderHeight(15);
      options.setShowScale(true);
      
      // Draw the chart
      chart.draw(dataTable, options);
      chart.setWidth("400px");
      chart.setHeight("400px");
   }
   public void onModuleLoad() {
      initialize();
   }
}

ผลลัพธ์

ตรวจสอบผลลัพธ์