js Highcharts中的可点击栏?

icomxhvb  于 2022-11-10  发布在  Highcharts
关注(0)|答案(4)|浏览(182)

我有Highcharts水平条形图。我如何使每个条形图都可单击某个事件,例如“alert”?
我有这个系列的例子:

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]
}];

我还能做什么?

iaqfqrcu

iaqfqrcu1#

您可能会发现Highcharts选项参考是一个很好的起点。
根据参考资料,下面是一个柱形图示例,其中单击一个列将触发警报。
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-point-events-click-column/

olhwl3o2

olhwl3o22#

我需要做一个类似的事情。希望它有帮助。
免责声明:我使用的是GWT Highcharts Package 器!
以下是我所做的工作的亮点:
1)我创建了一个具有方法栏(int索引)的接口FooCallback,并实现了它
2)创建了一个返回Javascript对象(函数)的方法getBarClickCallback,该方法将FooCallback作为参数
3)我在图表选项/plotOptions/series/point/events/click中添加了一个单击回调函数,并将其传递给getBarClickCallback
4)单击条形图后,FooCallback.bar将调用www.example.com(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中定位类别并向其添加click事件。我将其命名为addLabelClickHandler(FooCallback回调,String chartId),并使用jquery添加事件。
2)添加调用addLabelClickHandler()的ChartLoadEventHandler,该函数将参数转发给addLabelClickHandler(FooCallback回调,字符串chartId)
3)单击某个轴类别后,FooCallback.bar将调用www.example.com(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);
        }

    }-*/;

杰夫

3zwtqj6y

3zwtqj6y3#

在Plotoption下添加单击事件

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

ijxebb2r4#

您可以通过在 plotOptions > series 中添加以下内容来完成此操作随附示例

point: {
            events: {
                click: function () {
                    alert('Category: ' + this.category + ', value: ' + this.y);
                }
            }
        }

http://jsfiddle.net/tkab9f20/

相关问题