Highcharts: остановить график от захвата событий мыши или захватить щелчок мышью по ENTRE диаграмме

Все,

Я использую HighCharts в веб-приложении, над которым я работаю, и, как правило, мне это очень нравится.

Однако мне сложно определить, как захватить щелчок мышью по ENTRE диаграмме.

Другими словами - я хотел бы знать, когда пользователь нажимает на диаграмму ANYWHERE (например, область графика, заголовок, ось x или y, поля и отступы вокруг элементов диаграммы и т.д. )

Или, я хотел бы отключить события вообще, поэтому я могу захватить событие в самом контейнере.

Более подробная версия...

У меня есть DIV, который содержит мой HighChart.

Я хочу знать, будет ли пользователь щелкать ANYWHERE внутри этого DIV.

Итак, сначала я попытался подключить событие "onclick" к DIV, но это никогда не срабатывает, по-видимому, потому, что клик попадает в ловушку HighChart.

Итак, в коде, который устанавливает HighChart, я добавил следующее:

var chart = new Highcharts.Chart({
    chart: {
        renderTo: "container",
        events: {
            click: function(event) {
                // do something
            }
        },
        ...
    }
    ...
});

Это работает ОК IF, когда пользователь щелкает где-то в области сюжета, но не если она нажимает в другом месте диаграммы (например, ось x, y -axis, заголовок, прокладка вокруг элементов диаграммы и т.д.)

Итак - как я могу сделать диаграмму ENTIRE нажатой?

Большое спасибо заранее!

Ответ 1

У меня была эта же проблема.

Используя инспектор webkit, я вижу, что Highcharts связывает событие click с контейнером диаграммы (div с классом "highcharts-container" ), и это, похоже, мешает щелчку.

Если вы не хотите каких-либо функций в этом событии кликов, вы можете удалить его, установив

chart.container.onclick = null;

В противном случае вам нужно будет использовать встроенные свойства событий highcharts для установки ваших обратных вызовов. Как отмечал ОП, для объекта диаграммы существует свойство "событий", которое должно срабатывать при щелчке по фону графика. Существует также свойство события для параметров сюжета, которое срабатывает при нажатии самой серии.

Например, для участков площади:

var chart = new Highcharts.Chart({
    ...
    plotOptions: {
        area: {
            events: {
                click: function(event) {
                    // do something
                }
            },
        ...
        }
    }
    ...
});

Подробнее см.: http://www.highcharts.com/ref/#plotOptions-area-events

Ответ 2

Я столкнулся с этим и написал расширение/плагин для high-harts 3, который пузырьки вызывают события из высоких диаграмм:

/*global Highcharts*/
(function (Highcharts) {
    "use strict";

    Highcharts.wrap(Highcharts.Pointer.prototype, 'onContainerClick', function (original, e) {
        var pointer = this,
            parent = pointer.chart.container.parentNode,
            bubbleUp = true;

        // Add a method to the event to allow event handlers to prevent propagation if desired
        e.swallowByHighCharts = function() { bubbleUp = false; };

        // Call the original event
        original.apply(this, Array.prototype.slice.call(arguments, 1));

        // Trigger the event on the container parent (to bubble the event out of highcharts)
        // unless the user wanted to stop it
        if (bubbleUp && typeof parent !== 'undefined' && parent) {
            jQuery(pointer.chart.container.parentNode).trigger(e);
        }
    });

}(Highcharts));

С этим добавлением все события кликов выходят из контейнера highcharts. Запуск его в самом контейнере вызывает тонну цикла из-за того, как высокие диаграммы и jquery взаимодействуют с запуском событий, и, по крайней мере, в моем случае у меня фактически не было обработчиков на элементе, используемом как цель рендеринга, в любом случае.

Дополнительный бит о swallowByHighCharts позволяет отключить новое поведение, если необходимо, т.е.

config = {
    chart: { ... }
    plotOptions: {
        series: {
            point: {
                events: {
                    click: function(e) {
                        // Don't pass along clicks on series points for one reason or another
                        e.swallowByHighCharts();
                    }
                }
            }
        }
    }
}

Ответ 3

Очень поздний ответ, но по-прежнему необходим, на мой взгляд.

Документация по высоким стандартам http://api.highcharts.com/highcharts#chart.events.click

относится к script, который просто пересылает событие в контейнер диаграммы: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/events-container/

$(function () {
    $('#chart1').highcharts({
        ...
    });


    $('.chart-container').bind('mousedown', function () {
        $(this).toggleClass('modal');
        $('.chart', this).highcharts().reflow();
    });
});