1

我有以下代码使用 Flot 显示图表。我想让鼠标悬停以显示带有天数/配额值的工具提示

<?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>

我还从文件头部的 flot 网站调用 jquery。我只是在将整个代码复制到这里时遇到问题。再次感谢您的帮助！

4

3 回答 3

3

您需要为工具提示（跨度或 div）创建一个元素，然后将 plothover 绑定到它。我在我自己的网站上使用了他们网站上的示例“与数据点交互”。

下面的代码使用 showTooltip 函数创建工具提示 div，通过调用 .bind("plothover") 触发。这使悬停能够触发工具提示并使用相关数据项填充它。

这是我为完整工作版本修改的代码。只要确保你的数据库字符串在 "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>
于 2013-05-15T00:31:46.960 回答
0

由于以下代码，我很确定其他图形不会绘制：

        while($row3 = mysql_fetch_assoc($result3))
    {
        $quota3 = $row3['TDC'];
        $points3 = "[{$row3['Dia']}, {$tdc}], ";
    }
    $points3 = rtrim($points, ", ");

我将变量更改为 $name3... DB 中的 TDC 值示例如下：4.504.801,65 可以是逗号/点吗？

谢谢！

于 2013-05-17T11:31:36.963 回答
0 
       <?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);
            }
        });
于 2013-05-20T14:41:41.787 回答