jquery – 使用Twitter Bootstrap popover和Highcharts

2019年8月4日 195次阅读

当用户将鼠标悬停在条形图中的条形图上时,我正在尝试使用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', placement:'bottom', title:'Title!', content:'Content'}).click(function() {
                        $('.popover').appendTo($(document.body));
                    });

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

工作示例：JSfiddle

点赞