Javascript 将鼠标悬停在浮动点上时显示自定义工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4349823/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
displaying custom tooltip when hovering over a point in flot
提问by grautur
From the example here, I kind of know how to create a Flot graph that shows tooltips when hovering. But the examples only show to how to display tooltips containing the x value, y value, label, etc., and I can't figure out how to create more customized tooltips.
从这里的示例中，我知道如何创建一个在悬停时显示工具提示的 Flot 图。但是示例只展示了如何显示包含 x 值、y 值、标签等的工具提示，我无法弄清楚如何创建更多自定义工具提示。
Is there someplace I can attach custom data, that I can access when creating the tooltip?
是否有可以附加自定义数据的地方，我可以在创建工具提示时访问这些数据？
For example, to simplify, let's suppose my code looks like:
例如，为了简化，假设我的代码如下所示：
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);
Now, when clicking on the first datapoint, I want the tooltip to show "Hello", and when clicking on the second datapoint I want to show "Bye". How do I do this? When binding the plothover event
现在，当单击第一个数据点时，我希望工具提示显示“Hello”，而当单击第二个数据点时，我希望显示“Bye”。我该怎么做呢？绑定 plothover 事件时
$(".placeholder").bind("plothover", function (event, pos, item) { /* etc. */ };
I'm not sure what "item" refers to, and how to attach data to it.
我不确定“项目”指的是什么，以及如何将数据附加到它。
采纳答案by subhaze
Here is a rough JSFiddle examplethat I whipped up. Not sure if it's functioning exactly how you like but might spark an idea...
这是我提出的一个粗略的 JSFiddle 示例。不确定它是否完全按照您的喜好运行，但可能会激发一个想法......
[update]
[更新]
you'll want to bind to the
你会想要绑定到
$("#placeholder").bind("plotclick", function (event, pos, item) {/* code */});
event for clicking events
单击事件的事件
[update2]Updated Example
[update2]更新示例
I've adjusted the example to use your test data and to work more with what you have described above. As for the itemobject it seems that it is generated on the fly so, from what I can tell, you can not add additional data to it. However, you can create an array to cache the itemobjects when clicked and add additional data to them and use them for the hoverevent.
我已经调整了示例以使用您的测试数据并更多地使用您上面描述的内容。至于item对象，它似乎是动态生成的，因此，据我所知，您无法向其添加其他数据。但是，您可以创建一个数组来item在单击时缓存对象并向它们添加其他数据并将它们用于hover事件。
This new example does just that, it shows the normal tooltip when nothing is clicked. but once clicked it determines if the point clicked was the first or second and adds an addition property to the itemobject called alternateTextand stores it in an array called itemsClicked.
这个新示例就是这样做的，它在没有点击任何东西时显示正常的工具提示。但是一旦点击，它会确定点击的点是第一个还是第二个，并向被item调用的对象添加一个附加属性alternateText并将其存储在一个名为itemsClicked.
Now when a point is hovered over it checks to see if there is a cached itemobject within the array based on the same index of the current itemobject, which is obtained via item.dataIndex. If there is a matching index in the cache array itemsClickedit will grab the itemobject from it and use the alternateTextproperty that was added during the clickevent earlier.
现在，当一个点悬停在它上面时，它会item根据当前item对象的相同索引（通过item.dataIndex. 如果缓存数组中有匹配的索引，itemsClicked它将item从中获取对象并使用之前alternateText在click事件期间添加的属性。
The first point's itemobject would look something like this:
第一个点的item对象看起来像这样：
item : {
dataIndex: 0,
datapoint: [
1290802154,
0.3
],
pageX: 38,
pageY: 82,
series: {/* properties of the series that this point is in */},
seriesIndex: 0
}
Once clicked it would then look like this and be stored in the itemsClickedarray:
单击后，它将看起来像这样并存储在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
}
Please let me know if any of this is helpful or not, if not I'll shut up and stop updating my answer :P
请让我知道这些是否有帮助，如果没有，我会闭嘴并停止更新我的答案：P
回答by Lasse Skindstad Ebert
You can add data to the series simply by adding it to the data array.
您只需将数据添加到数据数组中即可将数据添加到系列中。
Instead of
代替
$.plot(element, [[1, 2], [2, 4]] ...)
You can
你可以
$.plot(element, [[1, 2, "label"], [2, 4, "another label"]] ...)
And then use that information to show a custom label.
然后使用该信息显示自定义标签。
See this fiddle for a full example: http://jsfiddle.net/UtcBK/328/
有关完整示例，请参阅此小提琴：http: //jsfiddle.net/UtcBK/328/
回答by Amol M Kulkarni
Also you can try following code:
您也可以尝试以下代码：
HTML body:
HTML 正文：
<div id="content">
<div class="demo-container">
<div id="placeholder" class="demo-placeholder"></div>
</div>
</div>
Script:
脚本：
<script type="text/javascript">
function showTooltip(x, y, contents, z) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y - 30,
left: x - 110,
'font-weight':'bold',
border: '1px solid rgb(255, 221, 221)',
padding: '2px',
'background-color': z,
opacity: '0.8'
}).appendTo("body").show();
};
$(document).ready(
$(function () {
var data = [{
"label": "scott",
"data": [[1317427200000 - 5000000 * 3, "17017"], [1317513600000 - 5000000 * 5, "77260"]]
},
{
"label": "martin",
"data": [[1317427200000 - 5000000 * 2, "96113"], [1317513600000 - 5000000 * 4, "33407"]]
},
{
"label": "solonio",
"data": [[1317427200000 - 5000000, "13041"], [1317513600000 - 5000000 * 3, "82943"]]
},
{
"label": "swarowsky",
"data": [[1317427200000, "83479"], [1317513600000 - 5000000 * 2, "96357"], [1317600000000 - 5000000, "55431"]]
},
{
"label": "elvis",
"data": [[1317427200000 + 5000000, "40114"], [1317513600000 - 5000000 * 1, "47065"]]
},
{
"label": "alan",
"data": [[1317427200000 + 5000000 * 2, "82504"], [1317513600000, "46577"]]
},
{
"label": "tony",
"data": [[1317513600000 + 5000000, "88967"]]
},
{
"label": "bill",
"data": [[1317513600000 + 5000000 * 2, "60187"], [1317600000000, "39090"]]
},
{
"label": "tim",
"data": [[1317513600000 + 5000000 * 3, "95382"], [1317600000000 + 5000000, "89699"]]
},
{
"label": "britney",
"data": [[1317513600000 + 5000000 * 4, "76772"]]
},
{
"label": "logan",
"data": [[1317513600000 + 5000000 * 5, "88674"]]
}];
var options = {
series: {
bars: {
show: true,
barWidth: 60 * 60 * 1000,
align: 'center'
}
},
points: {
show: true
},
lines: {
show: true
},
grid: { hoverable: true, clickable: true },
yaxes: {
min: 0
},
xaxis: {
mode: 'time',
timeformat: "%b %d",
minTickSize: [1, "month"],
tickSize: [1, "day"],
autoscaleMargin: .10
}
};
$(function () {
$.plot($('#placeholder'), data, options);
});
$(function () {
var previousPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint != item.datapoint) {
previousPoint = item.datapoint;
$("#tooltip").remove();
var x = item.datapoint[0],
y = item.datapoint[1] - item.datapoint[2];
debugger;
showTooltip(item.pageX, item.pageY, y + " " + item.series.label, item.series.color);
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
})
});
})
);
</script>
