Gwt Highcharts 简明教程
GWT Highcharts - Environment Setup
本教程指导你如何准备开发环境以便开始使用 Highcharts 和 GWT 框架。本教程还将教你如何在设置 GWT 框架之前在机器上设置 JDK、Tomcat 和 Eclipse -
System Requirement
GWT 需要 JDK 1.6 或更高版本,因此第一个要求是在你的机器中安装 JDK。
JDK |
1.6 or above. |
Memory |
no minimum requirement. |
Disk Space |
no minimum requirement. |
Operating System |
no minimum requirement. |
按照给定的步骤设置你的环境,从 GWT 应用程序开发开始。
Step 1 - Verify Java Installation on your Machine
现在打开控制台并执行以下 Java 命令。
OS |
Task |
Command |
Windows |
Open Command Console |
c:> java -version |
Linux |
Open Command Terminal |
$ java -version |
Mac |
Open Terminal |
machine:~ joseph$ java -version |
让我们验证所有操作系统的输出
Sr.No. |
OS & Generated Output |
1 |
Windows java 版本“1.6.0_21”Java™ SE 运行时环境(版本 1.6.0_21-b07)Java HotSpot™ Client VM(版本 17.0-b17,混合模式,共享) |
2 |
Linux java 版本“1.6.0_21”Java™ SE 运行时环境(版本 1.6.0_21-b07)ava HotSpot™ Client VM(版本 17.0-b17,混合模式,共享) |
3 |
Mac java 版本“1.6.0_21”Java™ SE 运行时环境(版本 1.6.0_21-b07)Java HotSpot™64 位服务器 VM(版本 17.0-b17,混合模式,共享) |
Step 2 - Setup Java Development Kit (JDK)
如果你没有安装 Java,那么你可以从 Oracle 的 Java 网站安装 Java 软件开发工具包 (SDK): Java SE Downloads 。你将找到下载文件中的安装 JDK 的说明,按照给定的说明进行安装和配置。最后设置 PATH 和 JAVA_HOME 环境变量,分别指向包含 java 和 javac 的目录,通常是 java_install_dir/bin 和 java_install_dir。
设置 JAVA_HOME 环境变量以指向安装 Java 的机器中的基本目录位置。例如
Sr.No. |
OS & Output |
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 |
将 Java 编译器位置追加到系统路径中。
Sr.No. |
OS & Output |
1 |
Windows 把字符串 ;%JAVA_HOME%\bin 添加到系统变量 Path 的末尾。 |
2 |
Linux export PATH=$PATH:$JAVA_HOME/bin/ |
3 |
Mac not required |
或者,如果您使用 Borland JBuilder、Eclipse、IntelliJ IDEA 或 Sun ONE Studio 等集成开发环境 (IDE),请编译并运行一个简单程序以确认该 IDE 知道您安装 Java 的位置,否则请按照给定的 IDE 文档执行正确设置。
Step 3 - Setup 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
启动成功后,如果一切正常,应该显示以下结果 -
Step 4: Install GWT SDK & Plugin for Eclipse
按照 Plugin for Eclipse (incl. SDKs) 链接处给出的说明安装适用于您机器上已安装的 Eclipse 版本的 GWT SDK 和插件。
成功设置 GWT 插件后,如果一切正常,应该显示以下屏幕,其中以红色矩形标记的 Google icon ,如下所示 -
Step 5: Install Highcharts
从其 Download 页面下载最新的 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" />