Highcharts - 双击事件答案

【问题标题】：Highcharts - Double click eventHighcharts - 双击事件
【发布时间】：2014-06-17 14:29:01
【问题描述】：

高位图表有双击事件之类的？

plotOptions: {
    series: {
        cursor: 'pointer',
        marker: {
            radius: 2
        },
        point: {
            events: {
                // like this any event?If not, any alternative
                dbclick: function () {
                    $('.highcharts-tooltip').show();
                },
                click: function () {
                    $('.highcharts-tooltip').show();
                },
                mouseOver: function () {
                    $('.highcharts-tooltip').hide();
                },
                mouseOut: function () {
                    $('.highcharts-tooltip').hide();
                }
            }
        }
    }
}

我想要实现的是，我想在双击点时显示工具提示。

【问题讨论】：

How to detect double clicks or long clicks on points in Highcharts charts?的可能重复

标签： highcharts

【解决方案1】：

我尝试使用扩展，但它不起作用，所以我决定写一个小的双击事件（基于点击事件）。

缺点是它被封装在 'click' 事件中，但这不是一个大问题，因为它调用了一个单独的函数。

首先，定义设置：

            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);
            }
          }

        }
       }
    }]

【讨论】：

我正在尝试实现此逻辑以在 series.events.legendItemClick 上使用双击和单击，但我需要在事件处理程序结束时返回 false 才能使双击工作。是否有逻辑可以使这两种点击都起作用？？
@BernardoMarques 你可以添加一个 codepen / jsbin 并举例说明你正在尝试做什么但不起作用？
我很难创建一个工作示例。我正在使用反应包装器运行我的项目。但我能够处理它。我在else 循环的doubleClicker.clickedOnce = true; 行之后添加了单击事件处理程序。
我需要更改 ondbclick -> "...if (point && point.x) {..." 以满足我的需要。不确定是否需要编辑以阐明在该步骤中添加您自己的逻辑的需要

【解决方案2】：

您可以使用允许执行此操作的扩展程序。

http://www.highcharts.com/plugin-registry/single/15/Custom-Events

【讨论】：

链接失效了

【解决方案3】：

我将变量的捕获用作双击参数。如果是真的，我清理了双击。

  series: {
    cursor: 'pointer',
    point: {
        events: {
            click: function () {

                if (clickdouble == ('Category: ' + this.category + ', value: ' + this.y)) {
                    alert('Category: ' + this.category + ', value: ' + this.y);
                    clickdouble = '';
                }else{
                    clickdouble = 'Category: ' + this.category + ', value: ' + this.y;
                }

            }
        }
    }
}

它对我有用。

【讨论】：

【解决方案4】：

您可以在包含图表的容器的 dom 元素中添加 ondblclick 事件侦听器。目前 highcharts 似乎没有处理该事件，因此该事件将简单地传播到容器。

【讨论】：