Highcharts工具提示总是在光标的右侧 [英] Highcharts tooltip always on right side of cursor

问题描述

我查看了文档/示例，但我找不到一种方法来强制使用工具提示留在游标的右侧。

任何人都可以告诉我该怎么做吗？

使用工具提示定位器，我只能设置默认位置。

解决方案

Tooltip定位器远不止是默认位置。函数参数包含有关你的点位置和信息的信息。工具提示尺寸，使用它应该是相当简单的位置在右边。

Highchart / stock允许您定义替代定位器，如下所示：

  tooltip：{
 positioner：function（boxWidth，boxHeight，point）{
 ... 
} 
} 
  

请注意，您可以随意使用三个参数（boxWidth，boxHeight，point），这似乎足以满足大多数用例计算所需的工具提示位置的需求。 boxWidth和boxHeight是您的工具提示所需的宽度和高度，因此您可以将它们用于边缘案例来调整您的工具提示，并防止它从图表中溢出，甚至更难以修剪。

高配置的默认工具提示定位器如下所示（源） p>

  / ** 
 *将工具提示放置在图表中，不会溢出
 *，也不会覆盖它的重点自。 
 * / 
 getPosition：function（boxWidth，boxHeight，point）{
 
 //设置变量
 var chart = this.chart，
 plotLeft = chart.plotLeft，
 plotTop = chart.plotTop，
 plotWidth = chart.plotWidth，
 plotHeight = chart.plotHeight，
 distance = pick（this.options.distance， 12）//你可以直接在这里使用一个数字，因为你可能无法使用pick，因为它是一个内部的highchart函数
 pointX = point.plotX，
 pointY = point.plotY，
x = pointX + plotLeft +（chart.inverted？distance：-boxWidth  -  distance），
y = pointY  -  boxHeight + plotTop + 15，// 15表示该点距离工具提示底部15像素
 alignedRight; 
 
 //如果（x <7）{
 x = plotLeft + pointX + distance;则距离左边太远，将其调整为
; 
} 
 
 //测试以查看工具提示是否太靠右，
 //如果是，将其移回内部，然后不覆盖重点。 $（
）if（（x + boxWidth）>（plotLeft + plotWidth））{
 x  -  =（x + boxWidth） - （plotLeft + plotWidth）; 
 y = pointY  -  boxHeight + plotTop  -  distance; 
 alignedRight = true; 
} 
 
 //如果现在位于绘图区上方，则将其与绘图区域顶部的
对齐，如果（y y = plotTop + 5; 
 
 //如果工具提示仍然覆盖该点，则将其移动到下面而不是
 if（alignedRight&& pointY> = y&& pointY< =（y + boxHeight））{
y = pointY + plotTop + distance; //下面
} 
} 
 
 //现在，如果工具提示位于图表下方，请将其向上移动。最好覆盖
 //点，而不是在图表外消失。 ＃834。 
 if（y + boxHeight> plotTop + plotHeight）{
 y = mathMax（plotTop，plotTop + plotHeight  -  boxHeight  -  distance）; //下面
} 
 
 
 return {x：x，y：y}; 
} 
  

通过以上所有信息，我认为您有足够的工具来实现您的要求通过简单地修改该函数来使float浮动到右侧而不是默认的左侧。

我将继续向您提供最简单的实现定位工具提示到右侧，您应该能够基于后面提到的默认工具提示定位器的代码实现边缘案例

  tooltip：{
 positioner：function（boxWidth，boxHeight，point）{
 return {x：point.plotX + 20，y：point.plotY}; 
 
 
  

了解更多@ 定制Highcharts - 工具提示定位

I want to show the tooltip on the right side of the cursor.

I looked in the documentation/examples but I can't find a way to force the tooltips to stay on the right side of the cursor.

Can anyone tell me how to do it?

With tooltip positioner I only can set a default position.

解决方案

Tooltip positioner is much more than just default position. The function arguments contain info about your point position & tooltip dimensions, using which it should be fairly simple to position it to the right.

Highchart/stock allows you to define your alternate positioner as follows

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

Note that you have three arguments (boxWidth, boxHeight, point) at your disposal, these seem to be sufficient for most of the use cases to calculate a desired tooltip position. boxWidth and boxHeight are the width and height that your tooltip will require, hence you can use them for edge cases to adjust your tooltip and prevent it from spilling out of the chart or even worse getting clipped.

The default tooltip positioner that comes with highstock is as follows (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};
}

With all the above information, I think you have sufficient tools to implement your requirement by simply modifying the function to make float to right instead of the default left.

I will go ahead and give you the simplest implementation of positioning tooltip to right, you should be able to implement the edge cases based on the aftermentioned default tooltip positioner's code

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

Read more @ Customizing Highcharts - Tooltip positioning

这篇关于Highcharts工具提示总是在光标的右侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！