悬停时的Flot工具提示
[英]Flot tooltip on hover
问题描述
I have the following code showing the graph using Flot. 
我有以下代码显示使用Flot的图形。 I want to get the mouse hover to show a tooltip with the values of days/quota 我想让鼠标悬停以显示带有天/配额值的工具提示
<?php
include("connect.php");
$FundName=$_POST["FundName"];
$mes=$_POST["mes"];
$cnpj=$_POST["cnpj"];
?>
<?php
$query = "SELECT Dia, Quota FROM CDVM WHERE Competence='$mes' AND FundName='$FundName' AND Quota > 0";
$result = mysql_query($query);
?>
<?php
$points = "";
while($row = mysql_fetch_assoc($result))
{
$quota = str_replace(',', '.', $row['Quota']);
$points .= "[{$row['Dia']}, {$quota}], ";
}
$points = rtrim($points, ", ");
?>
<div id="placeholder" style="width:500px;height:200px"></div>
<script type="text/javascript">
$(function() {
$.plot("#placeholder", [[ <?php echo $points ?> ],
{
series: {
lines: {
show: true
},
points: {
show: true
}
},
grid: {
hoverable: true,
clickable: true
}
});
$("#placeholder").bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
showTooltip(item.pageX, item.pageY,
"Dia=" + x + ", Quota=" + y);
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
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",
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
});
</script>
I alo have call the jquery from flot website in the head of the file. 我还从文件头中的flot网站调用了jquery。 I just have problems copying the whole code on to here. 我只是在复制整个代码到这里有问题。 Thanks again for the help! 再次感谢您的帮助！
3 个解决方案
解决方案1
2 已采纳 2013-05-15 00:31:46
You need to create an element for the tooltip (a span or div), and then bind plothover to it. 您需要为工具提示创建一个元素（span或div），然后将plothover绑定到该元素。 I used the example on their website "Interacting with the data points" on my own website. 我在自己的网站上的他们的网站“与数据点交互”中使用了该示例。
The below code uses the showTooltip function to create the tooltip div, triggered with the call to .bind("plothover"). 下面的代码使用showTooltip函数创建工具提示div，该div是通过调用.bind（“ plothover”）触发的。 This enables hovering to trigger the tooltip and populate it with the relevant data item. 这使悬停能够触发工具提示并使用相关数据项填充它。
Here's my code modified for a complete working version. 这是为完整的工作版本修改的代码。 Just make sure your database string is in there before "while($row = mysql_fetch_assoc($result))" 只要确保您的数据库字符串在“ while（$ row = mysql_fetch_assoc（$ result））”之前就可以了
<html>
<head>
<script language="javascript" type="text/javascript" src="http://www.flotcharts.org/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
</head>
<body>
<?php
$points = "";
while($row = mysql_fetch_assoc($result))
{
$quota = str_replace(',', '.', $row['Quota']);
$points .= "[{$row['Dia']}, {$quota}], ";
}
$points = rtrim($points, ", ");
?>
<div id="placeholder" style="width:500px;height:200px"></div>
<script type="text/javascript">
$(function() {
$.plot("#placeholder", [[ <?php echo $points ?> ]],
{
series: {
lines: {
show: true
},
points: {
show: true
}
},
grid: {
hoverable: true,
clickable: true
}
});
$("#placeholder").bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
showTooltip(item.pageX, item.pageY,
"Dia=" + x + ", Quota=" + y);
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
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",
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
});
</script>
</body>
</html>
解决方案2
0 2013-05-17 11:31:36
I'm pretty sure that the other graphics don't draw because of the following code: 我很确定由于以下代码，其他图形不会绘制：
while($row3 = mysql_fetch_assoc($result3))
{
$quota3 = $row3['TDC'];
$points3 = "[{$row3['Dia']}, {$tdc}], ";
}
$points3 = rtrim($points, ", ");
I changed the variables to $name3... An example of a TDC value in the DB is as follows:4.504.801,65 Could it be with comma/dot? 我将变量更改为$ name3 ...数据库中TDC值的示例如下：4.504.801,65可能是逗号/点吗？
Thank you! 谢谢！
解决方案3
0 2013-05-20 14:41:41
<?php
$points3 = "";
while($row3 = mysql_fetch_assoc($result3))
{
$tdc3 = str_replace('.', ',', $row3['TDC']);
$points3 .= "[{$row3['Dia']}, {$tdc3}], ";
}
$points3 = rtrim($points3, ". ");
echo $points3;
?>
<div id="placeholder3" style="width:500px;height:200px"></div>
<script type="text/javascript">
$(function() {
$.plot("#placeholder3", [[ <?php echo $points3 ?> ]],
{
series: {
lines: {
show: true
},
points: {
show: true
}
},
grid: {
hoverable: true,
clickable: true
}
});
$("#placeholder3").bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip3").remove();
var x = item.datapoint[0].toFixed(2);
var y = item.datapoint[1].toFixed(4);
showTooltip(item.pageX, item.pageY,
"Dia=" + x + ", TDC=" + y);
}
} else {
$("#tooltip3").remove();
previousPoint = null;
}
});
function showTooltip(x, y, contents) {
$("<div id='tooltip3'>" + contents + "</div>").css({
position: "absolute",
display: "none",
top: y + 5,
left: x + 5,
border: "1px solid #fdd",
padding: "2px",
"background-color": "#fee",
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.