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

Question

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

这是一个 quick example .我需要文本“悬停在工具提示中显示我”以根据鼠标坐标显示为与 Highcharts 默认样式相同的工具提示？

我看过 docs找不到任何帮助。

有什么想法吗？

提前致谢。

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 的事件。

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 的一部分，但在定义后可通过元素上的选项属性使用。

工具提示的 css 可以通过 highcharts 简单地模仿 css 来定义类似于默认的 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;
}