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 Charts is a pure JavaScript based charting library meant to enhance web applications by adding interactive charting capability. It supports a wide range of charts. Charts are drawn using SVG in standard browsers like Chrome, Firefox, Safari, Internet Explorer(IE). In legacy IE 6, VML is used to draw the graphics.

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

Google Chart Java Module is a open source java based library to provides an elegant and feature rich Google Charts visualizations within a GWT application and can be used along with GWT widget libraries. There are chapters discussing all the basic components of Google Charts with suitable examples within a GWT application.

Features

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

Following are the salient features of Google Charts library.

Compatability − Works seemlessly on all major browsers and mobile platforms like android and iOS.
Multitouch Support − Supports multitouch on touch screen based platforms like android and iOS. Ideal for iPhone/iPad and android based smart phones/ tablets.
Free to Use − Open source and is free to use for non-commercial purpose.
Lightweight − loader.js core library, is extremely lightweight library.
Simple Configurations − Uses json to define various configuration of the charts and very easy to learn and use.
Dynamic − Allows to modify chart even after chart generation.
Multiple axes − Not restricted to x, y axis. Supports multiple axis on the charts.
Configurable tooltips − Tooltip comes when a user hover over any point on a charts. googlecharts provides tooltip inbuilt formatter or callback formatter to control the tooltip programmatically.
DateTime support − Handle date time specially. Provides numerous inbuilt controls over date wise categories.
Print − Print chart using web page.
External data − Supports loading data dynamically from server. Provides control over data using callback functions.
Text Rotation − Supports rotation of labels in any direction.

Supported Chart Types

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

Google Charts library provides following types of charts −

Sr. No.	Chart Type / Description
1	Line Charts Used to draw line/spline based charts.
2	Area Charts Used to draw area wise charts.
3	Pie Charts Used to draw pie charts.
4	Sankey Charts, Scatter Charts, Stepped area charts, Table, Timelines, TreeMap, Trendlines Used to draw scattered charts.
5	Bubble Charts Used to draw bubble based charts.
6	Dynamic Charts Used to draw dynamic charts where user can modify charts.
7	Combinations Used to draw combinations of variety of charts.
8	3D Charts Used to draw 3D charts.
9	Angular Gauges Used to draw speedometer type charts.
10	Heat Maps Used to draw heat maps.
11	Tree Maps Used to draw tree maps.

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

In next chapters, we’re going to discuss each type of above mentioned charts in details with examples.

Licence

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

Google Charts is open source and is free to use. Follow the link: Terms of Service.

GWT Google Charts - Environment Setup

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

This tutorial will guide you on how to prepare a development environment to start your work with Google Charts and GWT Framework. This tutorial will also teach you how to setup JDK, Tomcat and Eclipse on your machine before you setup GWT Framework −

System Requirement

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

GWT requires JDK 1.6 or higher so the very first requirement is to have JDK installed in your machine.

JDK

1.6 or above.

Memory

no minimum requirement.

Disk Space

no minimum requirement.

Operating System

no minimum requirement.

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

Follow the given steps to setup your environment to start with GWT application development.

Step 1 - Verify Java Installation on your Machine

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

Now open console and execute the following java command.

Task

Command

Windows

Open Command Console

c:> java -version

Linux

Open Command Terminal

$ java -version

Mac

Open Terminal

machine:~ joseph$ java -version

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

Let’s verify the output for all the operating systems

Sr.No.

OS & Generated Output

Windows java version "1.6.0_21" Java™ SE Runtime Environment (build 1.6.0_21-b07) Java HotSpot™ Client VM (build 17.0-b17, mixed mode, sharing)

Linux java version "1.6.0_21" Java™ SE Runtime Environment (build 1.6.0_21-b07) ava HotSpot™ Client VM (build 17.0-b17, mixed mode, sharing)

Mac java version "1.6.0_21" Java™ SE Runtime Environment (build 1.6.0_21-b07) Java HotSpot™64-Bit Server VM (build 17.0-b17, mixed mode, sharing)

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。

If you do not have Java installed then you can install the Java Software Development Kit (SDK) from Oracle’s Java site: Java SE Downloads. You will find instructions for installing JDK in downloaded files, follow the given instructions to install and configure the setup. Finally set PATH and JAVA_HOME environment variables to refer to the directory that contains java and javac, typically java_install_dir/bin and java_install_dir respectively.

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

Set the JAVA_HOME environment variable to point to the base directory location where Java is installed on your machine. For example

Sr.No.

OS & Output

Windows Set the environment variable JAVA_HOME to C:\Program Files\Java\jdk1.6.0_21

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

Mac export JAVA_HOME = /Library/Java/Home

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

Append Java compiler location to System Path.

Sr.No.

OS & Output

Windows Append the string ;%JAVA_HOME%\bin to the end of the system variable, Path.

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

Mac not required

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

Alternatively, if you use an Integrated Development Environment (IDE) like Borland JBuilder, Eclipse, IntelliJ IDEA, or Sun ONE Studio, compile and run a simple program to confirm that the IDE knows where you installed Java, otherwise do proper setup as given document of the IDE.

Step 3 - Setup Eclipse IDE

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

All the examples in this tutorial have been written using Eclipse IDE. So I would suggest you should have latest version of Eclipse installed on your machine based on your operating system.

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

To install Eclipse IDE, download the latest Eclipse binaries from https://www.eclipse.org/downloads/. Once you downloaded the installation, unpack the binary distribution into a convenient location. For example in C:\eclipse on windows, or /usr/local/eclipse on Linux/Unix and finally set PATH variable appropriately.

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

Eclipse can be started by executing the following commands on windows machine, or you can simply double click on eclipse.exe

%C:\eclipse\eclipse.exe

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

Eclipse can be started by executing the following commands on Unix (Solaris, Linux, etc.) machine −

$/usr/local/eclipse/eclipse

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

After a successful startup, if everything is fine then it should display result

Step 4: Install GWT SDK & Plugin for Eclipse

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

Follow the instructions given at the link Plugin for Eclipse (incl. SDKs) to install GWT SDK & Plugin for Eclipse version installed on your machine.

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

After a successful setup for the GWT plugin, if everything is fine then it should display following screen with Google icon marked with red rectangle.

Step 5: Install Google Charts

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

Download the latest Google Charts jar from its MVN Repositorypage and add it to project’s classpath.

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

Add the following entry in <project-name>.gwt.xml file

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

GWT Google Charts - Configuration Syntax

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

In this chapter, we will showcase the configuration required to draw a chart using the Google Charts API in GWT.

Step 1: Create GWT Application

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

Follow the following steps to update the GWT application we created in GWT - Create Application chapter −

Step

Description

Create a project with a name HelloWorld under a package com.tutorialspoint as explained in the GWT - Create Application chapter.

Modify HelloWorld.gwt.xml, HelloWorld.html and HelloWorld.java as explained below. Keep rest of the files unchanged.

Compile and run the application to verify the result of the implemented logic.

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

Following is the content of the modified module descriptor 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 的内容。

Following is the content of the modified HTML host file 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。

We’ll see the updated HelloWorld.java in the end after understanding configurations.

Step 2: Create Configurations

Load Library and create chart

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

Load the library using ChartLoader and then create the chart.

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

DataTable

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

Configure the details by creating a data table.

// 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

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

Configure the width and height to be set.

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

Step 3: Add the chart to parent panel.

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

We’re adding the chart to root panel.

RootPanel.get().add(chart);

Example

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

Consider the following example to further understand the Configuration Syntax −

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

验证结果。

Verify the result.

GWT Google Charts - Area Charts

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

Area charts are used to draw area based charts. In this section we’re going to discuss following types of area based charts.

Sr. No.	Chart Type / Description
1	Basic AreaBasic area chart
2	Area with negative valuesArea chart having negative values.
3	Stacked areaChart having areas stacked over one another.
4	Area with missing pointsChart with missing points in the data.

GWT Google Charts - Bar Charts

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

Bar charts are used to draw bar based charts. In this section we’re going to discuss following types of bar based charts.

Sr. No.	Chart Type / Description
1	Basic BarBasic bar chart
2	Grouped Bar ChartGrouped Bar chart.
3	Stacked BarBar chart having bar stacked over one another.
4	Negative BarBar chart with negative stack.
5	Diff Bar ChartBar chart showing Differences.

GWT Google Charts - Bubble Charts

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

Bubble charts are used to draw bubble based charts. In this section we’re going to discuss following types of bubble based charts.

Sr. No.

Chart Type / Description

Basic BubbleBasic bubble chart.

Bubble chart with data labelsBubble chart with data labels.

GWT Google Charts - Candlestick Charts

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

Candlestick charts are used to show opening and closing value over a value variance and are normally used to represent stocks. In this section we’re going to discuss following types of candlestick based charts.

Sr. No.

Chart Type / Description

Basic CandlestickBasic Candlestick chart.

Candlestick with customized colorsCustomized Candlestick Chart.

GWT Google Charts - Column Charts

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

Colummn charts are used to draw colummn based charts. In this section we’re going to discuss following types of colummn based charts.

Sr. No.	Chart Type / Description
1	Basic ColumnBasic colummn chart
2	Grouped Column ChartGrouped Colummn chart.
3	Stacked ColumnColummn chart having colummn stacked over one another.
4	Negative Stacked ColumnColummn chart with negative stack.
5	Diff Column ChartColummn chart showing Differences.

GWT Google Charts - Combination Chart

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

Combination chart helps in rendering each series as a different marker type from the following list: line, area, bars, candlesticks, and stepped area. To assign a default marker type for series, use the seriesType property. Series property is to be used to specify properties of each series individually. Following is an example of a Column Chart showing differences.

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

We have already seen the configurations used to draw a chart in Google Charts Configuration Syntax chapter. Now, let us see an example of a Column Chart showing differences.

Configurations

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

We’ve used ComboChart class to show a Combination Chart.

// 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

验证结果。

Verify the result.

GWT Google Charts - Histogram Charts

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

A histogram is a chart that groups numeric data into buckets, displaying the buckets as segmented columns. They’re used to depict the distribution of a dataset as how often values fall into ranges. Google Charts automatically chooses the number of buckets for you. All buckets are equal width and have a height proportional to the number of data points in the bucket. Histograms are similar to column charts in other aspects. In this section we’re going to discuss following types of histogram based charts.

Sr. No.	Chart Type / Description
1	Basic HistogramBasic Histogram chart.
2	Controlling ColorCustomized Color of Histrogram Chart.
3	Controlling BucketsCustomized Buckets of Histrogram Chart.
4	Multiple SeriesHistrogram Chart having multiple series.

GWT Google Charts - Line Charts

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

Line charts are used to draw line based charts. In this section we’re going to discuss following types of line based charts.

Sr. No.	Chart Type / Description
1	Basic lineBasic line chart.
2	With visible pointsChart with visible data points.
3	Customizable background colorChart with customized background color.
4	Customizable line colorChart with customized line color.
5	Customizable axis and tick labelsChart with customized axis and tick labels.
6	CrosshairsLine charts showing crosshairs at data point on selection.
7	Customizable line styleChart with customized line color.
8	Line Charts with curved linesChart with smooth curve lines.

GWT Google Charts - Maps Charts

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

A Google Map Chart uses Google Maps API to display Map. Data values are displayed as markers on the map. Data values may be coordinates (lat-long pairs) or actual addresses. The map will be scaled accordingly so that it includes all the identified points.

Sr. No.

Chart Type / Description

Basic MapBasic Google Map.

Map using Latitude/LongitudeMap having locations specified using Latitude and Longitude.

GWT Google Charts - Organization Chart

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

Following is an example of a Organization Chart.

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

Organization chart helps in rendering a hierarchy of nodes, used to portray superior/subordinate relationships in an organization. For example, A family tree is a type of org chart. We have already seen the configurations used to draw a chart in Google Charts Configuration Syntax chapter. Now, let us see an example of a Organization Chart.

Configurations

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

We’ve used OrgChart class to show a Organization Chart.

// 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

验证结果。

Verify the result.

GWT Google Charts - Pie Charts

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

Pie charts are used to draw pie based charts. In this section we’re going to discuss following types of pie based charts.

Sr. No.	Chart Type / Description
1	Basic PieBasic pie chart.
2	Donut ChartDonut Chart.
3	3D Pie chart3D Pie chart.
4	Pie chart with exploded slicesPie chart with exploded slices.

GWT Google Charts - Sankey Charts

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

A sankey chart is a visualization tool and is used to depict a flow from one set of values to another. Connected objects are called nodes and the connections are called links. Sankeys are used to show a many-to-many mapping between two domains or multiple paths through a set of stages.

Sr. No.

Chart Type / Description

Basic Sankey ChartBasic Sankey Chart.

Multilevel Sankey ChartMultilevel Sankey Chart.

Customizing Sankey ChartCustomized Sankey Chart.

GWT Google Charts - Scatter Chart

以下是一个散点图示例。

Following is an example of a Scatter Chart.

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

We have already seen the configurations used to draw a chart in Google Charts Configuration Syntax chapter. Now, let us see an example of a Scatter Chart.

Configurations

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

We’ve used ScatterChart class to show a Scatter chart.

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

验证结果。

Verify the result.

GWT Google Charts - Stepped Charts

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

A stepped area chart is a step based area chart. We’re going to discuss following types of stepped area charts.

Sr. No.

Chart Type / Description

Basic Stepped ChartBasic Stepped Area Chart.

Stacked Stepped ChartStacked Stepped Area Chart.

GWT Google Charts - Table Chart

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

Table chart helps in rendering a table which can be sorted and paged. Table cells can be formatted using format strings, or by directly inserting HTML as cell values. Numeric values are right-aligned by default; boolean values are displayed as check marks or cross marks. Users can select single rows either with the keyboard or the mouse. Column headers can be used for sorting. The header row remains fixed during scrolling. The table fires events corresponding to user interaction.

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

We have already seen the configurations used to draw a chart in Google Charts Configuration Syntax chapter. Now, let us see an example of a Table Chart.

Configurations

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

We’ve used Table class to show a Table chart.

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

验证结果。

Verify the result.

GWT Google Charts - TreeMap Chart

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

TreeMap is a visual representation of a data tree, where each node may have zero or more children, and one parent (except for the root). Each node is displayed as a rectangle, can be sized and colored according to values that we assign. Sizes and colors are valued relative to all other nodes in the graph. Following is an example of a treemap chart.

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

We have already seen the configurations used to draw a chart in Google Charts Configuration Syntax chapter. Now, let us see an example of a TreeMap Chart.

Configurations

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

We’ve used TreeMap class to show a TreeMap chart.

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

验证结果。

Verify the result.