javascript - js Highcharts中的可点击栏？

Question

我有带Highcharts的水平条形图。如何使每个栏都可以点击事件，例如“警报”？

例如，我有这个系列：

series : [{
    name: 'John',
    data: [5, 3, 4, 7, 2]
}, {
    name: 'Jane',
    data: [2, 2, 3, 2, 1]
}, {
    name: 'Joe',
    data: [3, 4, 4, 2, 5]
}];

我还应该做什么？

Answer 1

您可能会发现Highcharts Options Reference是一个很好的起点。

在参考资料中，这是一个柱形图示例，其中单击列会触发警报。

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-point-events-click-column/

Answer 2

我需要做类似的事情。希望能帮助到你。

免责声明：我正在使用 GWT Highcharts 包装器！

以下是我所做的重点：

1）我创建了一个接口 FooCallback ，它有一个方法 bar( int index ) 并实现了它

2) 创建了一个方法 getBarClickCallback，它返回一个 JavascriptObject（函数），它以 FooCallback 作为参数

3）我在图表选项/plotOptions/series/point/events/click中添加了一个点击回调，将它传递给getBarClickCallback

4) 一旦点击了一个栏，就会调用 FooCallback.bar( int index )

...

chart.setOption("/plotOptions/series/point/events/click",getBarClickCallback(this));

private native static JavaScriptObject getBarClickCallback(FooCallback callback) /*-{
    return function()
    {
        if( this.x !== "undefined" && this.x >= 0 ){
            callback.@com.FooCallback::bar(I)(this.x);
        }
    };
}-*/;

public void bar( int index ){
    //handle chosen index
}

...

此外，我想听类别标签的点击（顺便说一下，我展示了一个包含类别的倒置条形图）

1) 创建了一个方法来定位 dom 中的类别并向它们添加点击事件。我将其命名为 addLabelClickHandler(FooCallback callback, String chartId) 并使用 jquery 添加事件。

2) 添加一个 ChartLoadEventHandler 调用 addLabelClickHandler() 将参数转发到 addLabelClickHandler(FooCallback callback, String chartId)

3) 单击轴类别后，将调用 FooCallback.bar( int index ) ...

chart.setLoadEventHandler(new ChartLoadEventHandler() {

    @Override
    public boolean onLoad(ChartLoadEvent chartLoadEvent) {
    addLabelClickHandler();
    return false;
    }
    });

private void addLabelClickHandler(){
    addLabelClickHandler(this,chart.getElement().getId());
}

private native static void addLabelClickHandler(FooCallback callback, String chartId)/*-{
        try {
            var search = '#' + chartId + ' .highcharts-axis-labels:first text';
            $wnd.jQuery(search).each(
                    function(i, j) {
                        $wnd.jQuery(this).css("cursor", "pointer");
                        $wnd.jQuery(this).click(function() {
                            callback.@com.FooCallback::bar(I)(this.x);
                        });
                    });
        } catch (err) {
            console.log(err);
        }

    }-*/;

杰夫

Answer 3

在 Plotoption 下添加点击事件

plotOptions: {
                series: {
                    point: {
                        events: {
                            click: function () {
                                    alert(this.category)
                            }
                        }
                    }
                }
            }