如何使用 ajax 调用更新谷歌仪表图表？
Posted
技术标签:
【中文标题】如何使用 ajax 调用更新谷歌仪表图表？【英文标题】：How to update google gauge chart using ajax call? 【发布时间】：2022-01-03 20:21:45 【问题描述】：我不熟悉使用 ajax，尤其是仪表图，所以我不知道问题可能出在哪里。在 gaugechart.php 中，我无法为仪表图创建数组，所以我就是这样做的，我不知道这是否是问题所在。
Uncaught (in promise) ReferenceError: $ is not defined
at drawChart (index3.php:16)
at callback (index3.php:12)
at loader.js:156
at loader.js:120
我的代码能够实时更新仪表图：
<head>
<meta charset="utf8" />
<title>Gauge</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current',
callback: function()
drawChart();
setInterval(drawChart, 10000);
function drawChart()
$.ajax(
url: 'gaugechart.php',
type: 'get',
success: function(json)
var data = new google.visualization.DataTable(json);
var chart = new google.visualization.Gauge(document.getElementById('gauge_div'));
chart.draw(data,
width: 500,
height: 200,
minorTicks: 5
);
,
error: function(jqXHR, textStatus, errorThrown)
console.log(errorThrown + ': ' + textStatus);
);
,
packages: ['gauge']
);
</script>
</head>
<body>
<div id="gauge_div" style="width: 100%; height: 400px;" class="d-flex align-items-center justify-content-center mt-3"></div>
</body>
</html>
gaugechart.php的代码，用于仪表图的动态数据。
<?php
$con = mysqli_connect('localhost', 'root', '', 'adminpanel');
$sql = 'SELECT * FROM tbl_waterquality ORDER BY id DESC';
$result = mysqli_query($con, $sql);
$row = mysqli_fetch_array($result); // assuming ONE result
$temperature = $row["temperature"];
$pH = $row["pH"];
$DO = $row["DO"];
$turbidity = $row["Turbidity"];
echo <<<EOT
[
["Label", "Value"],
["Temperature", $temperature],
["pH", $pH ],
["DO", $DO ],
["Turbidity", $turbidity ]
]
EOT
?>
【问题讨论】：
运行前需要包含JQuery脚本 【参考方案1】：更新的代码，你需要在你的 html 中包含 JQuery
...
<title>Gauge</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
...
【讨论】：
哦，现在错误消失了，但我不知道它不会显示任何东西？ @CorbinJones 可能在您的 PHP 中存在错误，如果您检查浏览器中的元素并发现任何错误或根据您的发现打开一个新问题以上是关于如何使用 ajax 调用更新谷歌仪表图表？的主要内容，如果未能解决你的问题，请参考以下文章