GWT Highcharts、Java 和 xml UiBinder？

Question

我想知道如何使用 GWT Highcharts 来显示带有 xml UiBinder 的图形。 我一直在查看 Highcharts 在 Java 中的外观示例。我从 Moxie Group：GWT Highcharts 页面复制了这个示例，并将其粘贴到我创建的 Java 类中：

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

public class LineChart implements EntryPoint {

public void onModuleLoad() {
    RootPanel.get().add(createChart());
}




    public Chart createChart () {

        final Chart chart = new Chart()
                .setType(Series.Type.LINE)
                .setChartTitle(new ChartTitle()
                                .setText("Monthly Average Temperature")
                )
                .setChartSubtitle(new ChartSubtitle()
                                .setText("Source: WorldClimate.com")
                )
                .setToolTip(new ToolTip()
                                .setEnabled(false)
                );

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

        chart.getYAxis()
                .setAxisTitleText("Temperature °C");

        chart.setLinePlotOptions(new LinePlotOptions()
                        .setEnableMouseTracking(true)
                        .setDataLabels(new DataLabels()
                                        .setEnabled(true)
                        )
        );

        chart.addSeries(chart.createSeries()
                        .setName("Tokyo")
                        .setPoints(new Number[]{
                                7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6
                        })
        );
        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
                        })
        );

        return chart;
    }

}

现在，我想看看这是否适用于我的项目。我需要做什么？我应该创建一个主要方法来显示图表吗？以及如何从 xml UiBinder 中引用这个 gram？

我希望将折线图显示在以 UiBinder 格式化的页面中，但如果我至少可以看到正在运行的图表，那将有很大帮助。

谢谢！

Answer 1

首先，您需要在 myApp.html 文件中下载并包含 jquery 和 highcharts javascript。

<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript" src="highcharts.js"></script>

然后您需要下载并包含highcharts.jar 作为您项目的依赖项。

然后您需要将 highcharts 模块包含到您的 gwt 项目中（myApp.gwt.xml）：

<inherits name="org.moxieapps.gwt.highcharts.Highcharts"/>

之后就可以开始使用UiBinder了。

在你的源目录中创建一个Composite：例如，假设你的包是com.mycompany。所以创建一个类com.mycompany.MyChart.java

package com.mySampleApplication.client;

import com.google.gwt.core.shared.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.FlowPanel;
import org.moxieapps.gwt.highcharts.client.*;

import org.moxieapps.gwt.highcharts.client.labels.DataLabels;
import org.moxieapps.gwt.highcharts.client.plotOptions.LinePlotOptions;

public class MyChart extends Composite {


    interface MyUiBinder extends UiBinder<FlowPanel, MyChart> {
    }

    private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

    @UiField(provided = true)
    public final Chart chart;

    public MyChart() {
        chart = new Chart()
                .setType(Series.Type.LINE)
                .setChartTitle(new ChartTitle().setText("Monthly Average Temperature"))
                .setChartSubtitle(new ChartSubtitle().setText("Source: WorldClimate.com"))
                .setToolTip(new ToolTip().setEnabled(false));

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

        chart.getYAxis().setAxisTitleText("Temperature °C");

        chart.setLinePlotOptions(new LinePlotOptions()
                        .setEnableMouseTracking(true)
                        .setDataLabels(new DataLabels()
                                        .setEnabled(true)
                        )
        );

        chart.addSeries(chart.createSeries()
                        .setName("Tokyo")
                        .setPoints(new Number[]{
                                7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6
                        })
        );
        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
                        })
        );

        initWidget(uiBinder.createAndBindUi(this));
    }
}

然后在你的资源文件夹com.mycompany.MyChart.ui.xml创建对应的UiBinder文件

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:g='urn:import:com.google.gwt.user.client.ui'
             xmlns:highcharts="urn:import:org.moxieapps.gwt.highcharts.client">

    <g:FlowPanel>
        <highcharts:Chart ui:field="chart"/>
    </g:FlowPanel>

</ui:UiBinder>

最后创建图表组合并将其添加到 DOM

public void onModuleLoad() {
    RootPanel.get().add(new MyChart());
}

如果你不使用 UiBinder 可能会容易很多，但这似乎是你的要求。