Question

我目前正在开发一个Flot图表，API这个图表看起来非常强大，尽管高级用途的示例并未被广泛记录。

API建议有一些方法可以在图表上设置hoverable，而不是我确定这究竟意味着我可以用它做什么。

我想知道是否有人可以提供他们遇到过的一些示例，或者代码，这些示例代表以下任何一个示例：

将鼠标悬停在“统计图表元素”上的事件中触发的动态工具提示
勾选工具提示（将鼠标悬停在x轴上显示详细信息）
任何类型的悬停在/动态事件绑定已使用w Flot

我正在寻找的效果类似于this Open Flash Chart示例

Answer 1

查看this flot example，其中演示了图表上绘图点的工具提示。（确保选中启用工具提示复选框。）

Answer 2

还有一个简单的工具提示插件，您可以找到它here

我还在插件中添加了一些功能，你可以在github上找到它。 https://github.com/skeleton9/flot.tooltip

Answer 3

http://data.worldbank.org是使用Flot构建的，并使用工具提示。

Answer 4

Simon的回答中的链接很好地提供了一个与浮动工具提示一起使用的钩子。但是，我发现我必须挖掘并削减代码才能完成悬停效果。结果如下（基本上是http://people.iola.dk/olau/flot/examples/interacting.html的逐字）。

flot初始化中需要更改的唯一设置是options对象。它需要将其作为选项之一：

var options = {
 //... : {},
 grid: { hoverable: true }
};

此函数在调用时构造并显示工具提示元素。参数x和y是flot内部的偏移量，因此工具提示位置正确。内容是工具提示中显示的内容

function showTooltip(x, y, contents) {
        $('<div id="tooltip">' + contents + '</div>').css({
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5,
            border: '1px solid #fdd',
            padding: '2px',
            'background-color': '#fee'
        }).appendTo("body").fadeIn(200);
    }

这是绑定，只有在用作flot的占位符的元素可用时才应调用它。它连接事件处理程序。 previousPoint用作显示工具提示的标志

    var previousPoint = null;
    $("#flotPlaceHolder").bind("plothover", function (event, pos, item) {
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $("#tooltip").remove();
                var x = item.datapoint[0].toFixed(0),
                    y = item.datapoint[1].toFixed(0);

                showTooltip(item.pageX, item.pageY, "(" + x + "," + y + ")");
            }
        }
        else {
            $("#tooltip").remove();
            previousPoint = null;
        }
    });

Answer 5

查看此库以获取工具提示和flot集成

https://github.com/krzysu/flot.tooltip

Answer 6

http://craigsworks.com/projects/qtip2/demos/#flot是我最喜欢的JS工具提示库。它非常糟糕，并且有整合。

Answer 7

您可以将自定义数据添加到数据阵列，并使用它来显示工具提示。

请在此处查看我的答案和完整示例： displaying custom tooltip when hovering over a point in flot

有浮动工具提示的Flot的任何示例？

7 个答案: