Highcharts工具提示获取位置和变化类

Question

我有我一直在使用HTML和headerFormat等风格，像这样的自定义工具提示：

tooltip: { 
      useHTML: true, 
      valueDecimals: 2, 
      backgroundColor: 'none', 
      borderColor: '#c0c0c0', 
      borderRadius: 0, 
      borderWidth: 0, 
      xDateFormat: '%d %b %y', 
      headerFormat: '<div class="chart-tooltip"><span class="tooltip-header">{point.key}</span><br><div class="markers"><span class="tooltip-bg"></span>', 
      pointFormat: '<span class="tooltip-marker" style="background: {series.color};"></span>' + 
       '<span class="tooltip-series" style="color: {series.color};">{point.y}</span><br>', 
      footerFormat: '</div></div>', 
      animation: false, 
      shadow: false, 
      style: { 
       padding: '0px' 
      } 
     } 

中的类我已经然后用我的外部CSS文件风格的工具提示。这个效果很好，除了一个问题，工具提示看起来像这样：

所以问题是当十字线在图表的左侧，工具提示移到右侧，箭头在错误的一侧。

是否有可能知道什么时候提示变化两侧，然后相应地添加一个类？所以我可以调整风格。

任何帮助将是伟大的，谢谢。

Answer 1

我不知道这是否会帮助你，但你可以检查一下：

检查tooltip->定位的API：http://api.highcharts.com/highcharts#tooltip.positioner（如果你使用highstock你可以用它太）

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

为highcharts的默认工具提示（highcharts.js）：

/** 
* 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), 
    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 + mathMax(pointX, 0) + 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}; 
}, 

我发现这个在这里说明一下：Highcharts tooltip always on right side of cursor，这样你就可以检查并玩这个选项。

Answer 2

您可以使用工具提示定位器来确定位置。 http://api.highcharts.com/highcharts#tooltip.positioner