有浮动工具提示的Flot的例子吗?

看一看 this flot example 它演示了图表上绘图点的工具提示。(确保选择 启用工具提示 复选框。)

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

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

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

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;
        }
    });

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

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

http://craigsworks.com/projects/qtip2/demos/#flot 是我最喜欢的JS工具提示库。它非常棒,并且具有flot集成。

您可以将自定义数据添加到数据阵列中,并使用该数据显示工具提示。

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