沒有這個 xmlhttprequest，儀表圖作業正常，顯示如下
但是在我在 index.php 中添加這段代碼后，圖表突然停止顯示，這在出現問題時發生（即使沒有檢測到錯誤）但我無法找到......
Index.php 用于自動更新/重繪 儀表圖資料間隔的代碼，無需重新加載頁面。
<?php
include("connection.php");
?>
<html>
<head>
<title>
</title>
</head>
<body>
<div class="container">
<div id="link_wrapper">
</div>
</div>
</body>
</html>
<script>
function loadXMLDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("link_wrapper").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "server.php", true);
xhttp.send();
}
setInterval(function(){
loadXMLDoc();
// 1sec
},1000);
window.onload = loadXMLDoc;
</script>
Server.php 動態儀表圖代碼
<?php
$connection = mysqli_connect('localhost', 'root', '', 'adminpanel');
$query = 'SELECT * FROM tbl_waterquality ORDER BY id DESC';
$query_run = mysqli_query($connection, $query);
while ($row = mysqli_fetch_array($query_run)) {
?>
<html>
<head>
<div class="justify-content-between">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['gauge']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Temperature', <?php echo $row['temperature'] ?>],
['pH', <?php echo $row['pH'] ?>],
['DO', <?php echo $row['DO'] ?>],
['Turbidity ', <?php echo $row['Turbidity'] ?>]
]);
<?php
}
?>
var options = {
width: 500,
height: 200,
minorTicks: 5,
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 400px; height: 120px,; margin-top:30px"></div>
</body>
</html>
uj5u.com熱心網友回復：
正確執行此操作的方法是僅使用 PHP 獲取 DATA，然后在頁面中運行它。
從您的資料庫回傳 JSON 并將其傳遞給執行可視化的函式。
這是您的新 server.php - 已完成
<?php
header("content-type: application/json");
$connection = mysqli_connect('localhost', 'root', '', 'adminpanel');
$query = 'SELECT * FROM tbl_waterquality ORDER BY id DESC';
$query_run = mysqli_query($connection, $query);
$row = mysqli_fetch_array($query_run); // assuming ONE result
echo <<<EOT
[
["Label", "Value"],
["Temperature", $row["temperature"]],
["pH", $row["pH"] ],
["DO", $row["DO"] ],
["Turbidity", $row["Turbidity"]]
]
EOT
?>
并使用此頁面呼叫它
測驗后取消注釋已注釋的提取
<!doctype html>
<html>
<head>
<meta charset="utf8" />
<title>Gauge</title>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
/* ------------- Remove when you uncomment the fetch -----------*/
let temp = 25; // testdata
const arr = [
['Label', 'Value'],
['Temperature', temp],
['pH', 7.2],
['DO', 60],
['Turbidity ', 10]
]; // testdata
/* ------------- END Remove -----------*/
let chart;
const options = {
width: 500,
height: 200,
minorTicks: 5,
};
const drawChart = arr => {
if (!chart) chart = new google.visualization.Gauge(document.getElementById('chart_div')); // only do this once
var data = google.visualization.arrayToDataTable(arr);
chart.draw(data, options);
}
const getData = () => {
/* UNCOMMENT after test
fetch('server.php')
.then(response => response.json())
.then(arr => {
drawChart(arr);
setTimeout(getData, 2000); // run again
});
*/
/* REMOVE AFTER TEST */
drawChart(arr); // remove after test
arr[1][1] = temp
setTimeout(getData, 5000); // run again - remove after test
/* END REMOVE */
};
window.addEventListener("load", () => { // when page loads
google.charts.load('current', {
'packages': ['gauge']
});
google.charts.setOnLoadCallback(getData); // start
})
</script>
</head>
<body>
<div class="justify-content-between">
<div id="chart_div" style="width: 400px; height: 120px,; margin-top:30px"></div>
</div>
</body>
</html>如果您需要創建所有行的陣列，這里是如何回圈
http://sandbox.onlinephpfunctions.com/code/8c371c0da3a5e7a91bcf8cf1e961f822c0755e57
$arr = array(array( "Label", "Value"));
while ($row = mysqli_fetch_array($query_run)) {
array_push($arr,
array("Temperature", $row["temperature"]),
array("pH", $row["pH"] ),
array("DO", $row["DO"] ),
array("Turbidity", $row["Turbidity"])
);
}
echo json_encode($arr)
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/349370.html
標籤：javascript php html xml