使用JSNI调用Javascript的GWT Highcharts

Question

我正在编写一个GWT应用程序，并使用highcharts。有些特性不能在Java中实现，但可以在javascript中实现。我给了一个例子，如何实现的东西，我可以使用，但是，我不知道如何包含在我的代码。

我的代码包括一个变量声明为Chart graph;

我想实现一个事件，如在这个答案中显示添加工具提示在高图中的图例时，悬停

  chart: {
        type: 'column',
        events: {
            load: function () {
                var chart = this,
                    legend = chart.legend;
                for (var i = 0, len = legend.allItems.length; i < len; i++) {
                    var item = legend.allItems[i].legendItem;
                    item.on('mouseover', function (e) {
                        //show custom tooltip here
                        console.log("mouseover");
                    }).on('mouseout', function (e) {
                        //hide tooltip
                        console.log("mouseout");
                    });
                }
            }
        }
    },

如何将此功能添加到我的代码中。我试着用图表。settoption (/chart/events/load"， Object o)如下http://www.moxiegroup.com/moxieapps/gwt-highcharts/apidocs/index.html所示，但我无法找到实现它的方法。

我假设它将通过创建一个方法

来完成

private native void foo(JavaScriptObject c)/*-{

}-*/;

或

private native void foo(Chart c)/*-{

}-*/;

，但我不确定如何连接两者。任何帮助都是感激的!

Answer 1

首先创建一个像这样的本地方法;

private native void foo(JavaScriptObject chart)/*-{
    var legend = chart.legend;
    for (var i = 0, len = legend.allItems.length; i < len; i++) {
        var item = legend.allItems[i].legendItem;
        item.on('mouseover', function (e) {
            //show custom tooltip here
            console.log("mouseover");
        }).on('mouseout', function (e) {
            //hide tooltip
            console.log("mouseout");
        });
    }
}-*/;

然后像这样与setLoadEventHandler()一起调用这个方法;

chart.setLoadEventHandler(new ChartLoadEventHandler() {
        @Override
        public boolean onLoad(ChartLoadEvent chartLoadEvent) {
            foo(chart.getNativeChart());
            return true;
        }
    });

就这些!