GWT Highcharts 入门案例

精华

小牛编辑

208浏览

2023-03-14

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

创建GWT Web项目

项目结构如下：

导入GWT Google Charts的Jar包

在根目录下创建一个lib目录，把Google Charts的包导入

修改HelloWorld.gwt.xml

<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.8.0//EN"
        "http://gwtproject.org/doctype/2.8.0/gwt-module.dtd">
<module rename-to="HelloWorld">

    <!-- Inherit the core Web Toolkit stuff.                  -->
    <inherits name='com.google.gwt.user.User'/>

    <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

    <!-- Specify the app entry point class.                   -->
    <entry-point class='cn.xnip.helloWorld.client.HelloWorld'/>

    <inherits name="org.moxieapps.gwt.highcharts.Highcharts"/>
    <source path = 'client'/>
    <source path = 'shared'/>

    <!-- Specify the app servlets.                   -->
    <servlet path='/HelloWorldService' class='cn.xnip.helloWorld.server.HelloWorldServiceImpl'/>

</module>

修改HelloWorld.html

<html>
<head>
    <title>xnip.cn-GWT Highcharts 教程</title>
    <link type="text/css" rel="stylesheet" href="HelloWorld.css">
    <script type="text/javascript" language="javascript" src="HelloWorld/HelloWorld.nocache.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
</body>
</html>

HelloWorld配置类

package cn.xnip.helloWorld.client;


import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import org.moxieapps.gwt.highcharts.client.*;

public class HelloWorld implements EntryPoint {
    public void onModuleLoad() {
        Chart chart = new Chart()
                .setType(Series.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);
    }
}

以下为代码解释：

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

Chart chart = new Chart()
   .setType(Type.SPLINE)
   .setChartTitleText("Monthly Average Temperature")
   .setChartSubtitleText("Source: WorldClimate.com");

2）配置要在 X 轴上显示的代码。

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

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

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

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

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

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

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

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

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

7）将图表添加到根面板。

RootPanel.get().add(chart);

启动项目，查看结果

运行配置如下：

点击Run启动

最终显示效果如下：