Highcharts tooltip siempre en el lado derecho del cursor

Question

Quiero mostrar la información sobre herramientas en el lado derecho del cursor.

He buscado en la documentación/ejemplos, pero no puedo encontrar la manera de forzar a los tooltips a permanecer en el lado derecho del cursor.

¿Puede alguien decirme cómo hacerlo?

Con tooltip positioner solo puedo establecer una posición predeterminada.

Answer 1

El posicionador Tooltip es mucho más que la posición predeterminada. Los argumentos de la función contienen información sobre la posición de su punto &, las dimensiones de la información sobre herramientas, con lo cual debería ser bastante sencillo ubicarlo a la derecha.

Highchart/stock allows you to define your alternate positioner de la siguiente manera

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

en cuenta que tiene tres argumentos (boxWidth, boxHeight, punto) a su disposición, estos parecen ser suficientes para la mayoría de los casos de uso para calcular una posición sobre herramientas deseada. boxWidth y boxHeight son el ancho y alto que requerirá la información sobre herramientas, por lo tanto, puedes usarlos para casos extremos para ajustar tu información sobre herramientas y evitar que se desborde del gráfico o, peor aún, que se recorte.

El posicionador sobre herramientas por defecto que viene con highstock es el siguiente (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}; 
} 

Con toda la información anterior, yo creo que hay herramientas suficientes para poner en práctica su requerimiento simplemente modificando la función de hacer flotador derecha en lugar de la izquierda predeterminada.

voy a seguir adelante y darle el simplest implementation of positioning tooltip to right, usted debería ser capaz de poner en práctica los casos extremos basados ​​en código de la descripción del posicionador predeterminado aftermentioned

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

Más @Customizing Highcharts - Tooltip positioning