将鼠标悬停在flot中的某个点上时显示自定义工具提示

Question

从这里的例子中,我知道如何创建一个显示悬停时工具提示的Flot图.但这些示例仅显示如何显示包含x值,y值,标签等的工具提示,我无法弄清楚如何创建更多自定义工具提示.

有没有我可以附加自定义数据的地方,我可以在创建工具提示时访问？

例如,为了简化,让我们假设我的代码如下:

var d = [ { label: "Fake!", data: [ [1290802154, 0.3], [1292502155, 0.1] ] } ];
var options = {
    xaxis: { mode: "time" },
    series: {
    lines: { show: true },
        points: { show: true }
    },
    grid: { hoverable: true, clickable: true }
};
$.plot($("#placeholder"), d, options);

现在,当点击第一个数据点时,我希望工具提示显示"Hello",当点击第二个数据点时,我想显示"Bye".我该怎么做呢？绑定plothover事件时

$(".placeholder").bind("plothover", function (event, pos, item) { /* etc. */ };

我不确定"item"是指什么,以及如何将数据附加到它.

Answer 1

只需将数据添加到数据数组中即可将数据添加到系列中.

代替

$.plot(element, [[1, 2], [2, 4]] ...)

您可以

$.plot(element, [[1, 2, "label"], [2, 4, "another label"]] ...)

然后使用该信息显示自定义标签.

请参阅此小提琴以获取完整示例:http: //jsfiddle.net/UtcBK/328/

Answer 2

这是一个粗略的 JSFiddle示例,我掀起了.不知道它是否正常运行,但可能引发一个想法......

[更新]

你会想要绑定到

$("#placeholder").bind("plotclick", function (event, pos, item) {/* code */});

单击事件的事件

[update2] 更新了示例

我已经调整了示例以使用您的测试数据并使用上述内容进行更多操作.至于item对象,它似乎是动态生成的,所以从我所知道的,你无法向它添加额外的数据.但是,您可以创建一个数组来item在单击时缓存对象,并向其添加其他数据并将其用于hover事件.

这个新的例子就是这样,它显示了没有点击任何内容时的正常工具提示.但是一旦点击它确定点击的点是第一个还是第二个,并为被item调用的对象添加一个附加属性alternateText并将其存储在一个名为的数组中itemsClicked.

现在,当一个点悬停在它上面时,它会item根据当前item对象的相同索引(通过获取)检查数组中是否存在缓存对象item.dataIndex.如果缓存数组中有匹配的索引,itemsClicked它将item从中获取对象并使用之前事件alternateText期间添加的属性click.

第一个点的item对象看起来像这样:

item : {
    dataIndex: 0,
    datapoint: [
        1290802154,
        0.3
    ],
    pageX: 38,
    pageY: 82,
    series: {/* properties of the series that this point is in */},
    seriesIndex: 0
}

点击后,它将如下所示并存储在itemsClicked数组中:

item : {
    alternateText: 'hello',
    dataIndex: 0,
    datapoint: [
        1290802154,
        0.3
    ],
    pageX: 38,
    pageY: 82,
    series: {/* properties of the series that this point is in */},
    seriesIndex: 0
}

如果有任何问题有帮助,请告诉我,如果不是,我会闭嘴并停止更新我的答案:P