Блог

Главная - Вопросы по программированию - Верхние диаграммы: как рисовать сегменты линий с помощью щелчка и перетаскивания и без прокрутки диаграммы?

Верхние диаграммы: как рисовать сегменты линий с помощью щелчка и перетаскивания и без прокрутки диаграммы?

#javascript #highcharts

#javascript #highcharts

Вопрос:

У меня есть свой код внутри этого JSFiddle, и в качестве ссылки я рассматриваю этот JSFiddle. Когда я пытаюсь нарисовать segment аннотацию или arrow-segment аннотацию, прокручивается вся диаграмма. Кроме того, рисование невозможно выполнить одним щелчком мыши и перетаскиванием для рисования.

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

 (function(H) {
  function customInitEvents() {
    var objectEach = H.objectEach,
      addEvent = H.addEvent,
      isFunction = H.isFunction;

    var navigation = this,
      chart = navigation.chart,
      bindingsContainer = navigation.container,
      options = navigation.options;

    this.removeEvents();
    // Shorthand object for getting events for buttons:
    navigation.boundClassNames = {};
    objectEach((options.bindings || {}), function(value) {
      navigation.boundClassNames[value.className] = value;
    });
    // Handle multiple containers with the same class names:
    [].forEach.call(bindingsContainer, function(subContainer) {
      navigation.eventsToUnbind.push(addEvent(subContainer, 'click', function(event) {
        var bindings = navigation.getButtonEvents(subContainer,
          event);
        if (bindings) {
          navigation.bindingsButtonClick(bindings.button, bindings.events, event);
        }
      }));
    });
    objectEach(options.events || {}, function(callback, eventName) {
      if (isFunction(callback)) {
        navigation.eventsToUnbind.push(addEvent(navigation, eventName, callback));
      }
    });
    navigation.eventsToUnbind.push(addEvent(chart.container, 'mousedown', function(e) {
      if (!chart.cancelClick amp;amp;
        chart.isInsidePlot(e.chartX - chart.plotLeft, e.chartY - chart.plotTop)) {
        navigation.bindingsChartClick(this, e);
      }
    }));
    navigation.eventsToUnbind.push(addEvent(chart.container, 'mouseup', function(e) {
      if (!chart.cancelClick amp;amp;
        chart.isInsidePlot(e.chartX - chart.plotLeft, e.chartY - chart.plotTop)) {
        navigation.bindingsChartClick(this, e);
      }
    }));
    navigation.eventsToUnbind.push(addEvent(chart.container, H.isTouchDevice ? 'touchmove' : 'mousemove', function(e) {
      navigation.bindingsContainerMouseMove(this, e);
    }));
  }

  H.wrap(H.Chart.prototype, 'initNavigationBindings', function(proceed) {
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));

    customInitEvents.call(this.navigationBindings);
  });
}(Highcharts));

Ответ №1:

Для этой функциональности требуется пользовательский код. После переноса initNavigationBindings метода вы можете реорганизовать initEvents метод и включить mousedown mouseup события и:

 (function(H) {
    function customInitEvents() {
        ...
        navigation.eventsToUnbind.push(addEvent(chart.container, 'mousedown', function(e) {
            if (!chart.cancelClick amp;amp;
                    chart.isInsidePlot(e.chartX - chart.plotLeft, e.chartY - chart.plotTop)) {
                e.isFakeClickEvent = true;
                navigation.bindingsChartClick(chart, e);
            }
        }));

        navigation.eventsToUnbind.push(addEvent(chart.container, 'mouseup', function(e) {
            chart.pointer.normalize(e);
            navigation.bindingsChartClick(chart, e);
        }));
        ...
    }

    H.wrap(H.Chart.prototype, 'initNavigationBindings', function(proceed) {
        var chart = this;

        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
        chart.navigationBindings.removeEvents();

        customInitEvents.call(chart.navigationBindings);
    });
}(Highcharts));

Живая демонстрация: https://jsfiddle.net/blackLabel/eb7qsf63/

Документы: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

Комментарии:

1. это решение обрабатывало деталь с помощью щелчков, но панорамирование по-прежнему работает не так, как мне нужно. Панорамирование должно быть включено и не должно применяться только во время рисования пользователем аннотаций. Здесь, в этом коде jsfiddle.net/delux123/fojd7zuv/2 Я включил панорамирование, и вы можете видеть, как я пытался манипулировать им с помощью включения mousedown и mouseup событий. Но варианты, которые я пробовал, не работают для меня. Не могли бы вы, пожалуйста, помочь мне, как это можно сделать?

2. Привет @delux, Вы были близки., пожалуйста, проверьте этот пример: jsfiddle.net/BlackLabel/f7eac92d Вы можете добавить какой-нибудь пользовательский флаг на диаграмму и обернуть pan метод.

3. Спасибо! Интересно, какие методы вы использовали в этом решении, например navigation.eventsToUnbind , и navigation.bindingsChartClick можно ли их найти где-нибудь в официальных документах для highcharts? Мне интересно, поскольку даже когда вы предоставили мне первоначальное решение, я не смог найти эти методы нигде в документации.

4. Методы являются внутренними, и я нашел их в исходном коде, например: code.highcharts.com/modules/annotations-advanced.src.js

5. Это связано с тем, что mouseup событие добавляется только в контейнер диаграммы. Пожалуйста, протестируйте этот пример: jsfiddle.net/BlackLabel/bsnjxmw6 с mouseup добавлением события в документ.

Метки: