1

我有一个自定义工具提示，我使用 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 文件设置了工具提示的样式。这很好用，除了一个问题，工具提示如下所示：

在此处输入图像描述所以问题是当十字准线在图表的左侧时，工具提示在右侧，箭头在错误的一侧。

在此处输入图像描述

是否可以知道工具提示何时改变方向，然后相应地添加一个类？这样我就可以调整样式了。

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

4

3 回答 3

2

我不确定这是否会对您有所帮助，但您可以检查一下：

检查tooltip->positioner的API：tooltip.positioner API（如果你使用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，所以你可以检查并使用该选项。

于 2013-04-30T13:56:56.270 回答
0

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

tooltip: {
      useHTML: true, 
      positioner: "function () { return { x: 0, y: 0 }; }"
}
于 2018-04-09T07:08:25.903 回答
0

下面的用户

#container {
    direction:ltr !important;
}
于 2018-12-12T09:45:54.217 回答