GWT Google Charts - 快速指南

GWT Google Charts - Overview

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

Google Chart Java Module是一个基于Google Chart Java Module开源库，可在GWT应用程序中提供优雅且功能丰富的Google Charts可视化，并可与GWT小部件库一起使用。有章节讨论了Google图表的所有基本组件，并在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 - 当用户将鼠标悬停在图表上的任意点时，就会出现Configurable tooltips提示。 googlecharts提供工具提示内置格式化程序或回调格式化程序，以编程方式控制工具提示。
DateTime support - 特别处理日期时间。提供多个日期明智类别的内置控件。
Print - 使用网页打印图表。
External data - 支持从服务器动态加载数据。使用回调函数提供对数据的控制。
Text Rotation - 支持在任何方向上旋转标签。

支持的图表类型

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

Sr. No.	图表类型/描述
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是开源的，可以免费使用。请点击链接: 服务条款。

GWT Google Charts - Environment Setup

本教程将指导您如何准备开发环境以开始使用Google Charts和GWT Framework。本教程还将教您如何在设置GWT框架之前在您的机器上设置JDK，Tomcat和Eclipse -

系统需求 (System Requirement)

GWT需要JDK 1.6或更高版本，因此第一个要求是在您的计算机上安装JDK。

JDK	1.6或以上。
记忆	没有最低要求。
磁盘空间	没有最低要求。
操作系统	没有最低要求。

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

步骤1 - 验证计算机上的Java安装

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

OS	任务	命令
Windows	打开命令控制台	c:\> java -version
Linux	打开命令终端	$ java -version
Mac	开放式终端	机器:~joseph $ java -version

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

Sr.No.	操作系统和生成的输出
1	Windows java版“1.6.0_21” Java（TM）SE运行时环境（版本1.6.0_21-b07） Java HotSpot（TM）客户端VM（版本17.0-b17，混合模式，共享）
2	Linux java版“1.6.0_21” Java（TM）SE运行时环境（版本1.6.0_21-b07） ava HotSpot（TM）客户端VM（版本17.0-b17，混合模式，共享）
3	Mac java版“1.6.0_21” Java（TM）SE运行时环境（版本1.6.0_21-b07） Java HotSpot（TM）64位服务器VM（内置17.0-b17，混合模式，共享）

Sr.No.

操作系统和生成的输出

Windows

java版“1.6.0_21”

Java（TM）SE运行时环境（版本1.6.0_21-b07）

Java HotSpot（TM）客户端VM（版本17.0-b17，混合模式，共享）

Linux

java版“1.6.0_21”

Java（TM）SE运行时环境（版本1.6.0_21-b07）

ava HotSpot（TM）客户端VM（版本17.0-b17，混合模式，共享）

Mac

java版“1.6.0_21”

Java（TM）SE运行时环境（版本1.6.0_21-b07）

Java HotSpot（TM）64位服务器VM（内置17.0-b17，混合模式，共享）

第2步 - 安装Java开发工具包（JDK）

如果您没有安装Java，那么您可以从Oracle的Java站点安装Java软件开发工具包（SDK）: Java SE下载。您将找到有关在下载文件中安装JDK的说明，请按照给出的说明安装和配置设置。最后设置PATH和JAVA_HOME环境变量来引用包含java和javac的目录，通常分别是java_install_dir/bin和java_install_dir。

将JAVA_HOME环境变量设置为指向计算机上安装Java的基本目录位置。例如

Sr.No.	操作系统和输出
1	Windows 将环境变量JAVA_HOME设置为C:\Program Files\Java\jdk1.6.0_21
2	Linux export JAVA_HOME =/usr/local/java-current
3	Mac export JAVA_HOME =/Library/Java/Home

Sr.No.

操作系统和输出

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.	操作系统和输出
1	Windows 将字符串;％JAVA_HOME％\ bin附加到系统变量Path的末尾。
2	Linux export PATH = $ PATH:$ JAVA_HOME/bin/
3	Mac 不需要

Sr.No.

操作系统和输出

Windows

将字符串;％JAVA_HOME％\ bin附加到系统变量Path的末尾。

Linux

export PATH = $ PATH:$ JAVA_HOME/bin/

Mac

不需要

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

第3步 - 安装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

成功启动后，如果一切正常，那么它应该显示结果

第4步:为Eclipse安装GWT SDK和插件

按照Eclipse插件（包括SDK）链接中的说明安装机器上安装的Eclipse版本的GWT SDK和插件。

成功设置GWT插件后，如果一切正常，则应显示以下屏幕，其中Google icon标有红色矩形。

第5步:安装Google Charts

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

在 .gwt.xml文件中添加以下条目

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

GWT Google Charts - Configuration Syntax

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

第1步:创建GWT应用程序

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

步	描述
1	在com.iowiki包下创建一个名为HelloWorld的项目，如GWT - Create Application一章中所述。
2	修改HelloWorld.gwt.xml ， HelloWorld.html和HelloWorld.java ，如下所述。保持其余文件不变。
3	编译并运行应用程序以验证实现的逻辑的结果。

以下是修改后的模块描述符src/com.iowiki/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.iowiki.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。

第2步:创建配置

加载库并创建图表

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

第3步:将图表添加到父面板。

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

RootPanel.get().add(chart);

例子 (Example)

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

HelloWorld.java

package com.iowiki.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.	图表类型/描述
1	基本区域基本面积图
2	具有负值的区域具有负值的面积图。
3	堆积区域具有彼此堆叠的区域的图表。
4	缺少积分的区域数据中缺少点的图表。

GWT Google Charts - Bar Charts

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

Sr. No.	图表类型/描述
1	基本酒吧基本条形图
2	分组条形图分组条形图。
3	堆积吧条形图有条形堆叠在一起。
4	否定吧条形图与负堆栈。
5	差异条形图条形图显示差异。

GWT Google Charts - Bubble Charts

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

Sr. No.	图表类型/描述
1	基本泡泡基本气泡图。
2	气泡图与数据标签气泡图与数据标签。

GWT Google Charts - Candlestick Charts

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

Sr. No.	图表类型/描述
1	基本烛台基本烛台图表。
2	烛台定制的颜色自定义烛台图表。

GWT Google Charts - Column Charts

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

Sr. No.	图表类型/描述
1	基本栏目基本的柱状图
2	分组柱形图 Columped Colummn chart。
3	堆积柱柱子的柱子有相互叠加的柱子。
4	负堆积柱与负堆栈的Colummn图表。
5	差异柱形图显示差异的Colummn图表。

GWT Google Charts - Combination Chart

组合图有助于将每个系列渲染为以下列表中的不同标记类型:线条，区域，条形，烛台和阶梯区域。要为系列指定默认标记类型，请使用seriesType属性。 Series属性用于单独指定每个系列的属性。以下是显示差异的柱形图的示例。

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

配置 (Configurations)

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

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

例子 (Example)

HelloWorld.java

package com.iowiki.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.	图表类型/描述
1	基本直方图基本直方图。
2	控制颜色自定义颜色的Histrogram图表。
3	控制铲斗定制的Histrogram图表桶。
4	多系列具有多个系列的Histrogram Chart。

GWT Google Charts - Line Charts

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

Sr. No.	图表类型/描述
1	基本路线基本折线图。
2	有可见点带有可见数据点的图表。
3	可定制的背景颜色图表与自定义的背景颜色。
4	可定制的线条颜色带自定义线条颜色的图表。
5	可自定义的轴和刻度标签带有自定义轴和刻度标签的图表。
6	Crosshairs 折线图显示选择时数据点的十字准线。
7	可定制的线条样式带自定义线条颜色的图表。
8	线图与曲线具有平滑曲线的图表。

GWT Google Charts - Maps Charts

Google地图图表使用Google Maps API显示地图。数据值在地图上显示为标记。数据值可以是坐标（纬度 - 长对）或实际地址。地图将相应地缩放，以便包括所有已识别的点。

Sr. No.	图表类型/描述
1	基本地图基本的谷歌地图。
2	使用纬度/经度映射使用纬度和经度指定地点的地图。

GWT Google Charts - Organization Chart

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

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

配置 (Configurations)

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

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

例子 (Example)

HelloWorld.java

package com.iowiki.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.	图表类型/描述
1	基本派基本饼图。
2	甜甜圈图表甜甜圈图表。
3	3D饼图 3D饼图。
4	饼图与爆炸片饼图与爆炸片。

GWT Google Charts - Sankey Charts

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

Sr. No.	图表类型/描述
1	基本的Sankey图表基本的Sankey图表。
2	多级Sankey图表多级Sankey图表。
3	自定义Sankey图表定制的Sankey图表。

GWT Google Charts - Scatter Chart

以下是散点图的示例。

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

配置 (Configurations)

我们使用ScatterChart类来显示Scatter图表。

ScatterChart chart = new ScatterChart();

例子 (Example)

HelloWorld.java

package com.iowiki.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.	图表类型/描述
1	基本步骤图表基本阶梯面积图。
2	堆积的阶梯图堆叠的阶梯区域图。

GWT Google Charts - Table Chart

表格图表有助于呈现可以进行排序和分页的表格。可以使用格式字符串格式化表格单元格，也可以直接将HTML作为单元格值插入。默认情况下，数值是右对齐的; 布尔值显示为复选标记或十字标记。用户可以使用键盘或鼠标选择单行。列标题可用于排序。滚动期间标题行保持固定。该表触发与用户交互相对应的事件。

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

配置 (Configurations)

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

Table chart = new Chart();

例子 (Example)

HelloWorld.java

package com.iowiki.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

TreeMap是数据树的直观表示，其中每个节点可以有零个或多个子节点，以及一个父节点（根节点除外）。每个节点都显示为一个矩形，可以根据我们指定的值进行调整大小和着色。尺寸和颜色相对于图中的所有其他节点进行估值。以下是树形图图表的示例。

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

配置 (Configurations)

我们使用TreeMap类来显示TreeMap图表。

TreeMap chart = new TreeMap();

例子 (Example)

HelloWorld.java

package com.iowiki.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)

验证结果。

<上一篇.GWT Google Charts - TreeMap Chart( TreeMap Chart)

GWT Google Charts - 资源.下一篇>

Sr. No.	图表类型/描述
1	基本区域基本面积图
2	具有负值的区域具有负值的面积图。
3	堆积区域具有彼此堆叠的区域的图表。
4	缺少积分的区域数据中缺少点的图表。

Sr. No.	图表类型/描述
1	基本酒吧基本条形图
2	分组条形图分组条形图。
3	堆积吧条形图有条形堆叠在一起。
4	否定吧条形图与负堆栈。
5	差异条形图条形图显示差异。

Sr. No.	图表类型/描述
1	基本栏目基本的柱状图
2	分组柱形图 Columped Colummn chart。
3	堆积柱柱子的柱子有相互叠加的柱子。
4	负堆积柱与负堆栈的Colummn图表。
5	差异柱形图显示差异的Colummn图表。

Sr. No.	图表类型/描述
1	基本直方图基本直方图。
2	控制颜色自定义颜色的Histrogram图表。
3	控制铲斗定制的Histrogram图表桶。
4	多系列具有多个系列的Histrogram Chart。

Sr. No.	图表类型/描述
1	基本路线基本折线图。
2	有可见点带有可见数据点的图表。
3	可定制的背景颜色图表与自定义的背景颜色。
4	可定制的线条颜色带自定义线条颜色的图表。
5	可自定义的轴和刻度标签带有自定义轴和刻度标签的图表。
6	Crosshairs 折线图显示选择时数据点的十字准线。
7	可定制的线条样式带自定义线条颜色的图表。
8	线图与曲线具有平滑曲线的图表。

GWT Google Charts - 教程

GWT Google Charts - 概述

环境设置(Environment Setup)

Configuration 语法

GWT Google Charts - 区域图表( Area Charts)

GWT谷歌图表 - 条形图( Bar Charts)

GWT谷歌图表 - 泡泡图表( Bubble Charts)

GWT谷歌图表 - 烛台( Candlestick)

GWT Google Charts - 柱形图( Column Charts)

GWT谷歌图表 - 组合( Combination)

GWT谷歌图表 - 直方图( Histogram)

GWT谷歌图表 - 折线图( Line Charts)

GWT Google Charts - Maps

GWT谷歌图表 - 组织( Organization)

GWT Google Charts - 饼图( Pie Charts)

GWT Google Charts - Sankey Charts( Sankey Charts)

GWT谷歌图表 - 散点图( Scatter Chart)

GWT谷歌图表 - 阶梯区( Stepped Area)

GWT谷歌图表 - 表格图表( Table Chart)

GWT Google Charts - TreeMap Chart( TreeMap Chart)