Highcharts - Double click event

僤鯓⒐⒋嵵緔 提交于 2021-02-16 06:58:40

问题


High charts has double click event like?

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

What i want to achieve is, i want to show tool tip on double click on point.


回答1:


You can use an extension, which allows do this.

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




回答2:


I tried using the extension, but it did not work, so I decided to write a small double click event (based on click event).

The downside is that it's encapsulated inside the 'click' event, but that's not a big issue since it calls a separate function.

First, define settings:

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

Then define a 'double click reset' function in case the double click is not fast enough and a double click callback:

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

and in the highcharts settings of the chart:

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

        }
       }
    }]



回答3:


I used the capture of the variable as a double click parameter. And when true I cleaned the doubleclick.

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

            }
        }
    }
}

It works for me.




回答4:


You can add an ondblclick event listener at the container's dom element in which you have the chart. Currently highcharts doesn't seem to handle the event so the event will simply propagate to the container.



来源:https://stackoverflow.com/questions/24266454/highcharts-double-click-event

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!