4

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

我遇到的问题是访问各个rectDOM 元素以添加必要的属性，例如rel="popover"和data-content="foo"这将使这项工作。

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

我将不胜感激任何建议。

谢谢！

4

1 回答 1

2

你需要做两件事：

  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

于 2013-01-03T02:26:59.393 回答