Highcharts tooltip始終在光標的右側

Question

我想在光標的右側顯示工具提示。

我查看了文檔/示例，但我找不到強制工具提示停留在光標右側的方法。

誰能告訴我該怎麼做？

With tooltip positioner我只能設置一個默認位置。

Answer 1

工具提示定位器遠不止是默認位置。函數參數包含有關您的點位置的信息&工具提示尺寸，使用它可以很方便地將它放在右側。

Highchart/stock allows you to define your alternate positioner如下

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

請注意，您在您的處置三個參數（boxWidth，boxHeight，點），這些似乎足以滿足大多數的使用情況來計算所需的提示位置。 boxWidth和boxHeight是您的工具提示所需的寬度和高度，因此您可以將它們用於邊緣案例來調整工具提示，並防止它從圖表中溢出，甚至更糟糕。

附帶highstock默認提示定位如下（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}; 
} 

與所有上述信息，我覺得你有足夠的工具，通過簡單修改功能，使浮來實現您的要求對，而不是默認的左邊。

我會繼續前進，給你simplest implementation of positioning tooltip to right，你應該能夠實現基於後述的默認提示定位器的代碼的邊緣情況

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

更多@Customizing Highcharts - Tooltip positioning