如何使用 ajax 调用更新谷歌仪表图表？答案

【问题标题】：How to update google gauge chart using ajax call?如何使用 ajax 调用更新谷歌仪表图表？
【发布时间】：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脚本

标签： php mysql json ajax google-visualization

【解决方案1】：

更新的代码，你需要在你的 html 中包含 JQuery

...
<title>Gauge</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
...

【讨论】：

哦，现在错误消失了，但我不知道它不会显示任何东西？
@CorbinJones 可能在您的 PHP 中存在错误，如果您检查浏览器中的元素并发现任何错误或根据您的发现打开一个新问题