在工具提示定位器回调中重新绘制工具提示

Question

我正在使用我目前使用的工具提示格式化函数来控制工具提示的外观，包括添加一些自定义css来在工具提示框的一侧创建一个面向鼠标的箭头。我还使用定位器回调不仅确定工具提示的位置，而且当它从鼠标的一端更改到另一端时，我正在更新格式化器回调，以切换箭头所在的工具提示的一侧(参见下面的代码)。所有操作都很好，除了导致工具提示切换鼠标边的第一点之外。很明显，工具提示的“格式化程序”函数是在工具提示“定位器”函数之前调用的(原因可能很明显)。但是，当工具提示改变方向时，它会阻止我正确地绘制工具提示。在定位器回调中，我真正需要做的是更新格式化程序函数，然后重新绘制工具提示。这有可能吗？

positioner: function (boxWidth, boxHeight, point) {
    // Set up the variables
    var chart = this.chart;
    var plotLeft = chart.plotLeft;
    var plotTop = chart.plotTop;
    var plotWidth = chart.plotWidth;
    var plotHeight = chart.plotHeight;
    var distance = 40;
    var pointX = point.plotX;
    var pointY = point.plotY;

    // Determine if we need to flip the tooltip from following on the left to
    // following on the right
    if ((pointX - boxWidth - distance) < plotLeft) {
        x = pointX + distance;
        chart.tooltip.options.formatter = function () {
            // UPATE THE TOOLTIP FORMATTER HERE
        };
    }
}

下面是http://jsfiddle.net/bteWs/问题的一个js小提琴示例

如果你走得慢，并且注意到第一点发生开关，箭头就会指向错误的方向。在那之后，它是正确的(如我的文章所描述的)。在这种情况下，只需要寻找一个解决方案来获得正确的行为。

Answer 1

您可以始终为工具提示启用两个类，只需移除定位器中的不正确，请参阅：http://jsfiddle.net/bteWs/3/。

默认格式化程序：

        formatter: function () {
            var s = '<div id="custom-tooltip" class="tooltip-left tooltip-right">';
            var chart = null;
            s += "<div style='padding:5px;color:white'>Some Tooltip</div></div>";
            return s;
        },

并移除：

            if ((pointX - boxWidth - distance) < plotLeft) {
                x = pointX + 60;
                $("#custom-tooltip").removeClass('tooltip-right');
            }
            else {
                x = Math.max(plotLeft, pointX - boxWidth - 10); 
                $("#custom-tooltip").removeClass('tooltip-left');
            }

Answer 2

我也有过同样的问题。问题是定位器是在格式化程序之后开始调用的。我修好了你的小提琴手。这是一个巨大的黑客，但你可以看到你如何克服你的问题。

在修复过程中，我使用了一个全局的。你不需要，但我很匆忙地砍了你的小提琴。我还去掉了你的一些重复代码。

诀窍是在工具提示切换侧之后强制对工具提示进行刷新。

positioner: function (boxWidth, boxHeight, point) {

            // Set up the variables
            var chart = this.chart;
            var plotLeft = chart.plotLeft;
            var plotTop = chart.plotTop;
            var plotWidth = chart.plotWidth;
            var plotHeight = chart.plotHeight;
            var distance = 40;
            var pointX = point.plotX;
            var pointY = point.plotY;
            var refreshTooltip = false;
            var previousAlign = chart.align;

            if ((pointX - boxWidth - distance) < plotLeft) {
                x = pointX + 60;
                chart.align = "left";
            }
            else {
                x = Math.max(plotLeft, pointX - boxWidth - 10); 
                chart.align = "right";

            }
            y = Math.min(plotTop + plotHeight - boxHeight, Math.max(plotTop, pointY - boxHeight + plotTop + boxHeight / 2));

            if (previousAlign != null && chart.align != previousAlign) {
                chart.tooltip.refresh(activePoint);
            }

            return { x: x, y: y };
} 

请看这里的全部小提琴：

http://jsfiddle.net/anber500/bteWs/1/