GWT Highcharts 快速指南

GWT Highcharts - 概述

GWT Highcharts 是一個基於 Java 的開源庫，它在 GWT 應用程式中提供優雅且功能豐富的 Highcharts 視覺化效果，並且可以與 GWT 小部件庫一起使用。

特性

相容性 - 支援所有現代瀏覽器，包括 iPhone/iPad 瀏覽器和 Internet Explorer 6 及更高版本。現代瀏覽器使用 SVG 進行圖形渲染，而在舊版本的 Internet Explorer 中，圖形使用 VML 繪製。
純 Java - 無需 JavaScript，因為完整的 Highcharts API 都以 Java 方法的形式提供。
無 Flash - 無需 Flash Player 或 Java 等客戶端外掛，因為 Highcharts 使用原生瀏覽器技術，圖表可以在現代移動裝置上無需修改地執行。
簡潔的語法 - 大多數方法都是可鏈式的，因此圖表配置選項可以使用與 JSON 一樣緊湊的語法來管理。
動態性 - 可以在圖表建立後的任何時間動態新增序列和點。支援事件鉤子。支援伺服器互動。
文件齊全 - Highcharts API 文件齊全，包含大量程式碼和語法示例。

GWT Highcharts - 環境搭建

本教程將指導您如何準備開發環境，以便開始使用 Highcharts 和 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：安裝 GWT SDK 和 Eclipse 外掛

按照連結Eclipse 外掛（包括 SDK）中給出的說明，安裝 GWT SDK 和適用於您機器上安裝的 Eclipse 版本的外掛。

成功設定 GWT 外掛後，如果一切正常，則應顯示以下螢幕，其中帶有紅色矩形標記的Google 圖示，如下所示：

步驟 5：安裝 Highcharts

從其下載頁面下載最新的 Highcharts jar 檔案，並將其新增到專案的類路徑中。

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

<inherits name="org.moxieapps.gwt.highcharts.Highcharts"/>

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

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"/>
<script src = "https://code.highcharts.com/highcharts.js"/>
<script type="text/javascript" src="https://code.highcharts.com/highcharts-3d.js" />
<script type="text/javascript" src="https://code.highcharts.com/highcharts-more.js" />
<script src = "https://code.highcharts.com/modules/heatmap.js" />
<script src = "https://code.highcharts.com/modules/treemap.js" />

GWT Highcharts - 配置語法

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

步驟 1：建立 GWT 應用程式

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

步驟	描述
1	建立一個名為HelloWorld的專案，放在com.tutorialspoint包下，如GWT - 建立應用程式章節中所述。
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="org.moxieapps.gwt.highcharts.Highcharts"/>
   <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">
         <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" />
         <script src = "https://code.highcharts.com/highcharts.js" />
      </script>
   </head>
   <body>    
   </body>
</html>

在理解配置之後，我們將看到最終更新的 HelloWorld.java。

步驟 2：建立配置

建立圖表

配置圖表的型別、標題和副標題。

Chart chart = new Chart()
   .setType(Type.SPLINE)
   .setChartTitleText("Monthly Average Temperature")
   .setChartSubtitleText("Source: WorldClimate.com");

xAxis

配置要在 X 軸上顯示的刻度。

XAxis xAxis = chart.getXAxis();
xAxis.setCategories("Jan", "Feb", "Mar", "Apr", "May", "Jun",
   "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");

yAxis

配置要在 Y 軸上顯示的標題和繪圖線。

YAxis yAxis = chart.getYAxis();
yAxis.setAxisTitleText("Temperature Â°C");
yAxis.createPlotLine()
   .setValue(0)
   .setWidth(1)
   .setColor("#808080");

tooltip

配置工具提示。新增要在值（y 軸）後新增的字尾。

ToolTip toolTip = new ToolTip();
toolTip.setValueSuffix("°C");
chart.setToolTip(toolTip);

legend

配置要在圖表的右側顯示的圖例以及其他屬性。

legend.setLayout(Legend.Layout.VERTICAL)
   .setAlign(Legend.Align.RIGHT)
   .setVerticalAlign(Legend.VerticalAlign.TOP)
   .setX(-10)
   .setY(100)
   .setBorderWidth(0);
chart.setLegend(legend);

series

配置要在圖表上顯示的資料。series 是一個數組，該陣列的每個元素代表圖表上的一條線。

chart.addSeries(chart.createSeries()
   .setName("Tokyo")
   .setPoints(new Number[] {
      7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
      26.5, 23.3, 18.3, 13.9, 9.6
   })
);

chart.addSeries(chart.createSeries()
   .setName("New York")
   .setPoints(new Number[] {
      -0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 
      24.1, 20.1, 14.1, 8.6, 2.5
   })
);

chart.addSeries(chart.createSeries()
   .setName("Berlin")
   .setPoints(new Number[] {
      -0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
      17.9, 14.3, 9.0, 3.9, 1.0
   })
);

chart.addSeries(chart.createSeries()
   .setName("London")
   .setPoints(new Number[] {
      3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 
      16.6, 14.2, 10.3, 6.6, 4.8
   })
);

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

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

RootPanel.get().add(chart);

示例

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

HelloWorld.java

package com.tutorialspoint.client;

import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.Legend;
import org.moxieapps.gwt.highcharts.client.Series.Type;
import org.moxieapps.gwt.highcharts.client.ToolTip;
import org.moxieapps.gwt.highcharts.client.XAxis;
import org.moxieapps.gwt.highcharts.client.YAxis;

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

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      Chart chart = new Chart()
         .setType(Type.SPLINE)
         .setChartTitleText("Monthly Average Temperature")
         .setChartSubtitleText("Source: WorldClimate.com");

      XAxis xAxis = chart.getXAxis();
      xAxis.setCategories("Jan", "Feb", "Mar", "Apr", "May", "Jun",
         "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");

      YAxis yAxis = chart.getYAxis();
      yAxis.setAxisTitleText("Temperature Â°C");
      yAxis.createPlotLine()
         .setValue(0)
         .setWidth(1)
         .setColor("#808080");

      ToolTip toolTip = new ToolTip();
      toolTip.setValueSuffix("Â°C");
      chart.setToolTip(toolTip);

      Legend legend = new Legend();
      legend.setLayout(Legend.Layout.VERTICAL)
         .setAlign(Legend.Align.RIGHT)
         .setVerticalAlign(Legend.VerticalAlign.TOP)
         .setX(-10)
         .setY(100)
         .setBorderWidth(0);
      chart.setLegend(legend);

      chart.addSeries(chart.createSeries()
         .setName("Tokyo")
         .setPoints(new Number[] {
            7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
            26.5, 23.3, 18.3, 13.9, 9.6
         })
      );

      chart.addSeries(chart.createSeries()
         .setName("New York")
         .setPoints(new Number[] {
            -0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 
            24.1, 20.1, 14.1, 8.6, 2.5
         })
      );

      chart.addSeries(chart.createSeries()
         .setName("Berlin")
         .setPoints(new Number[] {
            -0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
            17.9, 14.3, 9.0, 3.9, 1.0
         })
      );

      chart.addSeries(chart.createSeries()
         .setName("London")
         .setPoints(new Number[] {
            3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 
            16.6, 14.2, 10.3, 6.6, 4.8
         })
      );
      RootPanel.get().add(chart);
   }
}

結果

驗證結果。

GWT Highcharts - 折線圖

折線圖用於繪製基於線/樣條線的圖表。在本節中，我們將討論不同型別的線和樣條線圖表。

序號	圖表型別和描述
1	基本折線基本折線圖。
2	帶有資料標籤帶有資料標籤的圖表。
3	時間序列，可縮放帶有時間序列的圖表。
4	帶有反轉軸的樣條線具有反轉軸的樣條線圖表。
5	帶有符號的樣條線使用符號表示熱量/降雨的樣條線圖表。
6	帶有繪圖帶的樣條線帶有繪圖帶的樣條線圖表。

GWT Highcharts - 面積圖

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

序號	圖表型別和描述
1	基本區域基本面積圖。
2	帶有負值的區域具有負值的面積圖。
3	堆疊區域圖表具有相互堆疊的區域。
4	百分比區域以百分比形式顯示資料的圖表。
5	帶有缺失點的區域資料中缺少點的圖表。
6	反轉軸使用反轉軸的區域。
7	區域樣條線使用樣條線的區域圖表。

GWT Highcharts - 條形圖

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

序號	圖表型別和描述
1	基本條形基本條形圖。
2	堆疊條形條形圖具有相互堆疊的條形。
3	帶有負值的條形圖帶有負值的條形圖。

GWT Highcharts - 柱狀圖

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

序號	圖表型別和描述
1	基本柱狀基本柱狀圖。
2	帶有負值的柱狀具有負值的柱狀圖。
3	堆疊柱狀圖表具有相互堆疊的柱狀。
4	堆疊和分組柱狀圖表以堆疊和分組形式顯示柱狀。
5	帶有堆疊百分比的柱狀帶有堆疊百分比的圖表。
6	帶有旋轉標籤的柱狀柱狀圖在柱狀中帶有旋轉標籤。
7	柱狀範圍使用範圍的柱狀圖。

GWT Highcharts - 餅圖

餅圖用於繪製基於餅的圖表。在本節中，我們將討論不同型別的基於餅的圖表。

序號	圖表型別和描述
1	基本餅圖基本餅圖。
2	帶有圖例的餅圖帶有圖例的餅圖。
3	環形圖環形圖。

GWT Highcharts - 散點圖

以下是一個基本散點圖的示例。

我們已經在Highcharts 配置語法章節中看到了用於繪製圖表的配置。

下面給出了一個基本散點圖的示例。

配置

現在讓我們看看採取的其他配置/步驟。

series

將圖表型別配置為基於散點的。series.type決定圖表的序列型別。這裡，預設值為“line”。

chart.addSeries(chart.createSeries()  
   .setName("Observations")  
   .setType(Type.SCATTER)  
   .setPoints(new Number[] {  
      1, 1.5, 2.8, 3.5, 3.9, 4.2  
   })  
);

示例

HelloWorld.java

package com.tutorialspoint.client;

import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.Series.Type;

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

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      final Chart chart = new Chart()  
         .setChartTitleText("Scatter plot");  

      chart.getXAxis()  
         .setMin(-0.5)  
         .setMax(5.5);  

      chart.getYAxis()  
         .setMin(0);  

      chart.addSeries(chart.createSeries()  
         .setName("Observations")  
         .setType(Type.SCATTER)  
         .setPoints(new Number[] {  
            1, 1.5, 2.8, 3.5, 3.9, 4.2  
         })  
      );  
      RootPanel.get().add(chart);
   }
}

結果

驗證結果。

GWT Highcharts - 動態圖表

動態圖表用於繪製基於資料且資料可以在圖表渲染後更改的圖表。在本節中，我們將討論不同型別的動態圖表。

序號	圖表型別和描述
1	每秒更新一次的樣條線每秒更新一次的樣條線圖表。
2	單擊新增點具有新增點功能的圖表。

GWT Highcharts - 組合圖表

組合圖表用於繪製混合圖表；例如，條形圖和餅圖。在本節中，我們將討論不同型別的組合圖表。

序號	圖表型別和描述
1	柱狀圖、折線圖和餅圖帶有柱狀圖、折線圖和餅圖的圖表。
2	雙軸、折線圖和柱狀圖帶有雙軸、折線圖和柱狀圖的圖表。
3	多軸具有多軸的圖表。
4	帶有迴歸線的散點圖帶有迴歸線的散點圖。

GWT Highcharts - 3D 圖表

三維圖表用於繪製三維圖形。在本節中，我們將討論不同型別的三維圖表。

序號	圖表型別和描述
1	三維柱狀圖三維柱狀圖。
2	三維散點圖三維散點圖。
3	三維餅圖三維餅圖。

GWT Highcharts - 地圖圖表

地圖圖表用於繪製熱力圖或樹狀圖。在本節中，我們將討論不同型別的地圖圖表。

序號	圖表型別和描述
1	熱力圖熱力圖。
2	樹狀圖樹狀圖。

列印頁面

序號	圖表型別和描述
1	基本折線基本折線圖。
2	帶有資料標籤帶有資料標籤的圖表。
3	時間序列，可縮放帶有時間序列的圖表。
4	帶有反轉軸的樣條線具有反轉軸的樣條線圖表。
5	帶有符號的樣條線使用符號表示熱量/降雨的樣條線圖表。
6	帶有繪圖帶的樣條線帶有繪圖帶的樣條線圖表。

序號	圖表型別和描述
1	基本區域基本面積圖。
2	帶有負值的區域具有負值的面積圖。
3	堆疊區域圖表具有相互堆疊的區域。
4	百分比區域以百分比形式顯示資料的圖表。
5	帶有缺失點的區域資料中缺少點的圖表。
6	反轉軸使用反轉軸的區域。
7	區域樣條線使用樣條線的區域圖表。

序號	圖表型別和描述
1	基本條形基本條形圖。
2	堆疊條形條形圖具有相互堆疊的條形。
3	帶有負值的條形圖帶有負值的條形圖。

序號	圖表型別和描述
1	基本柱狀基本柱狀圖。
2	帶有負值的柱狀具有負值的柱狀圖。
3	堆疊柱狀圖表具有相互堆疊的柱狀。
4	堆疊和分組柱狀圖表以堆疊和分組形式顯示柱狀。
5	帶有堆疊百分比的柱狀帶有堆疊百分比的圖表。
6	帶有旋轉標籤的柱狀柱狀圖在柱狀中帶有旋轉標籤。
7	柱狀範圍使用範圍的柱狀圖。

序號	圖表型別和描述
1	基本餅圖基本餅圖。
2	帶有圖例的餅圖帶有圖例的餅圖。
3	環形圖環形圖。