Highcharts: Задержка подсказки перед отображением

Question

На моем highchart мне нужна задержка до появления всплывающей подсказки серии.

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

function (H) { 
       var timer = []; 
       var mousePosition = { 
        x: 0, 
        y: 0 
       }; 

       window.addEventListener("mousemove", function (event) { 
        mousePosition.x = event.pageX; 
        mousePosition.y = event.pageY; 
       }); 

       var getMousePositionX = function() { 
        return mousePosition.x; 
       }; 

       var clearTimer = function() { 
        timer = []; 
       } 

       H.wrap(H.Tooltip.prototype, 'refresh', function (proceed) { 
        var mousePosX = getMousePositionX(); 
        var delayForDisplay = this.chart.options.tooltip.delayForDisplay ? this.chart.options.tooltip.delayForDisplay : 1000; 
        timer[timer.length+1] = window.setTimeout(function() { 
         var currMousePosX = getMousePositionX(); 
         if ((mousePosX >= currMousePosX - 5 && mousePosX <= currMousePosX + 5)) { 
          this.proceed.apply(this.tooltip, this.refreshArguments); 
          clearTimer(); 
         } 
        }.bind({ 
         refreshArguments: Array.prototype.slice.call(arguments, 1), 
         chart: this.chart, 
         tooltip: this, 
         clearTimer: clearTimer, 
         proceed: proceed 
        }), delayForDisplay); 
       }); 
      }; 

Проблема, которая есть у меня, заключается в том, что голово-зависание также имеет задержку.

Вот пример: JSFiddle

Любые решения по этому вопросу?

Answer 1

Вы можете сделать новую подсказку базирования на вашей стандартную Highcharts подсказке и показать его на наведении курсора мыши с некоторым промежутком времени:

load: function() { 
    chart = this; 
    this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip); 
    this.tooltip.label.element.remove(); 
} 


    point: { 
     events: { 
     mouseOver: function(e) { 
      var i = this.x; 
      points = []; 
      Highcharts.each(this.series.chart.series, function(s) { 
      Highcharts.each(s.data, function(p) { 
       if (p.x === i) { 
       points.push(p) 
       } 
      }) 
      }); 
      myTooltip = chart.myTooltip; 
      setTimeout(function() { 
      myTooltip.refresh(points, e) 
      }, 1000) 

     }, mouseOut: function() { 
     setTimeout(function() { 
     chart.myTooltip.hide(); 
      }, 1000) 
     } 
     } 
    } 

Здесь вы можете увидеть пример того, как это может работать: http://jsfiddle.net/az39das8/