Question

我想在highcharts中添加一个外部popover。我目前正在使用WebUI Popover

因此标准的highcharts popover显示标准数据，但是，我想使用WebUI Popover显示一些数据来解释特定的列，可以从DB中获取。

实际获取数据等很好，但我无法弄清楚如何显示列的特定弹出窗口

WebUI Popover的工作方式是它需要一些HTML标识符来知道弹出窗口的显示位置：

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

我无法找到用于将popover链接到每列的任何标识符：

<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>

所以我想为每个coloumn（rect）显示一个popover，但我真的不知道如何。我试过了：

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

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

还有其他建议吗？也许如果有人能够解释内置的popover如何获得这个位置？

Answer 1

有点击点的演示：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'
        });
    });
});

如何向highcharts添加第二个工具提示

1 个答案: