我正在嘗試從 mySQL 資料庫匯入讀數，并將它們放在 ChartJS 上。
$query = mysqli_query($conn, "SELECT * FROM readings
ORDER BY readings_id DESC LIMIT 2");
$distance = array();
$timestamp = array();
while($row = mysqli_fetch_array($query)) {
$distance[] = $row['river_height'];
$time[] = $row['time_stamp'];
}
這是我正在使用的查詢，也是我將讀數存盤在陣列中的方法。
但是，例如，當我嘗試將它們放在條形圖中時，這 2 個讀數將作為一個讀數。
我的Javascript代碼如下：
const time = <?php echo json_encode($time); ?>;
var canvasElement = document.getElementById("chart");
var config = {
type: 'bar',
data: {
labels: [time],
datasets: [{data:[10, 20]}],
}
}
我已經嘗試了很多東西，但無法弄清楚。我是新手，所以沒有幫助。任何建議或幫助將不勝感激。
uj5u.com熱心網友回復：
發生這種情況是因為您的 PHP 正在為標簽回傳一個陣列，然后您將該陣列放入另一個陣列中。這告訴 chart.js 它必須是一個多行標簽，如您所見。要獲得您想要的行為，您需要洗掉標簽欄位中的陣列括號，如下所示：
const time = <?php echo json_encode($time); ?>;
var canvasElement = document.getElementById("chart");
var config = {
type: 'bar',
data: {
labels: time, // remove array brackets around time
datasets: [{data:[10, 20]}],
}
}
uj5u.com熱心網友回復：
假設您想要time_stamp作為 X 軸，并river_height作為 Y 軸，更改為：
PHP：
while($row = mysqli_fetch_array($query)) {
$data[] = [
'x' => $row['time_stamp'],
'y' => $row['river_height']
];
}
JavaScript：
var config = {
type: 'bar',
data: {
datasets: [{
data: <?= json_encode($data) ?>
}]
}
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/435032.html