ハイチャート：表示前のツールチップの遅延

Question

ハイチャートでは、シリーズのツールチップが表示されるまでに時間がかかることがあります。

私はそれを実現するためのタイマーを備えた新しいリフレッシュ機能を定義しました。タイマーが準備できたら、私はマウスの位置を確認します。そうでなければ、ツールチップが表示されます。

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/