Категории оси Y react-highcharts перехватывают событие click в режиме реагирования

Я использую react-highcharts и пытаюсь найти способ инициировать событие при нажатии одной из категорий оси Y. Я использую график xrange. Я хочу получить смещение значения, которое было нажато. Например, если у меня есть:

CatA

Catb

CatC

Если я нажму на CatB, я получу 1.

Я нашел решение jquery, которое дает мне само значение. Не проблема получить все элементы, перебрать их и найти смещение самостоятельно. Решение jquery:

$("#container .highcharts-yaxis-labels text").click(function() {
            alert($(this).text());
        });

Я ищу для этого решение react/react-highcarts.

Обновить

Спасибо Камил Кулиг! У меня проблемы с библиотекой. Я импортирую библиотеку как

import HighchartsCustomEvents from 'highcharts-custom-events';

И ничего не произошло, также я добавил этот код в функцию componentWillMount:

template.yAxis.events.click = function () {
            alert(1);
        };

Я видел документы и не нашел никакой функции смещения, что означает, что я все равно должен использовать jquery? или у вас есть идеи?


highcharts react-highcharts
person Elad Motola    schedule 24.04.2018    source источник
comment
Вы можете выполнять операции либо с метками оси (yAxis.labels.events), либо с заголовком оси (yAxis.title.events). yAxis.events не работает.   -  person Kamil Kulig    schedule 27.04.2018

Ответы (1)


arrow_upward
1
arrow_downward

Highcharts предлагает модуль пользовательских событий, способный обрабатывать требуемые действия.

Ссылка на модуль в npm: https://www.npmjs.com/package/highcharts-custom-events

Ссылка на модуль на веб-сайте Highcharts: https://www.highcharts.com/products/plugin-registry/single/15/Custom-Events

Образец кода:

    yAxis: {
        labels: {
            events: {
                click: function () {
                   // do something
                }
            }
        }
    }
person Kamil Kulig    schedule 25.04.2018
comment
Я теряюсь, чтобы объединить его с модулем react-highcharts и es6, вы можете помочь? - person Elad Motola; 21.05.2018
comment
Я могу помочь с официальной оболочкой для Highcharts (вы используете неофициальную версию). В этом документе объясняется, как импортировать дополнительный модуль в Highcharts в React (на примере модуля Highmaps): (npmjs.com/package/highcharts-react-official - person Kamil Kulig; 21.05.2018
comment
Ничего себе, много rreact-highcharts... Я проверю это прямо сейчас. Любая идея для получения смещения? - person Elad Motola; 21.05.2018