GWT Google Charts 快速指南

GWT Google Charts - 概述

Google Charts 是一個基於純 JavaScript 的圖表庫，旨在透過新增互動式圖表功能來增強 Web 應用程式。它支援各種圖表。圖表使用 SVG 在 Chrome、Firefox、Safari、Internet Explorer (IE) 等標準瀏覽器中繪製。在舊版 IE 6 中，使用 VML 繪製圖形。

Google Chart Java 模組是一個基於開源 Java 的庫，它可以在 GWT 應用程式中提供優雅且功能豐富的 Google Charts 視覺化效果，並且可以與 GWT 小部件庫一起使用。各章節將討論 Google Charts 的所有基本元件，並在 GWT 應用程式中提供相應的示例。

特性

以下是 Google Charts 庫的主要特性。

相容性 - 在所有主要瀏覽器和移動平臺（如 Android 和 iOS）上都能無縫執行。
多點觸控支援 - 支援 Android 和 iOS 等觸控式螢幕平臺上的多點觸控。非常適合 iPhone/iPad 和基於 Android 的智慧手機/平板電腦。
免費使用 - 開源且可免費用於非商業用途。
輕量級 - loader.js 核心庫是一個極其輕量級的庫。
簡單的配置 - 使用 JSON 定義各種圖表配置，非常易於學習和使用。
動態 - 允許在圖表生成後修改圖表。
多軸 - 不限於 x、y 軸。支援圖表上的多軸。
可配置的工具提示 - 當用戶將滑鼠懸停在圖表上的任何點時，都會出現工具提示。googlecharts 提供內建格式化程式或回撥格式化程式來以程式設計方式控制工具提示。
日期時間支援 - 特殊處理日期時間。提供許多內建控制元件來控制日期類別。
列印 - 使用網頁列印圖表。
外部資料 - 支援從伺服器動態載入資料。使用回撥函式控制資料。
文字旋轉 - 支援任意方向的標籤旋轉。

支援的圖表型別

Google Charts 庫提供以下型別的圖表：

序號	圖表型別/描述
1	折線圖用於繪製基於線/樣條線的圖表。
2	面積圖用於繪製區域圖表。
3	餅圖用於繪製餅圖。
4	Sankey 圖、散點圖、階梯面積圖、表格圖、時間軸圖、樹狀圖、趨勢線用於繪製散點圖。
5	氣泡圖用於繪製基於氣泡的圖表。
6	動態圖表用於繪製動態圖表，使用者可以修改圖表。
7	組合圖用於繪製各種圖表的組合。
8	3D 圖表用於繪製 3D 圖表。
9	角度儀表用於繪製速度計型別圖表。
10	熱力圖用於繪製熱力圖。
11	樹狀圖用於繪製樹狀圖。

在接下來的章節中，我們將詳細討論上述每種型別的圖表以及示例。

許可證

Google Charts 是開源的，可以免費使用。請訪問以下連結：服務條款。

GWT Google Charts - 環境設定

本教程將指導您如何準備開發環境以開始使用 Google Charts 和 GWT 框架的工作。本教程還將教您如何在設定 GWT 框架之前在您的機器上設定 JDK、Tomcat 和 Eclipse：

系統要求

GWT 需要 JDK 1.6 或更高版本，因此首先需要在您的機器上安裝 JDK。

JDK	1.6 或更高版本。
記憶體	無最低要求。
磁碟空間	無最低要求。
作業系統	無最低要求。

按照以下步驟設定您的環境以開始 GWT 應用程式開發。

步驟 1 - 驗證您的機器上是否安裝了 Java

現在開啟控制檯並執行以下 java 命令。

作業系統	任務	命令
Windows	開啟命令控制檯	c:\> java -version
Linux	開啟命令終端	$ java -version
Mac	開啟終端	machine:~ joseph$ java -version

讓我們驗證所有作業系統的輸出

序號	作業系統和生成的輸出
1	Windows java version "1.6.0_21" Java(TM) SE Runtime Environment (build 1.6.0_21-b07) Java HotSpot(TM) Client VM (build 17.0-b17, mixed mode, sharing)
2	Linux java version "1.6.0_21" Java(TM) SE Runtime Environment (build 1.6.0_21-b07) ava HotSpot(TM) Client VM (build 17.0-b17, mixed mode, sharing)
3	Mac java version "1.6.0_21" Java(TM) SE Runtime Environment (build 1.6.0_21-b07) Java HotSpot(TM) 64-Bit Server VM (build 17.0-b17, mixed mode, sharing)

序號

作業系統和生成的輸出

Windows

java version "1.6.0_21"

Java(TM) SE Runtime Environment (build 1.6.0_21-b07)

Java HotSpot(TM) Client VM (build 17.0-b17, mixed mode, sharing)

Linux

java version "1.6.0_21"

Java(TM) SE Runtime Environment (build 1.6.0_21-b07)

ava HotSpot(TM) Client VM (build 17.0-b17, mixed mode, sharing)

Mac

java version "1.6.0_21"

Java(TM) SE Runtime Environment (build 1.6.0_21-b07)

Java HotSpot(TM) 64-Bit Server VM (build 17.0-b17, mixed mode, sharing)

步驟 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 在您的機器上安裝的基本目錄位置。例如

序號	作業系統和輸出
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

序號

作業系統和輸出

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 編譯器位置新增到系統路徑。

序號	作業系統和輸出
1	Windows 將字串 ;%JAVA_HOME%\bin 附加到系統變數 Path 的末尾。
2	Linux export PATH=$PATH:$JAVA_HOME/bin/
3	Mac 不需要

序號

作業系統和輸出

Windows

將字串 ;%JAVA_HOME%\bin 附加到系統變數 Path 的末尾。

Linux

export PATH=$PATH:$JAVA_HOME/bin/

Mac

不需要

或者，如果您使用整合開發環境 (IDE)，如 Borland JBuilder、Eclipse、IntelliJ IDEA 或 Sun ONE Studio，請編譯並執行一個簡單的程式以確認 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 圖示的以下螢幕。

步驟 5：安裝 Google Charts

從其MVN 儲存庫頁面下載最新的 Google Charts jar 並將其新增到專案的類路徑。

在<project-name>.gwt.xml 檔案中新增以下條目

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

GWT Google Charts - 配置語法

在本章中，我們將展示在 GWT 中使用 Google Charts API 繪製圖表所需的配置。

步驟 1：建立 GWT 應用程式

按照以下步驟更新我們在GWT - 建立應用程式章節中建立的 GWT 應用程式：

步驟	描述
1	在GWT - 建立應用程式章節中解釋的包com.tutorialspoint下建立一個名為HelloWorld的專案。
2	修改HelloWorld.gwt.xml、HelloWorld.html和HelloWorld.java，如下所示。保持其餘檔案不變。
3	編譯並執行應用程式以驗證已實現邏輯的結果。

以下是修改後的模組描述符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。

步驟 2：建立配置

載入庫並建立圖表

使用 ChartLoader 載入庫，然後建立圖表。

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

資料表

透過建立資料表來配置詳細資訊。

// 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("700px");
chart.setHeight("700px");

步驟 3：將圖表新增到父面板。

我們將圖表新增到根面板。

RootPanel.get().add(chart);

示例

考慮以下示例以進一步瞭解配置語法：

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

結果

驗證結果。

GWT Google Charts - 面積圖

面積圖用於繪製基於區域的圖表。在本節中，我們將討論以下型別的基於區域的圖表。

序號	圖表型別/描述
1	基本區域基本區域圖
2	具有負值的區域具有負值的區域圖。
3	堆疊區域圖表具有相互堆疊的區域。
4	缺少點的區域資料中缺少點的圖表。

GWT Google Charts - 條形圖

條形圖用於繪製基於條形的圖表。在本節中，我們將討論以下型別的基於條形的圖表。

序號	圖表型別/描述
1	基本條形圖基本條形圖
2	分組條形圖分組條形圖。
3	堆疊條形圖條形圖具有相互堆疊的條形。
4	負條形圖具有負堆疊的條形圖。
5	差異條形圖顯示差異的條形圖。

GWT Google Charts - 氣泡圖

氣泡圖用於繪製基於氣泡的圖表。在本節中，我們將討論以下型別的基於氣泡的圖表。

序號	圖表型別/描述
1	基本氣泡基本氣泡圖。
2	帶有資料標籤的氣泡圖帶有資料標籤的氣泡圖。

GWT Google Charts - K線圖

K線圖用於顯示某個值方差上的開盤價和收盤價，通常用於表示股票。在本節中，我們將討論以下型別的基於 K 線的圖表。

序號	圖表型別/描述
1	基本 K 線圖基本 K 線圖。
2	具有自定義顏色的 K 線圖自定義 K 線圖。

GWT Google Charts - 柱狀圖

柱狀圖用於繪製基於柱狀的圖表。在本節中，我們將討論以下型別的基於柱狀的圖表。

序號	圖表型別/描述
1	基本柱狀圖基本柱狀圖
2	分組柱狀圖分組柱狀圖。
3	堆疊柱狀圖柱狀圖，各列彼此堆疊。
4	負值堆疊柱狀圖帶有負值堆疊的柱狀圖。
5	差異柱狀圖顯示差異的柱狀圖。

GWT Google Charts - 組合圖

組合圖可以將每個系列呈現為以下列表中的不同標記型別：折線、區域、條形、燭形圖和階梯區域。要為系列分配預設標記型別，請使用 seriesType 屬性。Series 屬性用於單獨指定每個系列的屬性。以下是一個顯示差異的柱狀圖示例。

我們已經在Google Charts 配置語法章節中看到了用於繪製圖表配置。現在，讓我們來看一個顯示差異的柱狀圖示例。

配置

我們使用了ComboChart類來顯示組合圖。

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

示例

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

結果

驗證結果。

GWT Google Charts - 直方圖

直方圖是一種將數值資料分組到區間（桶）中，並將區間顯示為分段列的圖表。它們用於描述資料集的分佈，即值落在哪些範圍內的頻率。Google Charts 會自動為您選擇區間數。所有區間寬度相等，高度與區間內資料點的數量成比例。直方圖在其他方面與柱狀圖類似。在本節中，我們將討論以下幾種基於直方圖的圖表型別。

序號	圖表型別/描述
1	基本直方圖基本的直方圖。
2	控制顏色自定義直方圖的顏色。
3	控制區間自定義直方圖的區間。
4	多個系列具有多個系列的直方圖。

GWT Google Charts - 折線圖

折線圖用於繪製基於線的圖表。在本節中，我們將討論以下幾種基於線的圖表型別。

序號	圖表型別/描述
1	基本折線圖基本的折線圖。
2	顯示資料點顯示可見資料點的圖表。
3	可自定義背景顏色具有自定義背景顏色的圖表。
4	可自定義線條顏色具有自定義線條顏色的圖表。
5	可自定義軸和刻度標籤具有自定義軸和刻度標籤的圖表。
6	十字準線在選擇資料點時顯示十字準線的折線圖。
7	可自定義線條樣式具有自定義線條顏色的圖表。
8	帶有曲線線的折線圖具有平滑曲線線的圖表。

GWT Google Charts - 地圖圖表

Google 地圖圖表使用 Google 地圖 API 來顯示地圖。資料值在地圖上顯示為標記。資料值可以是座標（經緯度對）或實際地址。地圖將相應縮放，以便包含所有已識別點。

序號	圖表型別/描述
1	基本地圖基本 Google 地圖。
2	使用經緯度的地圖使用經緯度指定位置的地圖。

GWT Google Charts - 組織結構圖

以下是一個組織結構圖示例。

組織結構圖有助於呈現節點層次結構，用於描繪組織中的上下級關係。例如，家譜就是一種組織結構圖。我們已經在Google Charts 配置語法章節中看到了用於繪製圖表的配置。現在，讓我們來看一個組織結構圖示例。

配置

我們使用了OrgChart類來顯示組織結構圖。

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

示例

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

結果

驗證結果。

GWT Google Charts - 餅圖

餅圖用於繪製基於餅的圖表。在本節中，我們將討論以下幾種基於餅的圖表型別。

序號	圖表型別/描述
1	基本餅圖基本的餅圖。
2	環形圖環形圖。
3	3D 餅圖 3D 餅圖。
4	帶有分離扇區的餅圖帶有分離扇區的餅圖。

GWT Google Charts - Sankey 圖

桑基圖是一種視覺化工具，用於描述從一組值到另一組值的流。連線的物件稱為節點，連線稱為連結。桑基圖用於顯示兩個域之間的多對多對映或透過一組階段的多個路徑。

序號	圖表型別/描述
1	基本桑基圖基本的桑基圖。
2	多級桑基圖多級桑基圖。
3	自定義桑基圖自定義的桑基圖。

GWT Google Charts - 散點圖

以下是一個散點圖示例。

我們已經在Google Charts 配置語法章節中看到了用於繪製圖表的配置。現在，讓我們來看一個散點圖示例。

配置

我們使用了ScatterChart類來顯示散點圖。

ScatterChart chart = new ScatterChart();

示例

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

結果

驗證結果。

GWT Google Charts - 階梯圖

階梯區域圖是一種基於階梯的區域圖。我們將討論以下幾種階梯區域圖型別。

序號	圖表型別/描述
1	基本階梯圖基本的階梯區域圖。
2	堆疊階梯圖堆疊階梯區域圖。

GWT Google Charts - 表格圖

表格圖表有助於呈現可以排序和分頁的表格。可以使用格式字串或直接插入 HTML 作為單元格值來格式化表格單元格。數值預設右對齊；布林值顯示為複選標記或叉號。使用者可以使用鍵盤或滑鼠選擇單行。列標題可用於排序。滾動時，標題行保持固定。表格會觸發與使用者互動對應的事件。

我們已經在Google Charts 配置語法章節中看到了用於繪製圖表的配置。現在，讓我們來看一個表格圖示例。

配置

我們使用了Table類來顯示錶格圖表。

Table chart = new Chart();

示例

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

結果

驗證結果。

GWT Google Charts - 樹狀圖

樹狀圖是資料樹的視覺化表示，其中每個節點可以有零個或多個子節點，以及一個父節點（根節點除外）。每個節點顯示為一個矩形，可以根據我們分配的值調整大小和顏色。大小和顏色相對於圖中的所有其他節點進行評估。以下是一個樹狀圖示例。

我們已經在Google Charts 配置語法章節中看到了用於繪製圖表的配置。現在，讓我們來看一個樹狀圖示例。

配置

我們使用了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();
   }
}

結果

驗證結果。

列印頁面

序號	圖表型別/描述
1	基本區域基本區域圖
2	具有負值的區域具有負值的區域圖。
3	堆疊區域圖表具有相互堆疊的區域。
4	缺少點的區域資料中缺少點的圖表。

序號	圖表型別/描述
1	基本條形圖基本條形圖
2	分組條形圖分組條形圖。
3	堆疊條形圖條形圖具有相互堆疊的條形。
4	負條形圖具有負堆疊的條形圖。
5	差異條形圖顯示差異的條形圖。

序號	圖表型別/描述
1	基本柱狀圖基本柱狀圖
2	分組柱狀圖分組柱狀圖。
3	堆疊柱狀圖柱狀圖，各列彼此堆疊。
4	負值堆疊柱狀圖帶有負值堆疊的柱狀圖。
5	差異柱狀圖顯示差異的柱狀圖。

序號	圖表型別/描述
1	基本直方圖基本的直方圖。
2	控制顏色自定義直方圖的顏色。
3	控制區間自定義直方圖的區間。
4	多個系列具有多個系列的直方圖。

序號	圖表型別/描述
1	基本折線圖基本的折線圖。
2	顯示資料點顯示可見資料點的圖表。
3	可自定義背景顏色具有自定義背景顏色的圖表。
4	可自定義線條顏色具有自定義線條顏色的圖表。
5	可自定義軸和刻度標籤具有自定義軸和刻度標籤的圖表。
6	十字準線在選擇資料點時顯示十字準線的折線圖。
7	可自定義線條樣式具有自定義線條顏色的圖表。
8	帶有曲線線的折線圖具有平滑曲線線的圖表。