GWT Highcharts- 有用的资源

GWT Highcharts是一个将Highcharts集成到Google Web Toolkit中的库，Highcharts是一个基于JavaScript的图表库，可帮助开发人员创建交互性强的图表和图形视觉效果。本文将讲述使用GWT Highcharts的有用资源以及如何将其集成到你的项目中。

安装和集成GWT Highcharts

Maven

使用Maven来安利和集成GWT Highcharts是非常方便的，只需将以下代码添加到pom.xml文件中：

<dependency>
    <groupId>com.github.highcharts4gwt</groupId>
    <artifactId>highcharts4gwt</artifactId>
    <version>1.7.0</version>
</dependency>

手动

1. 在GWT Highcharts GitHub网站上下载zip文件。

2. 解压文件。

3. 将highcharts4gwt.jar文件复制到您的项目的classpath中。

4. 配置模块文件以将GWT Highcharts添加到您的项目中，您可以在模块文件中使用以下代码：

<inherits name='com.github.highcharts4gwt.Highcharts'/>

如何使用GWT Highcharts创建图表

创建Highchart

要创建Highchart，请创建一个类并继承AbstractChartWidget，然后重写createChart()方法。createChart()方法应该返回Highchart实例，如下所示：

public class MyChart extends AbstractChartWidget {

    @Override
    public Widget createChart() {
        Highcharts StockChart = new Highcharts("chart")
            .setType(Series.Type.AREASPLINE)
            .setChartTitleText("Fund Asset Value")
            .setRangeSelector(new RangeSelector()
            	.setSelected(1)
            	.setInputEnabled(true))
            .setSeries(new AreaSplineSeries()
                .setName("Asset Value")
                .setPointInterval(24 * 3600 * 1000)
                .setPointStart(DateFormatUtil.getDate("2004/07/01"))
                .setData(getData()));

        return StockChart;
    }
}

添加图表数据

添加图表数据时，您需要使用Highcharts的Series API和Data API。在上述示例中，我们将数据添加到AreaSplineSeries实例中，示例代码如下：

private List<Point> getData() {
    List<Point> data = new ArrayList<>();

    data.add(new Point(DateFormatUtil.getDate("2004-07-01"), 1));
    data.add(new Point(DateFormatUtil.getDate("2004-07-02"), 1.5));
    data.add(new Point(DateFormatUtil.getDate("2004-07-03"), 1.75));
    data.add(new Point(DateFormatUtil.getDate("2004-07-04"), 2.5));
    data.add(new Point(DateFormatUtil.getDate("2004-07-05"), 2.35));

    return data;
}

将图表添加到页面中

要将图表添加到页面中，您可以将创建的MyChart实例添加到您的页面中。

<ui:with field='myChartUi' type='com.example.MyChart'/>
<g:HTMLPanel>
    <div id="chartPanel"/>
</g:HTMLPanel>

<script type="text/javascript">
    var chartDiv = $doc.getElementById("chartPanel");
    chartDiv.appendChild(myChartUi.getElement());
    myChartUi.drawChart();
</script>

示例和文档

GWT Highcharts官方示例和文档可以帮助您快速入门并学习高级用法。同时可以访问 Highcharts官方文档网站 获得更多学习资料。