javascript - jQuery + PHP HighChart 未正确更新

Question

希望有人能提供帮助。我有一个 jQuery 图表(使用 HighCharts)，我使用 PHP 来填充数据，我最初提取了 30 条记录，效果很好。然后我希望每秒添加最新记录，因此我设置了 setInterval 选项。虽然这似乎有效，但没有添加最新记录，加载图表时的最后一条记录每秒都会添加，这让我相信 PHP 没有“刷新”。

这可能是显而易见的事情，我可能花了太多时间看它，但完全没有捕获要点。

<script>

$('#graph-visual').highcharts({
    chart : {
        backgroundColor: "#FFFFF0",
        type: 'line',

        events : {
            load : function () {

                // set up the updating of the chart each second
                var series = this.series[0];

                setInterval(function () {


                    <?php

                        // Get Last entry only

                        include "db-conn.php";

                        $query =  "SELECT * FROM `cl50-iotdb`.`temperature_values` ";
                        $query .= "WHERE time_added IN (select max(time_added) from temperature_values GROUP BY entry_id)";
                        $query .= " ORDER BY time_added DESC LIMIT 1;";

                        $select_latest_temperature = mysqli_query($connection, $query);


                        if(!$select_latest_temperature)
                        {
                            echo "DB Connection Error";
                            die();
                        }


                        // Clear Var to ensure fresh data
                        unset($latest_temp);

                        while($row = mysqli_fetch_assoc($select_latest_temperature))
                        {
                            $latest_temp = $row['temperature'];
                        } 

                    ?>

                    series.addPoint([<?php echo $latest_temp?>]);
                }, 1000);
            }
        }
    },

    title : {
        text : 'Latest Temperature Readings'
    },

    yAxis: {
        title: {
           text: 'Temperature (°C)'
        }
    },

    exporting: {
        enabled: false
    },

    series : [{
        name : 'Arduino Data',
        data : (function () {


                <?php

                // Get last 30 entries

                include "db-conn.php";

                $query =  "SELECT temperature, time_added FROM `cl50-iotdb`.`temperature_values` ";
                $query .= "WHERE time_added IN (select max(time_added) from temperature_values GROUP BY entry_id)";
                $query .= " ORDER BY time_added DESC LIMIT 30;";

                $select_temperature = mysqli_query($connection, $query);

                if(!$select_temperature)
                {
                    echo "DB Connection Error";
                    die();
                }

                // Clear Arrays to ensure fresh data
                unset($temperatureArray);

                while($row = mysqli_fetch_array($select_temperature))
                {
                    $temperatureArray[] = $row['temperature'];
                } 

                ?>

                var data = [
                            <?php 
                                foreach (array_reverse($temperatureArray) as $temp)
                                {
                                    echo $temp . ", "; 
                                } 
                            ?>
                           ]

            return data;

        }())
    }]



});

</script>

提前致谢!

Answer 1

好的，正如 Larry 在评论中建议的，解决方案是使用 AJAX。为了供将来引用，为了使其正常工作，我更改了以下内容:

图表元素已更改为使用调用 PHP 的 AJAX，

chart : {
        backgroundColor: "#FFFFF0",
        type: 'line',

        events : {
            load : function () {

                // set up the updating of the chart each second
                var series = this.series[0];

                setInterval(function () 
                    {
                        $.ajax(
                            {  
                            type: "GET",
                            url: 'includes/get-latest-temp-graph.php',
                            success: function(NewTemp) 
                            {
                                series.addPoint([NewTemp],true, true);
                            },
                            cache: false
                        });
                    }, 2000);
            }
        }
    },

并且最初位于图表元素中的 PHP 已移至其自己的文件中，

<?php

// Set the JSON header
header("Content-type: text/json");

// Get Last entry only

include "db-conn.php";

$query =  "SELECT * FROM `cl50-iotdb`.`temperature_values` ";
$query .= "WHERE time_added IN (select max(time_added) from temperature_values GROUP BY entry_id)";
$query .= " ORDER BY time_added DESC LIMIT 1;";

$select_latest_temperature = mysqli_query($connection, $query);


if(!$select_latest_temperature)
{
    echo "DB Connection Error";
    die();
}


// Clear Var to ensure fresh data
unset($latest_temp);

while($row = mysqli_fetch_assoc($select_latest_temperature))
{
    $latest_temp = $row['temperature'];
} 

echo $latest_temp;
?>

上述两项更改解决了问题，现在它会根据数据库中的新数据每两秒自动更新一次。太棒了!