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 Webサイトから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 に答える