Question

当用户将鼠标悬停在条形图中的栏上时，我正尝试使用 Highcharts 实施 Twitter Bootstrap popover 组件。我无法使用Highcharts原生的现有工具提示，因为我希望我的用户与popover中的内容进行交互，而这些内容无法通过Highcharts工具提示有效地进行，例如单击链接。

我遇到的问题是访问各个rect DOM元素，以添加必要的属性，例如rel="popover"和data-content="foo"，这些属性可以使其发挥作用。

我有一个JSFiddle，其中我有悬停在事件上的伪代码。

我非常感谢任何建议。

谢谢！

Answer 1

你需要做两件事：

在加载图表后附加popover

确保弹出窗口未附加到SVG

中

    chart: {
        renderTo: 'container',
        type: 'bar',
        events: {
            load: function(e) {
                $(".highcharts-tracker rect").popover({trigger:'hover', placement:'bottom', title:'Title!', content:'Content'}).hover(function() {
                    $('.popover').appendTo($(document.body));
                });
            }
        }
    },

如果您希望它在点击时触发，则只需将其更改为：

                    $(".highcharts-tracker rect").popover({trigger:'click', placement:'bottom', title:'Title!', content:'Content'}).click(function() {
                        $('.popover').appendTo($(document.body));
                    });

您必须进一步修改此代码以满足您的需求，但这应该可以帮助您开始。

工作示例：JSfiddle

使用Twitter Bootstrap popover和Highcharts

1 个答案: