0

我正在使用我目前正在使用工具提示格式化程序功能来控制工具提示的外观，包括添加一些自定义 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 fiddle 示例

如果你慢慢地走，并注意到切换发生的第一个点，箭头将指向错误的方向。之后它会更正（如我的帖子中所述）。只是在寻找解决方案以在这种情况下获得正确的行为。

4

2 回答 2

2

您始终可以为工具提示启用两个类，只需删除定位器中的错误，请参阅：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');
            }
于 2013-08-01T11:56:43.837 回答
0

我遇到过同样的问题。问题是定位器是在格式化程序之后开始调用的。我对您的 jsfiddle 进行了修复。这是一个巨大的黑客，但你可以看到如何克服你的问题。

在修复中，我使用了全局变量。你不需要，但我匆忙破解了你的小提琴。我还删除了您的一些重复代码。

诀窍是在工具提示切换后强制刷新工具提示。

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/

于 2013-08-01T06:14:55.017 回答