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 播放器或 Java 等客户端插件，因为 Highcharts 使用本机浏览器技术，图表无需修改即可在现代移动设备上运行。

  • 干净的语法- 大多数方法都是可链接的，因此可以使用像 JSON 一样严格的语法来管理图表的配置选项。

  • 动态- 系列和点可以在图表创建后随时动态添加。支持事件挂钩。支持服务器交互。

  • 记录- Highcharts API 有大量代码和语法示例完整记录。

GWT Highcharts - 环境设置

本教程将指导您如何准备开发环境以开始使用 Highcharts 和 GWT Framework。本教程还将教您如何在安装 GWT Framework 之前在计算机上安装 JDK、Tomcat 和 Eclipse -

系统要求

GWT 需要 JDK 1.6 或更高版本，因此第一个要求是在您的计算机中安装 JDK。

JDK 1.6或以上。
记忆 没有最低要求。
磁盘空间 没有最低要求。
操作系统 没有最低要求。

按照给定的步骤设置您的环境，以开始 GWT 应用程序开发。

第 1 步 - 验证计算机上的 Java 安装

现在打开控制台并执行以下 java 命令。

操作系统 任务 命令
Windows 打开命令控制台 c:\> java -版本
Linux 打开命令终端 $ java -版本
苹果 打开终端 机器：~ Joseph$ java -版本

让我们验证所有操作系统的输出

先生。 操作系统和生成的输出
1

Windows

java版本“1.6.0_21”

Java(TM) SE 运行时环境（版本 1.6.0_21-b07）

Java HotSpot(TM) 客户端 VM（内部版本 17.0-b17，混合模式，共享）
2

Linux

java版本“1.6.0_21”

Java(TM) SE 运行时环境（版本 1.6.0_21-b07）

ava HotSpot(TM) 客户端虚拟机（版本 17.0-b17，混合模式，共享）
3

苹果

java版本“1.6.0_21”

Java(TM) SE 运行时环境（版本 1.6.0_21-b07）

Java HotSpot(TM)64 位服务器 VM（内部版本 17.0-b17，混合模式，共享）

第 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

导出 JAVA_HOME = /usr/local/java-current
3

苹果

导出 JAVA_HOME = /Library/Java/Home

将 Java 编译器位置附加到系统路径。

先生。 操作系统和输出
1

Windows

将字符串 ;%JAVA_HOME%\bin 附加到系统变量 Path 的末尾。
2

Linux

导出路径=$PATH:$JAVA_HOME/bin/
3

苹果

不需要

或者，如果您使用集成开发环境 (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

成功启动后，如果一切正常，那么它应该显示以下结果 -

Eclipse 主页

第 4 步：安装适用于 Eclipse 的 GWT SDK 和插件

按照链接Plugin for Eclipse（包括 SDK）中给出的说明 安装 GWT SDK 和 Plugin for Eclipse 版本（已安装在您的计算机上）。

成功设置 GWT 插件后，如果一切正常，那么它应该显示以下屏幕，其中带有标有红色矩形的Google 图标，如下所示 -

Eclipse 与 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 按照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="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");

x轴

配置要在 X 轴上显示的股票代码。

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

y轴

配置要在 Y 轴上显示的标题、绘图线。

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

工具提示

配置工具提示。将后缀添加到值（y 轴）之后。

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

传奇

配置图例与其他属性一起显示在图表的右侧。

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

系列

配置要在图表上显示的数据。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.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 图表

3D图表用于绘制3维图表。在本节中，我们将讨论不同类型的 3D 图表。

先生。 图表类型和描述
1 3D柱

3D 柱形图。
2 3D 散点图

3D 散点图。
3 3D 饼图

3D 饼图。

GWT Highcharts - 地图图表

地图图表用于绘制热图或树图。在本节中，我们将讨论不同类型的地图。

先生。 图表类型和描述
1 热图

热图。
2 树图

树图。