21

我目前正在研究Flot图，该API总体上看起来非常强大，尽管高级使用的示例没有被广泛记录。

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

我想知道是否有人可以提供一些他们遇到的示例，或与此相关的代码，这些示例演示了以下任何示例：

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

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

4

7 回答 7

48

看看这个 flot 示例，它演示了图表上绘图点的工具提示。（确保选中启用工具提示复选框。）

于 2009-01-19T06:19:10.993 回答
11

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

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

于 2012-04-09T07:28:57.577 回答
9

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

于 2010-06-24T16:20:54.723 回答
5

西蒙的答案中的链接很好地提供了一个与浮动工具提示一起使用的钩子。但是，我发现我必须四处挖掘并削减代码才能实现悬停效果。这是结果（基本上来自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;
        }
    });
于 2014-01-02T17:51:15.067 回答
3

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

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

于 2012-10-26T06:26:06.103 回答
1

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

于 2011-05-11T21:21:04.387 回答
1

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

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

于 2012-10-01T10:52:40.503 回答