将 Twitter Bootstrap 弹出框与 Highcharts 一起使用

Question

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

我遇到的问题是访问单独的 rect DOM 元素以添加必要的属性，例如 rel="popover" 和 data-content="foo"，这将使这项工作发挥作用。

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

如果有任何建议，我将不胜感激。

谢谢！

Answer 1

你需要做两件事：

1. 加载图表后附加弹出框

2. 确保弹出框没有附加到 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