Highcharts: область кликабельна

Question

У меня есть диаграмма Highchart области. На диаграмму добавлено событие клика, например:

plotOptions: {
                area: {
                    marker: {
                        enabled: false
                    },
                    cursor: 'Pointer',
                    stacking: 'normal',
                    events: {
                        click: function(event) {
                          alert("hi there");
                        }
                    }                   
                }
            }

Работает нормально. Проблема в том, что вы можете щелкнуть только очень близко к линии, но не в области под линией, она не активна.

Есть ли параметр, который я пропустил?

Answer 1

Вы можете использовать эту trackByArea: true функцию области в plotOptions

trackByArea: Boolean

Начиная с 1.1.6. Должна ли вся область или только линия реагировать на подсказки при наведении курсора мыши и другие события мыши или касания.По умолчанию установлено значение false.

Объедините это с click event

щелчком: Функция

Запускается при нажатии на серию.Ключевое слово this относится к самому объекту серии.Один параметр, событие, передается в функцию.Он содержит общую информацию о событиях, основанную на jQuery или MooTools, в зависимости от того, какая библиотека используется в качестве базы для Highcharts.Кроме того, event.point содержит указатель на ближайшую точку на графике.

ex:

plotOptions: { area: { **trackByArea: true**, marker: { enabled: false },..

Answer 2

На самом деле, вы можете делать именно то, что вы хотите из коробки. Выбранный ответ только смотрел на события для объекта PlotOptions; вам нужно посмотреть на события для объекта Chart.

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

Когда вы нажимаете на фон, оно запускает событие.

chart: {
        renderTo: 'container',
        events: {
            click: function(event) {
                alert ('x: '+ event.xAxis[0].value +', y: '+
                      event.yAxis[0].value);
            }
        }        
    },

Answer 3

Согласно документации по старшим диаграммам , событие click охватывает только щелчок по самой серии, поэтому оно не регистрирует события щелчка для щелчка под строкой.

Для чегоесли хотите, вам, возможно, придется обрабатывать вещи самостоятельно, используя mouseOver событие .К сожалению, это событие возникает, когда мышь наводит курсор на график, что означает, что вам нужно выяснить, где находится мышь на графике и т. Д.

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

Answer 4

Вы можете использовать событие диаграммы кликов при щелчке на фоне графика, например:

$(function () {
    // create the chart
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            events: {
                click: function(event) {
                    alert ('x: '+ event.xAxis[0].value +', y: '+
                          event.yAxis[0].value);
                }
            }        
        },
        xAxis: {
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });
});​

Вот ссылка на документацию:

http://www.highcharts.com/ref/#chart-events--click

Надеюсь, это поможет.