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

Question

我目前正在研究一个Flot图,这个API看起来总体上非常强大,尽管高级使用的例子没有被广泛记录.

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

我想知道是否有人可以提供他们遇到过的一些例子,或代表这个问题的代码,它们展示了以下任何一个例子:

• 通过将鼠标悬停在Flot图表元素上的事件触发的动态工具提示
• 勾选工具提示(悬停在xaxis上显示详细信息)
• 任何类型的悬停在/动态事件绑定已使用w Flot

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

Answer 1

看看这个flot示例,它演示了图表上绘图点的工具提示.(确保选中" 启用工具提示"复选框.)

Answer 2

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

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

Answer 3

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

Answer 4

西蒙回答中的链接非常有效，提供了一个与浮动工具提示一起使用的钩子。但是，我发现我必须四处挖掘并削减代码才能实现悬停效果。这是结果（基本上是来自http://people.iola.dk/olau/flot/examples/interacting.html 的逐字记录）。

在浮点初始化中需要更改的唯一设置是在选项对象中。它需要将此作为选项之一包括在内：

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

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

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

这是绑定，当用作浮动占位符的元素可用时，它应该只被调用一次。它连接事件处理程序。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;
        }
    });