Highcharts:如何在单击和拖动且没有图表滚动的情况下绘制线段? [英] Highcharts: how to draw line segments with click-and-drag and without chart to scroll?

问题描述

我将我的代码放在此JSFiddle 中，并且作为参考，我正在考虑此JSFiddle .当我尝试绘制 segment 注释或 arrow-segment 注释时，整个图表都在滚动.此外，不能通过单击鼠标并拖动来绘制图形.

I am having my code inside of this JSFiddle and as a reference I am considering this JSFiddle. When I am trying to draw a segment annotation or an arrow-segment annotation, the whole chart is scrolling. Additionally, drawing can not be performed in a single mouse click and dragging to draw.

此处是一个示例视频，说明了我希望我的图表相对于工作原理的运作方式.实际运作方式.此行为的实现是在方法 customInitEvents 中启动的，但是我不确定如何从此进一步进行.

Here is an example video of how I want my chart to works v.s. how it actually works. The implementation for this behavior was initiated in the method customInitEvents, but I am not sure how to proceed further from there.

(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 &&
        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 &&
        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));

推荐答案

该功能需要自定义代码.包装 initNavigationBindings 方法后，您可以重构 initEvents 方法，并包括 mousedown 和 mouseup 事件:

That functionality requires custom code. After wrapping the initNavigationBindings method, you can refactor the initEvents method and include mousedown and mouseup events:

(function(H) {
    function customInitEvents() {
        ...
        navigation.eventsToUnbind.push(addEvent(chart.container, 'mousedown', function(e) {
            if (!chart.cancelClick &&
                    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

这篇关于Highcharts:如何在单击和拖动且没有图表滚动的情况下绘制线段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！