懸停時的Flot工具提示

Question

我有以下代碼顯示使用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。 我只是在復制整個代碼到這里有問題。 再次感謝您的幫助！

Answer 1

您需要為工具提示創建一個元素（span或div），然后將plothover綁定到該元素。 我在自己的網站上的他們的網站“與數據點交互”中使用了該示例。

下面的代碼使用showTooltip函數創建工具提示div，該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>

Answer 2

我很確定由於以下代碼，其他圖形不會繪制：

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

我將變量更改為$ name3 ...數據庫中TDC值的示例如下：4.504.801,65可能是逗號/點嗎？

謝謝！

Answer 3

       <?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);
            }
        });

懸停時的Flot工具提示

問題描述

3 個解決方案

解決方案1
2 已采納 2013-05-15 00:31:46

解決方案2
0 2013-05-17 11:31:36

解決方案3
0 2013-05-20 14:41:41

懸停時的Flot工具提示

問題描述

3 個解決方案

解決方案1 2 已采納 2013-05-15 00:31:46

解決方案2 0 2013-05-17 11:31:36

解決方案3 0 2013-05-20 14:41:41

解決方案1
2 已采納 2013-05-15 00:31:46

解決方案2
0 2013-05-17 11:31:36

解決方案3
0 2013-05-20 14:41:41