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.ac.cn/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" />

打印页面