当用户将鼠标悬停在条形图中的条形上时,我尝试使用 Highcharts 实现 Twitter Bootstrap popover 组件。我无法使用 Highcharts 原生的现有工具提示,因为我希望我的用户与弹出窗口内的内容进行交互,而您无法使用 Highcharts 工具提示有效地执行此操作,例如单击链接。
我遇到的问题是访问各个 rect
DOM 元素以添加必要的属性,例如 rel="popover"
和 data-content="foo”
这将使这项工作成功。
我有一个JSFiddle我有悬停事件的伪代码。
如果有任何建议,我将不胜感激。
谢谢!
最佳答案
你需要做两件事:
- 加载图表后附加弹出框
确保弹出框未附加到 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
关于jquery - 将 Twitter Bootstrap 弹出窗口与 Highcharts 结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14131945/