如何在高图中添加第二个工具提示

How to add a second tooltip to highcharts

本文关键字：第二个 工具提示 添加 高图中      更新时间：2023-09-26

我想添加一个外部弹出窗口highcharts。我目前正在使用web弹出窗口

所以标准highcharts弹出窗口显示标准数据，然而，我想使用web弹出窗口显示一些数据来解释一个特定的列，这可以从数据库中获取。

数据等的实际抓取是好的，但我不知道如何显示一个列的特定弹出窗口

web弹出窗口的工作方式是它需要一些HTML标识符来知道在哪里显示弹出窗口:

$(#identifier).webuiPopover({"content"})

我找不到任何标识符来将弹出窗口链接到每个列:

<g class="highcharts-series highcharts-tracker" visibility="visible" zIndex="0.1" transform="translate(55,48) scale(1 1)" style="" clip-path="url(#highcharts-3)">
    <rect x="63.5" y="33.5" width="119" height="162" stroke="#FFFFFF" fill="rgb(124, 181, 236)" rx="0" ry="0" stroke-width="1" data-target="webuiPopover0"></rect>
    <rect x="309.5" y="98.5" width="119" height="97" stroke="#FFFFFF" fill="rgb(124, 181, 236)" rx="0" ry="0" stroke-width="1"></rect>
    <rect x="555.5" y="65.5" width="119" height="130" stroke="#FFFFFF" fill="rgb(124, 181, 236)" rx="0" ry="0" stroke-width="1"></rect>
</g>

所以我想为每个列(rect)显示一个弹出窗口，但我真的不知道怎么做。我试过:

var thePoint = "rect[x='" + 63.5 + "'][y='" + 33.5 + "']"; 
$(thePoint).webuiPopover(...)

这在某种程度上有效，但显然我已经硬编码了63,5和33,5。我已经尝试了所有方法来动态获取x和y值，但我永远无法获得那些确切的数字。

还有其他建议吗?也许有人能解释一下内置弹出窗口是如何获得位置的?

这里有一个可点击点的演示:http://www.highcharts.com/demo/line-ajax

使用Highslide

如果您想使用WebUI Popover，那么您可以找到列的矩形并添加弹出框。例如:http://jsfiddle.net/j57me5w1/

看起来像弹出窗口将从左上角开始。

$(function () {
    $('#container').highcharts({
        series: [{
            type: 'column',
            data: [1, 2, 3, 4, 5, 6, 7]
        }]
    });
    var columns = $('.highcharts-tracker > rect');
    $.each(columns, function (i, c) {
        $(c).webuiPopover({
            title: 'test',
            content: '<div id="popup">popup content</div>',
            closeable: true,
            arrow: true,
            placement: 'auto'
        });
    });
});
相关文章：