重繪工具提示裏面的工具提示定位器回調

我正在使用我目前正在使用工具提示格式化程序功能來控制工具提示的外觀，包括添加一些自定義CSS以在工具提示框的側面創建箭頭面對老鼠。我還使用定位器回調來確定工具提示的位置，但是當它從鼠標的一側改變到另一側時，我正在更新格式化程序回調以切換箭頭所在的工具提示的一側（請參閱代碼如下）。一切工作正常，除了導致工具提示切換鼠標兩側的第一個點。它顯然在工具提示「定位器」函數之前調用了一個工具提示的「格式化程序」函數（出於可能很明顯的原因）。但是，它會阻止我在更改邊時正確繪製工具提示。我真正需要在定位器回調中做的事情是更新格式化函數，然後重新繪製工具提示。那可能嗎？重繪工具提示裏面的工具提示定位器回調

positioner: function (boxWidth, boxHeight, point) { 
    // Set up the variables 
    var chart = this.chart; 
    var plotLeft = chart.plotLeft; 
    var plotTop = chart.plotTop; 
    var plotWidth = chart.plotWidth; 
    var plotHeight = chart.plotHeight; 
    var distance = 40; 
    var pointX = point.plotX; 
    var pointY = point.plotY; 

    // Determine if we need to flip the tooltip from following on the left to 
    // following on the right 
    if ((pointX - boxWidth - distance) < plotLeft) { 
     x = pointX + distance; 
     chart.tooltip.options.formatter = function() { 
      // UPATE THE TOOLTIP FORMATTER HERE 
     }; 
    } 
}

這裏是問題 http://jsfiddle.net/bteWs/

如果你去慢慢地，並注意其中開關發生的箭頭會指向錯誤的方向的第一個點的JS小提琴例子。之後它糾正（如我的文章所述）。只是在這種情況下尋找解決方案來獲得正確的行爲。

來源

2013-07-31 Michael Aucoin

您可以隨時啓用了這兩個類提示，只是刪除inproper的定位，請參閱：http://jsfiddle.net/bteWs/3/

默認格式：

 formatter: function() { 
      var s = '<div id="custom-tooltip" class="tooltip-left tooltip-right">'; 
      var chart = null; 
      s += "<div style='padding:5px;color:white'>Some Tooltip</div></div>"; 
      return s; 
     },

並刪除：

  if ((pointX - boxWidth - distance) < plotLeft) { 
       x = pointX + 60; 
       $("#custom-tooltip").removeClass('tooltip-right'); 
      } 
      else { 
       x = Math.max(plotLeft, pointX - boxWidth - 10); 
       $("#custom-tooltip").removeClass('tooltip-left'); 
      }

來源

2013-08-01 11:56:43

我有同樣的問題。問題在於定位器在格式器之後被調用。我修好了你的jsfiddle。這是一個巨大的黑客，但你可以看到你如何克服你的問題。

在修復中，我使用了全局。你不需要，但我匆匆闖入你的小提琴。我也擺脫了一些重複的代碼。

訣竅是強制刷新工具提示後的工具提示切換雙方。

positioner: function (boxWidth, boxHeight, point) { 

      // Set up the variables 
      var chart = this.chart; 
      var plotLeft = chart.plotLeft; 
      var plotTop = chart.plotTop; 
      var plotWidth = chart.plotWidth; 
      var plotHeight = chart.plotHeight; 
      var distance = 40; 
      var pointX = point.plotX; 
      var pointY = point.plotY; 
      var refreshTooltip = false; 
      var previousAlign = chart.align; 

      if ((pointX - boxWidth - distance) < plotLeft) { 
       x = pointX + 60; 
       chart.align = "left"; 
      } 
      else { 
       x = Math.max(plotLeft, pointX - boxWidth - 10); 
       chart.align = "right"; 

      } 
      y = Math.min(plotTop + plotHeight - boxHeight, Math.max(plotTop, pointY - boxHeight + plotTop + boxHeight/2)); 

      if (previousAlign != null && chart.align != previousAlign) { 
       chart.tooltip.refresh(activePoint); 
      } 

      return { x: x, y: y }; 
}

在這裏看到完整的小提琴：

http://jsfiddle.net/anber500/bteWs/1/

來源

2013-08-01 06:14:55 anber

重繪工具提示裏面的工具提示定位器回調

回答

相關問題