Gwt Highcharts 简明教程

GWT Highcharts - Quick Guide

GWT Highcharts - Overview

GWT Highcharts 是一个基于 Java 的开源库，它在一个 GWT 应用程序中提供了优雅且功能丰富的 Highcharts 可视化，并且可以与 GWT 小部件库一起使用。

Features

  1. Compatible - 支持所有现代浏览器以及 iPhone/iPad 浏览器和 Internet Explorer 6 及更高版本。现代浏览器使用 SVG 进行图形渲染，而旧版 Internet Explorer 中的图形则使用 VML 绘制。

  2. Pure Java - 不需要 JavaScript，因为 Java 方法中提供了完整的 Highcharts API。

  3. No Flash - 无需客户端插件，例如 Flash 播放器或 Java，因为 Highcharts 采用原生浏览器技术，并且图表可以在现代移动设备上运行而无需修改。

  4. Clean Syntax - 大多数方法都是可连接的，因此可以通过紧凑到像 JSON 一样的语法管理图表配置选项。

  5. Dynamic - 可以在图表创建后的任何时间动态添加系列和点。支持事件挂钩。支持服务器交互。

  6. Documented - Highcharts API 通过大量代码和语法示例进行了全面记录。

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

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

eclipsehomepage

Step 4: Install GWT SDK & Plugin for Eclipse

按照 Plugin for Eclipse (incl. SDKs) 链接处给出的说明安装适用于您机器上已安装的 Eclipse 版本的 GWT SDK 和插件。

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

eclipse with google

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" />

GWT Highcharts - Configuration Syntax

在本章中，我们将展示使用 GWT 中的 Highcharts API 绘制图表所需的配置。

Step 1: Create GWT Application

按照以下步骤更新我们在 GWT - 创建应用程序章节中创建的 GWT 应用程序 -

Step

Description

1

在包 com.tutorialspoint 下使用名称 HelloWorld 创建一个项目，如 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。

Step 2: Create Configurations

Create Chart

配置图表的类型、标题和副标题。

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

配置要显示在图表上的数据。系列是数组，其中该数组中的每个元素表示图表上的一条线。

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
   })
);

Step 3: Add the chart to parent panel.

我们将图表添加到根面板。

RootPanel.get().add(chart);

Example

考虑以下示例，以进一步了解配置语法 -

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);
   }
}

Result

验证结果。

gwt highcharts line basic

GWT Highcharts - Line Charts

折线图用于绘制基于折线/样条线的图表。在本节中，我们将讨论不同类型的折线图和样条线图。

Sr.No.

Chart Type & Description

1

Basic lineBasic line chart.

2

With data labels 带数据标签的图表。

3

Time series, zoomable 带时间序列的图表。

4

Spline with inverted axes 具有反转坐标轴的样条线图。

5

Spline with symbols 使用符号表示热量/雨量的样条线图。

6

Spline with plot bands 带网格线的样条线图。

GWT Highcharts - Area Charts

面积图用于绘制基于面积的图表。在本节中，我们将讨论不同类型的基于面积的图表。

Sr.No.

Chart Type & Description

1

Basic AreaBasic area chart.

2

Area with negative values 具有负值的面积图。

3

Stacked area 具有彼此叠加的区域的图表。

4

Percentage area 使用百分比项数据的图表。

5

Area with missing points 数据中带丢失点的图表。

6

Inverted axes 使用反转坐标轴的面积图。

7

Area-splineArea chart using spline.

GWT Highcharts - Bar Charts

条形图用于绘制基于条形的图表。在本部分中，我们将讨论不同类型的基于条形的图表。

Sr.No.

Chart Type & Description

1

Basic BarBasic bar chart.

2

Stacked Bar 条形堆叠在一起的条形图。

3

Bar Chart with negative values 带有负值的条形图。

GWT Highcharts - Column Charts

柱状图用于绘制基于柱状的图表。在本节中，我们将讨论不同类型的基于柱状的图表。

Sr.No.

Chart Type & Description

1

Basic ColumnBasic column chart.

2

Column with negative values 带负值的柱状图。

3

Stacked column 柱状相互叠加的图表。

4

Stacked and Grouped column 柱状以堆叠和分组形式显示的图表。

5

Column with stacked percentage 带堆叠百分比的图表。

6

Column with rotated labels 柱状中标签旋转的柱状图。

7

Column Range 使用范围的柱状图。

GWT Highcharts - Pie Charts

饼图用于绘制基于饼状的图表。在本节中，我们将讨论不同类型的基于饼状的图表。

Sr.No.

Chart Type & Description

1

Basic PieBasic pie chart.

2

Pie with Legends 带图例的饼状图。

3

Donut ChartDonut Chart.

GWT Highcharts - Scatter Chart

以下是散点图的基本示例。

我们已经看到了在 Highcharts Configuration Syntax 章节中用于绘制图表的配置。

下面给出散点图的基本示例。

Configurations

现在让我们看看所采取的附加配置/步骤。

series

将图表类型配置为基于散点。 series.type 决定图表系列类型。此处，默认值为“折线”。

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

Example

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);
   }
}

Result

验证结果。

gwt highcharts scatter basic

GWT Highcharts - Dynamic Charts

动态图表用于绘制基于数据的图表，其中数据可以在图表呈现后更改。在本节中，我们将讨论不同类型的动态图表。

Sr.No.

Chart Type & Description

1

Spline updating each second 每秒更新的样条曲线图。

2

Click to add a point 具有点增加功能的图表。

GWT Highcharts - Combination Charts

组合图用于绘制混合图；例如，包含饼图的条形图。在本部分中，我们将讨论不同类型的组合图。

Sr.No.

Chart Type & Description

1

Column, Line and Pie 具有柱形图、折线图和饼图的图表。

2

Dual Axes, Line and Column 具有双轴、折线图和柱形图的图表。

3

Multiple Axes 具有多轴的图表。

4

Scatter with regression line 带有回归线的散点图。

GWT Highcharts - 3D Charts

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

Sr.No.

Chart Type & Description

1

3D Column3D Column Chart.

2

3D Scatter3D Scatter Chart.

3

3D Pie3D Pie Chart.

GWT Highcharts - Map Charts

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

Sr.No.

Chart Type & Description

1

Heat MapHeat Map.

2

Tree MapTree Map.