Highcharts + Plotband工具提示悬停+默认样式

Question

当你将鼠标悬停在绘图带上时,我正试图找到最简单的方法来显示工具提示.事件部分很好,我可以访问鼠标悬停,但我需要找到一种方法来显示与Highcharts的默认外观相同的样式的工具提示.

这是一个简单的例子.我需要文本"在工具提示中悬停显示我"以显示为基于鼠标坐标设置的Highcharts默认设置的工具提示？

我看过文档,找不到任何帮助.

有任何想法吗？

提前致谢.

Answer 1

我根据Gregs答案制作了另一个变体,但是对于情节线而言,因为那是我所需要的.我想它也很容易翻译成plotBands.

此变体也适用于事件,但显示另一个div而不是依赖于特定的隐藏系列.

这个例子可以在JSFiddle找到.

因此,工具提示将添加到与图表相同的容器中

<div id="tooltip" class="thetooltip">
    <p id="tooltiptext" style="margin:0">default</p>
</div>

当用户将鼠标悬停在情节线上时,将触发一个事件,该事件显示工具提示以及附加的工具提示

var $tooltip = $('#tooltip');
$tooltip.hide();
var $text = $('#tooltiptext');
displayTooltip = function (text, left) {
    $text.text(text);
    $tooltip.show();
    $tooltip.css('left', parseInt(left)+24 + 'px');
};
var timer;
hideTooltip = function (e) {
    clearTimeout(timer);
    timer = setTimeout(function () {
        $tooltip.fadeOut();
    }, 5000);
};

然后使用附加选项tooltipText和用于显示上面div的事件定义每个plotline.

plotLines: [{
    tooltipText: 'hello',
    value: Date.UTC(2011, 2, 28, 0, 1, 1),
    color: '#ff6666',
    dashStyle: 'solid',
    width: 3,
    events: {
        mouseover: function (e) {
            displayTooltip(this.options.tooltipText, this.svgElem.d.split(' ')[1]);
        },
        mouseout: hideTooltip
    }
}

tooltipText不是highcharts api的一部分,但是在定义时,它可以通过元素上的options属性获得.

通过模拟css,可以通过highcharts定义工具提示的css类似于默认值:

.thetooltip {
    border: 1px solid #2f7ed8;
    background-color: #fff;
    opacity: 0.8500000000000001;
    padding: 4px 12px;
    border-radius: 3px;
    position: absolute;
    top:100px;
    box-shadow: 1px 1px 3px #666;
}

Answer 2

这是我在JSFiddle中整理的一个解决方案,虽然它有点像黑客.

将以下行添加到mouseover事件:

chart.tooltip.refresh(chart.series[1].points[2]);

这将显示隐藏系列中适当放置点的工具提示.

然后,自定义工具提示格式化程序将返回所需的文本.