Интегрируйте highcharts-custom-events с React

Question

Я установил пакет highcharts-custom-events для обработки пользовательских событий (dblclick).

как в коде ниже

var Highcharts = require('highcharts'),
HighchartsCustomEvents = require('highcharts-custom-events')(Highcharts);

Но после добавления этого кода, даже существующий клик тоже не работает. Пожалуйста, помогите мне реализовать пользовательские события для реагирования.

Answer 1

Вот пример с реализованными пользовательскими событиями в Highcharts с использованием обертки реагировать.

import CustomEvents from "highcharts-custom-events";

CustomEvents(Highcharts);
//require('highcharts-custom-events')(Highcharts);

Оба вышеперечисленных способа работают - импортируют и требуют.

Демонстрация: https://codesandbox.io/s/highcharts-react-demo-1rtxl

Если это не поможет, не могли бы вы воспроизвести ваше дело в онлайн-редакторе, над которым я мог бы поработать?

Answer 2

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

На этом посте есть реализация функции двойного щелчка, это решение также разбивает одиночный щелчок, дело в том, что вы можете добавить одиночный щелчок в качестве условия внутри функции двойного щелчка:

Fisrt определяет настройки:

            var doubleClicker = {
                clickedOnce : false,
                timer : null,
                timeBetweenClicks : 400
            };

Затем определите функцию «сброса двойного щелчка» в случае, если двойной щелчок недостаточно быстр и обратный вызов двойного щелчка:

            // call to reset double click timer
            var resetDoubleClick = function() {
              clearTimeout(doubleClicker.timer);
              doubleClicker.timer = null;
              doubleClicker.clickedOnce = false;
            };

            // the actual callback for a double-click event
            var ondbclick = function(e, point) {
              if (point && point.x) {
                  // Do something with point data
              }
            };

Пример настроек Highcharts

    series: [{
      point: {
        events: {

          click: function(e) {
            if (doubleClicker.clickedOnce === true && doubleClicker.timer) {
              resetDoubleClick();
              ondbclick(e, this);
            } else {
              doubleClicker.clickedOnce = true;
              doubleClicker.timer = setTimeout(function(){
                resetDoubleClick();
              }, doubleClicker.timeBetweenClicks);
            }
          }

        }
       }
    }]