讨论GWT Highcharts

简介

GWT Highcharts是一个基于GWT框架的Highcharts图表库，通过它可以很方便地添加图表到GWT项目中。

特性

• 支持Highcharts所有类型的图表
• 与GWT的数据绑定的支持
• 支持 Highcharts的所有可配置项

安装

在项目的 Maven 配置文件 pom.xml 中，添加以下依赖项：

<dependency>
    <groupId>com.moxiegroup</groupId>
    <artifactId>gwt-highcharts</artifactId>
    <version>1.7.0</version>
</dependency>

使用

数据绑定

使用GWT DataSources可以将数据绑定到Highcharts图表。例如：

//创建数据源
List<ExampleData> exampleDataList = new ArrayList<>();
...
ListDataProvider<ExampleData> dataProvider = new ListDataProvider<>(exampleDataList);
//将数据源绑定到Highchart
Highcharts chart = new Highcharts("chart1");
PieChartOptions options = new PieChartOptions();
options.setDataValues(dataProvider.getList());

图表选项

使用Highcharts图表的选项设置作为配置对象，可以配置所有的图表选项，例如：

Highcharts chart = new Highcharts("chart1");
LineChartOptions options = new LineChartOptions();
options.setTitle(new Title("Monthly Average Temperature"));
options.setxAxis(new Axis().setCategories("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"));
options.setyAxis(new Axis().setTitle(new Title("Temperature (°C)")));
options.setSeries(new Series().setName("Tokyo").setData(7, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9));

事件处理

使用$wnd.Highcharts.events.addEventFunction()函数添加事件处理程序。例如：

chart.addSeriesPlotOptionsEventHandler(new SeriesPlotOptionsEventHandler() {
    @Override
    public boolean onSeriesPlotOptionsEvent(SeriesPlotOptionsEvent seriesPlotOptionsEvent) {
        Window.alert("You clicked a series!");
        return true;
    }
});

总结

GWT Highcharts提供了一种很方便的添加Highcharts图表到GWT项目的方式，并提供了Highcharts的所有可配置项和事件。