GWT Highcharts 使用 JSNI 调用 Javascript答案

【问题标题】：GWT Highcharts calling Javascript using JSNIGWT Highcharts 使用 JSNI 调用 Javascript
【发布时间】：2013-04-24 02:35:06
【问题描述】：

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

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

我想实现这个答案Add tooltip to legend in highcharts when hovering中显示的事件

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

            }
        }

    },

如何将此功能添加到我的代码中。我尝试使用chart.setOption(/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)/*-{


}-*/;

但我不确定如何将两者联系起来。任何帮助表示赞赏！

【问题讨论】：

“使用 highcharts”是什么意思？你在使用 moxiegroup 的 GWT 包装版本吗？它是否只是作为 JS 资源包含在内，而您自己只包装了必要的调用？您项目中的 highcharts API 是否完全暴露在 java 中？
是的，我使用的是 moxiegroup 的 GWT 包装版本。就我的理解，是的，highcharts API 完全在 java 中公开，但是我想添加一些不在其中的东西。

标签： gwt highcharts jsni gwt-highcharts

【解决方案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;
        }
    });

仅此而已！希望这会对你有所帮助。

【讨论】：