Gwt Googlecharts 简明教程

GWT Google Charts - Quick Guide

GWT Google Charts - Overview

Google Charts 是一个基于纯 JavaScript 的图表库，旨在通过增加交互式制图功能来增强 Web 应用程序。它支持各种图表。图表在标准浏览器（如 Chrome、Firefox、Safari、Internet Explorer (IE)）中使用 SVG 绘制。在旧版 IE 6 中，使用 VML 绘制图形。

Google Chart Java Module 是一个基于 Java 的开源库，可在 GWT 应用程序中提供优雅且功能丰富的 Google Charts 可视化效果，并且可与 GWT 部件库搭配使用。有几章讨论了 Google Charts 的所有基本组件，并在 GWT 应用程序中提供了适当的示例。

Features

以下是 Google Charts 库的显著功能。

Compatability − 在所有主流浏览器和移动平台（如 Android 和 iOS）上无缝运行。
Multitouch Support − 支持在基于触摸屏的平台（如 Android 和 iOS）上进行多点触控。非常适合 iPhone/iPad 和基于 Android 的智能手机/平板电脑。
Free to Use − 开源，可免费用于非商业用途。
Lightweight − loader.js 核心库是一个极其轻量级的库。
Simple Configurations − 使用 JSON 定义图表的各种配置，并且非常容易学习和使用。
Dynamic − 允许在图表生成后修改图表。
Multiple axes − 不局限于 x、y 轴。支持图表上的多个轴。
Configurable tooltips − 当用户将鼠标悬停在图表上的任何点时，会出现工具提示。googlecharts 提供工具提示内置格式化工具或回调格式化工具，以编程方式控制工具提示。
DateTime support − 特别处理日期时间。提供对按日期分类的许多内置控件。
Print − 使用网页打印图表。
External data − 支持从服务器动态加载数据。使用回调函数控制数据。
Text Rotation − 支持任意方向旋转标签。

Supported Chart Types

Google Charts 库提供以下类型的图表−

Sr. No.	Chart Type / Description
1	Line Charts 用于绘制基于图线/样条线的图表。
2	Area Charts 用于绘制区域图表。
3	Pie Charts 用于绘制饼图。
4	Sankey Charts, Scatter Charts, Stepped area charts, Table, Timelines, TreeMap, Trendlines 用于绘制散点图。
5	Bubble Charts 用于绘制基于气泡的图表。
6	Dynamic Charts 用于绘制动态图表，用户可以修改图表。
7	Combinations 用于绘制组合图表。
8	3D Charts 用于绘制 3D 图表。
9	Angular Gauges 用于绘制速度计类型的图表。
10	Heat Maps 用于绘制热图。
11	Tree Maps 用于绘制树状图。

在接下来的章节中，我们将详细讨论每种上述图表类型以及示例。

Licence

Google Charts 是开源的，并且免费使用。请单击以下链接： Terms of Service 。

GWT Google Charts - Environment Setup

本教程将指导你如何准备一个开发环境，从 Google 图表和 GWT 框架开始你的工作。本教程还将教会你在你的机器上设置 JDK、Tomcat 和 Eclipse，然后才能设置 GWT 框架 −

System Requirement

GWT 需要 JDK 1.6 或更高版本，因此第一个要求是在你的机器中安装 JDK。

JDK

1.6 or above.

Memory

no minimum requirement.

Disk Space

no minimum requirement.

Operating System

no minimum requirement.

按照给定的步骤设置你的环境，从 GWT 应用程序开发开始。

Step 1 - Verify Java Installation on your Machine

现在打开控制台并执行以下 Java 命令。

Task

Command

Windows

Open Command Console

c:> java -version

Linux

Open Command Terminal

$ java -version

Mac

Open Terminal

machine:~ joseph$ java -version

让我们验证所有操作系统的输出

Sr.No.

OS & Generated Output

Windows java 版本“1.6.0_21”Java™ SE 运行时环境（版本 1.6.0_21-b07）Java HotSpot™ Client VM（版本 17.0-b17，混合模式，共享）

Linux java 版本“1.6.0_21”Java™ SE 运行时环境（版本 1.6.0_21-b07）ava HotSpot™ Client VM（版本 17.0-b17，混合模式，共享）

Mac java 版本“1.6.0_21”Java™ SE 运行时环境（版本 1.6.0_21-b07）Java HotSpot™64 位服务器 VM（版本 17.0-b17，混合模式，共享）

Step 2 - Setup Java Development Kit (JDK)

如果你没有安装 Java，那么你可以从 Oracle 的 Java 网站安装 Java 软件开发工具包 (SDK): Java SE Downloads 。你将找到下载文件中的安装 JDK 的说明，按照给定的说明进行安装和配置。最后设置 PATH 和 JAVA_HOME 环境变量，分别指向包含 java 和 javac 的目录，通常是 java_install_dir/bin 和 java_install_dir。

设置 JAVA_HOME 环境变量以指向安装 Java 的机器中的基本目录位置。例如

Sr.No.

OS & Output

Windows 将环境变量 JAVA_HOME 设置为 C:\Program Files\Java\jdk1.6.0_21

Linux export JAVA_HOME = /usr/local/java-current

Mac export JAVA_HOME = /Library/Java/Home

将 Java 编译器位置追加到系统路径中。

Sr.No.

OS & Output

Windows 把字符串 ;%JAVA_HOME%\bin 添加到系统变量 Path 的末尾。

Linux export PATH=$PATH:$JAVA_HOME/bin/

Mac not required

或者，如果您使用 Borland JBuilder、Eclipse、IntelliJ IDEA 或 Sun ONE Studio 等集成开发环境 (IDE)，请编译并运行一个简单程序以确认该 IDE 知道您安装 Java 的位置，否则请按照给定的 IDE 文档执行正确设置。

Step 3 - Setup Eclipse IDE

本教程中的所有示例均使用 Eclipse IDE 编写。因此，我建议您应该根据您的操作系统在您的机器上安装最新版本的 Eclipse。

要安装 Eclipse IDE，请从 https://www.eclipse.org/downloads/ 下载最新的 Eclipse 二进制文件。下载安装后，将二进制发行版解压缩到一个方便的位置。例如，在 Windows 上为 C:\eclipse，在 Linux/Unix 上为 /usr/local/eclipse，最后适当设置 PATH 变量。

可以在 Windows 机器上执行以下命令启动 Eclipse，或者您只需双击 eclipse.exe

%C:\eclipse\eclipse.exe

可以通过在 Unix（Solaris、Linux 等）机器上执行以下命令启动 Eclipse −

$/usr/local/eclipse/eclipse

如果在成功启动后一切正常，则应显示结果

Step 4: Install GWT SDK & Plugin for Eclipse

按照 Plugin for Eclipse (incl. SDKs) 链接处给出的说明安装适用于您机器上已安装的 Eclipse 版本的 GWT SDK 和插件。

在成功设置 GWT 插件后，如果一切正常，则应显示 Google icon 用红框标记的以下屏幕。

Step 5: Install Google Charts

从其 MVN Repository 页面下载最新的 Google 图表 jar 并将其添加到项目的类路径。

在 <project-name>.gwt.xml 文件中添加以下条目

<inherits name = "com.googlecode.gwt.charts.Charts"/>

GWT Google Charts - Configuration Syntax

在本章节中，我们将展示使用 GWT 中的 Google 图表 API 绘制图表所需的配置。

Step 1: Create GWT Application

按照以下步骤更新我们在 GWT - 创建应用程序章节中创建的 GWT 应用程序 -

Step

Description

在包 com.tutorialspoint 下使用名称 HelloWorld 创建一个项目，如 GWT - 创建应用程序章节中所述。

修改 HelloWorld.gwt.xml、HelloWorld.html 和 HelloWorld.java，如下所示。保持其他文件不变。

编译并运行应用程序以验证已实现逻辑的结果。

以下是修改后的模块描述符 src/com.tutorialspoint/HelloWorld.gwt.xml 的内容。

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <inherits name = 'com.google.gwt.user.User'/>
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>
   <inherits name="com.googlecode.gwt.charts.Charts"/>
   <source path = 'client'/>
   <source path = 'shared'/>
</module>

以下是修改后的 HTML 主机文件 war/HelloWorld.html 的内容。

<html>
   <head>
      <title>GWT Highcharts Showcase</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
   </head>
   <body>
   </body>
</html>

理解了配置后，我们将在最后看到更新的 HelloWorld.java。

Step 2: Create Configurations

Load Library and create chart

使用 ChartLoader 加载该库，然后创建图表。

ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
chartLoader.loadApi(new Runnable() {
   public void run() {
      // Create and attach the chart
      PieChart chart = new PieChart();
   }
});

DataTable

通过创建数据表配置详细信息。

// Prepare the data
DataTable data = DataTable.create();
data.addColumn(ColumnType.STRING, "Browser");
data.addColumn(ColumnType.NUMBER, "Percentage");
data.addRow("Firefox", 45.0);
data.addRow("IE", 26.8);
data.addRow("Chrome", 12.8);
data.addRow("Safari", 8.5);
data.addRow("Opera", 6.2);
data.addRow("Others", 0.7);

// Draw the chart
chart.draw(data);

Size

配置要设置的宽度和高度。

chart.setWidth("700px");
chart.setHeight("700px");

Step 3: Add the chart to parent panel.

我们将图表添加到根面板。

RootPanel.get().add(chart);

Example

考虑以下示例，以进一步了解配置语法 -

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.corechart.PieChart;

public class HelloWorld implements EntryPoint {
   private PieChart chart;

   private void initialize() {
      ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
      chartLoader.loadApi(new Runnable() {
         public void run() {
            // Create and attach the chart
            chart = new PieChart();
            RootPanel.get().add(chart);
            draw();
         }
      });
   }
   private void draw() {
      // Prepare the data
      DataTable data = DataTable.create();
      data.addColumn(ColumnType.STRING, "Browser");
      data.addColumn(ColumnType.NUMBER, "Percentage");
      data.addRow("Firefox", 45.0);
      data.addRow("IE", 26.8);
      data.addRow("Chrome", 12.8);
      data.addRow("Safari", 8.5);
      data.addRow("Opera", 6.2);
      data.addRow("Others", 0.7);

      // Draw the chart
      chart.draw(data);
      chart.setWidth("400px");
      chart.setHeight("400px");
   }
   public void onModuleLoad() {
      initialize();
   }
}

Result

验证结果。

GWT Google Charts - Area Charts

面积图用于绘制基于面积的图表。在本节中，我们将讨论以下类型的基于面积的图表。

Sr. No.	Chart Type / Description
1	Basic AreaBasic area chart
2	Area with negative values 具有负值的面积图。
3	Stacked area 区域彼此堆叠的图表。
4	Area with missing points 数据中缺少点的图表。

GWT Google Charts - Bar Charts

条形图用于绘制基于条形的图表。在这一部分中，我们将讨论以下类型的基于条形的图表。

Sr. No.	Chart Type / Description
1	Basic BarBasic bar chart
2	Grouped Bar Chart 分组条形图。
3	Stacked Bar 条形图具有相互堆叠的条形。
4	Negative Bar 具有负堆叠的条形图。
5	Diff Bar Chart 显示差异的条形图。

GWT Google Charts - Bubble Charts

气泡图用于绘制基于气泡的图表。在本部分中，我们将讨论以下类型的基于气泡的图表。

Sr. No.

Chart Type / Description

Basic BubbleBasic bubble chart.

Bubble chart with data labels 带数据标签的气泡图。

GWT Google Charts - Candlestick Charts

蜡烛图用于显示开盘价和收盘价的价值差异，通常用于表示股票。在本节中，我们将讨论以下类型的基于蜡烛的图表。

Sr. No.

Chart Type / Description

Basic CandlestickBasic Candlestick chart.

Candlestick with customized colors 自定义蜡烛图。

GWT Google Charts - Column Charts

柱形图用于绘制基于柱形的图表。在本节中，我们将讨论以下类型的基于柱形的图表。

Sr. No.	Chart Type / Description
1	Basic ColumnBasic colummn chart
2	Grouped Column Chart 分组柱形图。
3	Stacked Column 相互堆叠的列形图。
4	Negative Stacked Column 具有负堆叠的列形图。
5	Diff Column Chart 显示差异的列形图。

GWT Google Charts - Combination Chart

组合图表有助于将每个系列渲染为以下列表中的不同标记类型：线、面积、条形、蜡烛图和阶梯面积。要为系列分配默认标记类型，请使用 seriesType 属性。Series 属性用于分别指定每个系列的属性。以下是一个显示差异的列图示例。

我们已经看到了用于在 Google Charts Configuration Syntax 章节中绘制图表的配置。现在，让我们看一个显示差异的列图示例。

Configurations

我们已经使用 ComboChart 类来显示组合图表。

// Combination chart
ComboChart chart = new ComboChart();

Example

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.corechart.ComboChart;
import com.googlecode.gwt.charts.client.corechart.ComboChartOptions;
import com.googlecode.gwt.charts.client.corechart.ComboChartSeries;
import com.googlecode.gwt.charts.client.options.HAxis;
import com.googlecode.gwt.charts.client.options.SeriesType;
import com.googlecode.gwt.charts.client.options.VAxis;

public class HelloWorld implements EntryPoint {
   private ComboChart chart;

   private void initialize() {
      ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
      chartLoader.loadApi(new Runnable() {
         public void run() {
            // Create and attach the chart
            chart = new ComboChart();
            RootPanel.get().add(chart);
            draw();
         }
      });
   }
   private void draw() {
      // Prepare the data
      DataTable data = DataTable.create();
      data.addColumn(ColumnType.STRING, "Fruits");
      data.addColumn(ColumnType.NUMBER, "Jane");
      data.addColumn(ColumnType.NUMBER, "Jone");
      data.addColumn(ColumnType.NUMBER, "Average");

      data.addRow("Apples", 3, 2, 2.5);
      data.addRow("Oranges",2, 3, 2.5);
      data.addRow("Pears", 1, 5, 3);
      data.addRow("Bananas", 3, 9, 6);
      data.addRow("Plums", 4, 2, 3);

      // Set options
      ComboChartOptions options = ComboChartOptions.create();
      options.setTitle("Fruits distribution");
      options.setHAxis(HAxis.create("Person"));
      options.setVAxis(VAxis.create("Fruits"));
      options.setSeriesType(SeriesType.BARS);

      ComboChartSeries lineSeries = ComboChartSeries.create();
      lineSeries.setType(SeriesType.LINE);
      options.setSeries(2,lineSeries);

      // Draw the chart
      chart.draw(data,options);
      chart.setWidth("400px");
      chart.setHeight("400px");
   }
   public void onModuleLoad() {
      initialize();
   }
}

Result

验证结果。

GWT Google Charts - Histogram Charts

直方图是一个图表，它将数值数据分组为段，并将这些段显示为分段的列。它们用于描述数据集的分布情况，即值落入范围的频率。Google Charts 会自动为您选择段数。所有段等宽，高度与段中数据点的数量成比例。直方图在其他方面与柱状图类似。在该部分中，我们将讨论以下类型的基于直方图的图表。

Sr. No.	Chart Type / Description
1	Basic HistogramBasic Histogram chart.
2	Controlling Color 直方图图表自定义颜色。
3	Controlling Buckets 直方图图表自定义区间。
4	Multiple Series 具有多个系列的直方图图表。

GWT Google Charts - Line Charts

折线图用于绘制基于线的图表。在这一部分中，我们将讨论以下类型的基于线的图表。

Sr. No.	Chart Type / Description
1	Basic lineBasic line chart.
2	With visible points 具有可见数据点的图表。
3	Customizable background color 具有自定义背景色的图表。
4	Customizable line color 具有自定义线条颜色的图表。
5	Customizable axis and tick labels 具有自定义轴和刻度标签的图表。
6	Crosshairs 在选择时显示数据点处的十字线的折线图。
7	Customizable line style 具有自定义线条颜色的图表。
8	Line Charts with curved lines 具有平滑曲线线的图表。

GWT Google Charts - Maps Charts

Google 地图图表使用 Google 地图 API 来显示地图。数据值在地图上以标记显示。数据值可以是坐标（纬度和经度对）或实际地址。将按比例缩放地图，以便其包括所有已标识的点。

Sr. No.

Chart Type / Description

Basic MapBasic Google Map.

Map using Latitude/Longitude 使用纬度和经度指定位置的地图。

GWT Google Charts - Organization Chart

以下是组织结构图的示例。

组织结构图有助于呈现节点的层次结构，用于描绘组织中的上级/下级关系。例如，家谱是一种组织结构图。我们已经在 Google Charts Configuration Syntax 章节中看到用于绘制图表的配置。现在，让我们看一个组织结构图的示例。

Configurations

我们使用了 OrgChart 类来显示组织结构图。

// Organization chart
OrgChart chart = new OrgChart();

Example

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.format.PatternFormat;
import com.googlecode.gwt.charts.client.orgchart.OrgChart;
import com.googlecode.gwt.charts.client.orgchart.OrgChartOptions;

public class HelloWorld implements EntryPoint {
   private OrgChart chart;

   private void initialize() {
      ChartLoader chartLoader = new ChartLoader(ChartPackage.ORGCHART);
      chartLoader.loadApi(new Runnable() {
         public void run() {
            // Create and attach the chart
            chart = new OrgChart();
            RootPanel.get().add(chart);
            draw();
         }
      });
   }
   private void draw() {
      // Prepare the data
      DataTable dataTable = DataTable.create();
      dataTable.addColumn(ColumnType.STRING, "Name");
      dataTable.addColumn(ColumnType.STRING, "Manager");
      dataTable.addColumn(ColumnType.STRING, "ToolTip");
      dataTable.addRows(5);

      dataTable.setValue(0, 0, "Mike");
      dataTable.setValue(0, 1, "");
      dataTable.setValue(0, 2, "The President");
      dataTable.setValue(1, 0, "Jim");
      dataTable.setValue(1, 1, "Mike");
      dataTable.setValue(1, 2, "VP");
      dataTable.setValue(2, 0, "Alice");
      dataTable.setValue(2, 1, "Mike");
      dataTable.setValue(2, 2, "");
      dataTable.setValue(3, 0, "Bob");
      dataTable.setValue(3, 1, "Jim");
      dataTable.setValue(3, 2, "Bob Sponge");
      dataTable.setValue(4, 0, "Carol");
      dataTable.setValue(4, 1, "Bob");
      dataTable.setValue(4, 2, "");

      PatternFormat format = PatternFormat.create("{0} {1}");
      format.format(dataTable, 0, 2);

      // Set options
      OrgChartOptions options = OrgChartOptions.create();
      options.setAllowHtml(true);

      // Draw the chart
      chart.draw(dataTable, options);
      chart.setWidth("400px");
      chart.setHeight("400px");
   }
   public void onModuleLoad() {
      initialize();
   }
}

Result

验证结果。

GWT Google Charts - Pie Charts

饼状图用于绘制基于饼状图的图表。在本部分，我们将讨论以下类型的基于饼状图的图表。

Sr. No.	Chart Type / Description
1	Basic PieBasic pie chart.
2	Donut ChartDonut Chart.
3	3D Pie chart 3D 饼状图。
4	Pie chart with exploded slices 带爆炸切片的饼状图。

GWT Google Charts - Sankey Charts

Sankey 图是一种可视化工具，用于描述从一组值到另一组值之间的流程。连接对象称为节点，连接称为链接。Sankey 图用于显示两个域之间的多对多映射或一组阶段中的多条路径。

Sr. No.

Chart Type / Description

Basic Sankey Chart 基本 Sankey 图。

Multilevel Sankey Chart 多级 Sankey 图。

Customizing Sankey Chart 自定义 Sankey 图。

GWT Google Charts - Scatter Chart

以下是一个散点图示例。

我们已经看到了用于在 Google Charts Configuration Syntax 章节中绘制图表所使用的配置。现在，让我们看一个散点图示例。

Configurations

我们已经使用了 ScatterChart 类来显示散点图。

ScatterChart chart = new ScatterChart();

Example

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.corechart.ScatterChart;
import com.googlecode.gwt.charts.client.corechart.ScatterChartOptions;

public class HelloWorld implements EntryPoint {
   private ScatterChart chart;

   private void initialize() {
      ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
      chartLoader.loadApi(new Runnable() {
         public void run() {
            // Create and attach the chart
            chart = new ScatterChart();
            RootPanel.get().add(chart);
            draw();
         }
      });
   }
   private void draw() {
      // Prepare the data
      DataTable data = DataTable.create();
      data.addColumn(ColumnType.NUMBER, "Age");
      data.addColumn(ColumnType.NUMBER, "Weight");

      data.addRow(8,12);
      data.addRow(4, 5.5);
      data.addRow(11,14);
      data.addRow(4,5);
      data.addRow(3,3.5);
      data.addRow(6.5,7);

      ScatterChartOptions options  = ScatterChartOptions.create();
      options.setTitle("Age vs Weight");
      options.setLegend(null);

      // Draw the chart
      chart.draw(data, options);
      chart.setWidth("400px");
      chart.setHeight("400px");
   }
   public void onModuleLoad() {
      initialize();
   }
}

Result

验证结果。

GWT Google Charts - Stepped Charts

阶梯形面积图是一种基于阶梯的面积图。我们将讨论以下类型的阶梯形面积图。

Sr. No.

Chart Type / Description

Basic Stepped Chart 基本阶梯形面积图。

Stacked Stepped Chart 堆叠阶梯形面积图。

GWT Google Charts - Table Chart

表格图有助于呈现一个可以排序和分页的表格。可以使用格式字符串或通过直接插入 HTML 作为单元格值来设置表格单元格的格式。数字值默认右对齐；布尔值显示为对勾或叉号。用户可以使用键盘或鼠标选择单行。列标题可用于排序。滚动期间标题行保持固定。该表格会触发与用户交互相对应的事件。

我们在 Google Charts Configuration Syntax 章节中已经看到了用于绘制图表的配置。现在，让我们来看一个表格图的示例。

Configurations

我们使用 Table 类来显示表格图。

Table chart = new Chart();

Example

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.table.Table;
import com.googlecode.gwt.charts.client.table.TableOptions;

public class HelloWorld implements EntryPoint {
   private Table chart;

   private void initialize() {
      ChartLoader chartLoader = new ChartLoader(ChartPackage.TABLE);
      chartLoader.loadApi(new Runnable() {
         public void run() {
            // Create and attach the chart
            chart = new Table();
            RootPanel.get().add(chart);
            draw();
         }
      });
   }
   private void draw() {
      // Prepare the data
      DataTable dataTable = DataTable.create();
      dataTable.addColumn(ColumnType.STRING, "Name");
      dataTable.addColumn(ColumnType.NUMBER, "Salary");
      dataTable.addColumn(ColumnType.BOOLEAN, "Full Time Employee");
      dataTable.addRows(4);

      dataTable.setCell(0, 0, "Mike");
      dataTable.setCell(0, 1, 10000, "$10,000");
      dataTable.setCell(0, 2, true);
      dataTable.setCell(1, 0, "Jim");
      dataTable.setCell(1, 1, 8000, "$8,000");
      dataTable.setCell(1, 2, false);
      dataTable.setCell(2, 0, "Alice");
      dataTable.setCell(2, 1, 12500, "$12,500");
      dataTable.setCell(2, 2, true);
      dataTable.setCell(3, 0, "Bob");
      dataTable.setCell(3, 1, 7000, "$7,000");
      dataTable.setCell(3, 2, true);

      TableOptions options  = TableOptions.create();
      options.setAlternatingRowStyle(true);
      options.setShowRowNumber(true);

      // Draw the chart
      chart.draw(dataTable, options);
      chart.setWidth("400px");
      chart.setHeight("400px");
   }
   public void onModuleLoad() {
      initialize();
   }
}

Result

验证结果。

GWT Google Charts - TreeMap Chart

树状图是对数据树的可视化表示，其中每个节点可以有零个或多个子节点和一个父节点（根节点除外）。每个节点都显示为一个矩形，可以根据我们分配的值调整大小和颜色。大小和颜色是相对于图中所有其他节点进行估值的。以下是树状图表的示例。

我们在 Google Charts Configuration Syntax 章节中已经看到了用于绘制图表的配置。现在，让我们来看一个树状图表的示例。

Configurations

我们使用 TreeMap 类来显示树状图。

TreeMap chart = new TreeMap();

Example

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

Result

验证结果。