上一篇: jquery – jsquery可排序,带有内... 下一篇:jquery – 无限滚动保罗爱尔兰不...

jquery – 使用Twitter Bootstrap popover和Highcharts

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – 使用Twitter Bootstrap popover和Highcharts，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

我遇到的问题是访问各个rect DOM元素以添加必要的属性,例如rel =“popover”和data-content =“foo”,这将使这项工作成功.

我有一个 JSFiddle,我有悬停在事件上的伪代码.

我非常感谢任何建议.

谢谢！

解决方法

你需要做两件事：

>加载图表后附加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',content:'Content'}).click(function() {
                        $('.popover').appendTo($(document.body));
                    });

您将不得不进一步修改此代码以满足您的需求,但这应该可以帮助您开始.

工作示例：JSfiddle