Настраиваемые бары в js Highcharts?

У меня есть диаграмма горизонтальная с 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]
}];

Что еще мне делать?

Ответы

Ответ 2

Мне нужно было что-то подобное. Надеюсь, что это поможет.

Отказ от ответственности: я использую оболочку GWT Highcharts!

Вот основные моменты того, что я сделал:

1) Я создал интерфейс FooCallback, который имеет панель методов (индекс int) и реализовал его

2) Создал метод getBarClickCallback, который возвращает JavascriptObject (function), который имеет 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 ){
            [email protected]::bar(I)(this.x);
        }
    };
}-*/;

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

...

Кроме того, мне захотелось прослушивать клики с метками категории (Кстати, я показываю перевернутую гистограмму с категориями)

1) Создал метод, который будет определять категории в dom и добавлять к ним события click. Я назвал его addLabelClickHandler (обратный вызов FooCallback, String chartId) и использовал jquery для добавления событий.

2) Добавьте ChartLoadEventHandler, который вызывает addLabelClickHandler(), который перенаправляет параметры в addLabelClickHandler (обратный вызов FooCallback, 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() {
                            [email protected]::bar(I)(this.x);
                        });
                    });
        } catch (err) {
            console.log(err);
        }

    }-*/;

Джефф