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文件设置为工具提示。这很有效，除了一个问题，工具提示看起来像这样：

enter image description here 所以问题是当十字准线位于图表的左侧时，工具提示会向右移动而箭头位于错误的一侧。

enter image description here

是否可以知道工具提示何时更改边，然后相应地添加一个类？所以我可以调整样式。

任何帮助都会很棒，谢谢。

Answer 1

我不确定这对你有帮助，但你可以检查一下：

检查工具提示的API＆gt;定位器：tooltip.positioner API（如果您使用的是高品牌，也可以使用它）

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

这将显示高图表左下角的工具提示：

tooltip: {
      useHTML: true, 
      positioner: "function () { return { x: 0, y: 0 }; }"
}

Answer 3

以下用户

#container {
    direction:ltr !important;
}

Highcharts工具提示获得位置和更改类

3 个答案: