Chú giải công cụ Highcharts luôn ở bên phải của con trỏ

Question

Tôi muốn hiển thị chú giải công cụ ở bên phải con trỏ.

Tôi đã xem tài liệu/ví dụ nhưng tôi không thể tìm cách buộc chú giải công cụ ở bên phải con trỏ.

Mọi người có thể cho tôi biết cách thực hiện không?

Với tooltip positioner Tôi chỉ có thể đặt vị trí mặc định.

Answer 1

Trình định vị chú giải công cụ không chỉ là vị trí mặc định. Đối số hàm chứa thông tin về vị trí điểm của bạn & kích thước tooltip, sử dụng nó nên khá đơn giản để định vị nó ở bên phải.

Highchart/stock allows you to define your alternate positioner như sau

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

Lưu ý rằng bạn có ba đối số (boxWidth, boxHeight, điểm) theo ý của bạn, nhưng dường như là đủ cho hầu hết các trường hợp sử dụng để tính toán vị trí tooltip mong muốn. boxWidth và boxHeight là chiều rộng và chiều cao mà chú giải công cụ của bạn sẽ yêu cầu, do đó bạn có thể sử dụng chúng cho các trường hợp cạnh để điều chỉnh chú giải công cụ của bạn và ngăn không cho nó tràn ra khỏi biểu đồ hoặc thậm chí bị cắt bớt.

Các positioner tooltip mặc định mà đi kèm với highstock là như sau (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}; 
} 

Với tất cả những thông tin trên, tôi nghĩ rằng bạn có đủ công cụ để thực hiện yêu cầu của bạn bằng cách đơn giản thay đổi các chức năng để làm phao để bên phải thay vì mặc định bên trái.

Tôi sẽ đi trước và cung cấp cho bạn simplest implementation of positioning tooltip to right, bạn sẽ có thể để thực hiện các trường hợp cạnh dựa trên mã aftermentioned mặc định tooltip positioner của

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

Read more @Customizing Highcharts - Tooltip positioning