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 檔案，並將其新增到專案的類路徑。

在 `.gwt.xml` 檔案中新增以下條目

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

在 `.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" />

列印頁面