Javascript jQuery+；PHP HighChart未正确更新
希望有人能帮忙。我有一个jQuery图表（使用HighCharts），我使用PHP来填充数据，我最初提取了30条记录，效果很好。然后我希望每秒添加最新的记录，因此我设置了setInterval选项。虽然这似乎有效，但最新的记录没有添加，加载图表时的最后一条记录每秒添加一次，这让我相信PHP没有“刷新” 这可能是显而易见的，我可能花了太多时间来研究它，我完全没有抓住要点Javascript jQuery+；PHP HighChart未正确更新,javascript,php,jquery,highcharts,Javascript,Php,Jquery,Highcharts,希望有人能帮忙。我有一个jQuery图表（使用HighCharts），我使用PHP来填充数据，我最初提取了30条记录，效果很好。然后我希望每秒添加最新的记录，因此我设置了setInterval选项。虽然这似乎有效，但最新的记录没有添加，加载图表时的最后一条记录每秒添加一次，这让我相信PHP没有“刷新” 这可能是显而易见的，我可能花了太多时间来研究它，我完全没有抓住要点 <script> $('#graph-visual').highcharts({ chart : {
<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>
$（“#图形可视”）。高图({
图表：{
背景颜色：#FFFFF 0“，
键入：“行”，
活动：{
加载：函数（）{
//设置图表的每秒更新
var系列=本系列[0]；
setInterval（函数（）{
系列。添加点（[]）；
}, 1000);
}
}
},
标题：{
文字：“最新温度读数”
},
亚克斯：{
标题：{
文字：“温度（°C）”
}
},
出口：{
已启用：false
},
系列：[{
名称：“Arduino数据”，
数据：（函数（）{
风险值数据=[
]
返回数据；
}())
}]
});
提前谢谢 好的，正如拉里在评论中建议的那样，解决方案是使用AJAX。为了便于将来参考，为了使其正常工作，我更改了以下内容： 图表元素更改为使用AJAX，称为PHP
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
// 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;
?>
上述两个更改修复了该问题，现在它会根据数据库中的新数据每两秒钟自动更新一次。好极了 我对您的代码进行了一些重新安排，使图表的所有呈现成为ajax调用的结果，并从JavaScript代码中删除php。答案中的代码非常有效。如果你想要一个更独立的关注点的方法，那么试试我的解决方案 index.php文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>High Charts with Database</title>
</head>
<body>
<!--high charts data-->
<div id="graph-visual"></div>
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="js/services/tempchart.js"></script>
</body>
</html>
带数据库的高级图表
（函数（$）{
//呼叫临时服务
临时服务（）；
函数TempService（）{//开始临时服务
$.ajax(
{
键入：“获取”，
url:'services/firsttemps.php'，
成功：功能（数据）
{
//将返回的数据拆分为字符串数组
var firstTemps=data.split（“，”）；
//将firsttemp转换为数字
对于（变量i=0；i <?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'];
}
//echo data for the ajax call
echo implode(",",$temperatureArray);
?>
<?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;
?>
<?php
//replace with the appropriate values if necessary
$connection = new mysqli("localhost", "user", "password", "cl50-iotdb");
//catch errors
if ($connection->connect_errno) {
echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
}
客户端JavaScript不会显示服务器端PHP中发生的事情。因此，您将无法使用set interval调用PHP代码。您必须使用设置的时间间隔来调用ajax函数，以导航到将返回数据的php文件。然后您可以将ajax回调中返回的数据输出到屏幕上。@LarryLane谢谢，这很有意义。你能举个例子吗
<?php
//replace with the appropriate values if necessary
$connection = new mysqli("localhost", "user", "password", "cl50-iotdb");
//catch errors
if ($connection->connect_errno) {
echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
}