jquery - 将 Twitter Bootstrap 弹出窗口与 Highcharts 结合使用

Question

当用户将鼠标悬停在条形图中的条形上时，我尝试使用 Highcharts 实现 Twitter Bootstrap popover 组件。我无法使用 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