Etykieta Highcharts zawsze po prawej stronie kursora

Question

Chcę wyświetlić etykietkę narzędzi po prawej stronie kursora.

Zajrzałem do dokumentacji/przykładów, ale nie mogę znaleźć sposobu, aby zmusić podpowiedzi do pozostania po prawej stronie kursora.

Czy ktoś może mi powiedzieć, jak to zrobić?

Dzięki tooltip positioner mogę ustawić tylko domyślną pozycję.

Answer 1

Pozycjoner położenia narzędzia to znacznie więcej niż domyślna pozycja. Argumenty funkcji zawierają informacje o twoich położeniach pozycji & wymiarów podpowiedzi, za pomocą których powinno być dość proste umieszczenie ich w prawo.

Highchart/stock allows you to define your alternate positioner następująco

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

Zauważ, że masz trzy argumenty (boxWidth, boxHeight, punkt) Do dyspozycji te wydają się być wystarczające dla większości przypadków użycia, aby obliczyć żądaną pozycję podpowiedzi. Parametry boxWidth i boxHeight to szerokość i wysokość, których wymaga etykieta narzędziowa, dlatego możesz użyć ich w przypadku krawędzi, aby dostosować etykietę narzędzia i zapobiec jej wyciekaniu z wykresu lub nawet gorszemu przycinaniu.

Domyślna etykietka pozycjoner, że pochodzi z highstock jest następujący (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}; 
} 

Z wszystkich powyższych informacji, myślę, że masz odpowiednie narzędzia do realizacji Państwa wymagań przez prostą modyfikację funkcji, aby pływaka w prawo zamiast domyślnej lewej.

pójdę do przodu i daje simplest implementation of positioning tooltip to right, powinieneś być w stanie realizować przypadki brzegowe oparte na kodzie aftermentioned domyślnego etykietka pozycjonera

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

Czytaj więcej @Customizing Highcharts - Tooltip positioning