2012-08-15 56 views

Respuesta

49

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

+0

Si usted está hablando los comentarios en el código del posicionador predeterminado, entonces deberías agradecer al equipo de Highchart. Si es la respuesta completa, entonces gracias :) –

+2

+1 Gran respuesta. 1 año después sigue siendo la mejor respuesta que puedo encontrar y el resultado de búsqueda número 1 en google. Debe marcarse como la respuesta correcta. –

Cuestiones relacionadas