2012-08-15 20 views

cevap

49

Araç ipucu konumlandırıcı, varsayılan konumdan çok daha fazlasıdır. İşlev bağımsız değişkenleri, & araç ipucu boyutlarına ilişkin bilgi içerir, bunun için sağa yerleştirilmesi oldukça basittir. Eğer emrinde üç argüman (boxWidth, boxHeight, nokta) sahip

tooltip:{ 
    positioner:function(boxWidth, boxHeight, point){ 
     ... 
    } 
} 

Not şöyle

Highchart/stock allows you to define your alternate positioner, Bu örneklerden en istenen araç ipucu konumunu hesaplamak için yeterli görünmektedir. boxWidth ve boxHeight, araç ipucunuzun ihtiyaç duyacağı genişlik ve yüksekliktir, dolayısıyla araç ipucunuzu ayarlamak ve grafikten dökülmesini önlemek veya daha da kötüye gitmesini önlemek için bunları kenar kutuları için kullanabilirsiniz. her şeyden önce bilgilerle (Source)

/** 
* Place the tooltip in a chart without spilling over 
* and not covering the point it self. 
*/ 
getPosition: function (boxWidth, boxHeight, point) { 

    // Set up the variables 
    var chart = this.chart, 
     plotLeft = chart.plotLeft, 
     plotTop = chart.plotTop, 
     plotWidth = chart.plotWidth, 
     plotHeight = chart.plotHeight, 
     distance = pick(this.options.distance, 12), // You can use a number directly here, as you may not be able to use pick, as its an internal highchart function 
     pointX = point.plotX, 
     pointY = point.plotY, 
     x = pointX + plotLeft + (chart.inverted ? distance : -boxWidth - distance), 
     y = pointY - boxHeight + plotTop + 15, // 15 means the point is 15 pixels up from the bottom of the tooltip 
     alignedRight; 

    // It is too far to the left, adjust it 
    if (x < 7) { 
     x = plotLeft + pointX + distance; 
    } 

    // Test to see if the tooltip is too far to the right, 
    // if it is, move it back to be inside and then up to not cover the point. 
    if ((x + boxWidth) > (plotLeft + plotWidth)) { 
     x -= (x + boxWidth) - (plotLeft + plotWidth); 
     y = pointY - boxHeight + plotTop - distance; 
     alignedRight = true; 
    } 

    // If it is now above the plot area, align it to the top of the plot area 
    if (y < plotTop + 5) { 
     y = plotTop + 5; 

     // If the tooltip is still covering the point, move it below instead 
     if (alignedRight && pointY >= y && pointY <= (y + boxHeight)) { 
      y = pointY + plotTop + distance; // below 
     } 
    } 

    // Now if the tooltip is below the chart, move it up. It's better to cover the 
    // point than to disappear outside the chart. #834. 
    if (y + boxHeight > plotTop + plotHeight) { 
     y = mathMax(plotTop, plotTop + plotHeight - boxHeight - distance); // below 
    } 


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

şöyle

highstock ile gelen varsayılan araç ipucu pozisyoner, ben sadece float yapma imkânı verir değiştirerek şartı uygulamak için yeterli araçlara sahip düşünüyorum varsayılan sol yerine sağa.

Ben önden gidip sana simplest implementation of positioning tooltip to right, sen aftermentioned varsayılan ipucu POSITIONER en koduna göre sınır durumları uygulamak gerekir verecektir

tooltip: { 
    positioner: function(boxWidth, boxHeight, point) {   
     return {x:point.plotX + 20,y:point.plotY};   
    } 
} 

Oku bahsediyorsun ise daha @Customizing Highcharts - Tooltip positioning

+0

Varsayılan pozisyonerin kodundaki yorumlar, sonra Highchart ekibine teşekkür etmelisiniz. Eğer cevabın bütünü ise, o zaman teşekkürler :) –

+2

+1 Harika cevap. 1 yıl sonra hala bulabileceğim en iyi cevap ve google'da # 1 arama sonucu. Doğru cevap olarak işaretlenmelidir. –