使用php和Highcharts可视化MySQL数据库中的数据



我使用PHP和Highcharts连接到我的MySQL数据库,并在图表中可视化日期。如果你能给我提示一下如何解决这个问题,那就太有帮助了。(我是PHP和highcharts的新手…)

下面是我使用的代码(注释是用德语写的…):

<?php
// Verbindung mit der MySQL-Datenbank herstellen
$con = mysqli_connect('ip', 'user', 'passwd', 'Sensordata');
// Abfrage an die Datenbank senden, um die Daten abzurufen
//$result = mysqli_query($con, 'SELECT * FROM `temp_humidity`');
//$query = "SELECT TIME(datetime) AS datetime, temp FROM temp_humidity";
$query = "SELECT DATE(datetime) AS datetime, CAST(temp AS INT) AS temp FROM temp_humidity";
//$query = "SELECT datetime, temp FROM temp_humidity";
$result = mysqli_query($con, $query);
// Array erstellen, um die Daten aus der Datenbank zu speichern
$data = array();
$temps = array();
// Schleife durch die Daten in der Datenbank
while ($row = mysqli_fetch_array($result)) {
// Daten aus der Spalte 'datetime' verwenden, um sie als X-Achse im Diagramm darzustellen
$data['xAxis'][] = $row['datetime'];
// Daten aus der Spalte 'temp' verwenden, um sie als Y-Achse im Diagramm darzustellen
$data['yAxis1'][] = $row['temp'];
//$temps[] = $row['temp'];
}
// Datenarray in JSON-Format konvertieren, um sie in Highcharts verwenden zu können
$json_data = json_encode($data);
//$json_temps = json_encode($temps);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SensMo</title>
</head>
<body>
<!-- Highcharts-Bibliothek importieren -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<!-- Diagrammbereich definieren -->
<div id="container" style="width:100%; height:400px;"></div>
<!-- Diagramm erstellen -->
<script type='text/javascript'>
// Daten aus dem JSON-Array verwenden
var data = <?php echo $json_data; ?>;
// Diagramm erstellen und in den definierten Bereich einfügen
Highcharts.chart('container', {
chart: {
type: 'line' // Diagrammtyp (Linie)
},
title: {
text: 'Device pi-002 Temperaturverlauf' // Titel des Diagramms
},
xAxis: {
categories: data.xAxis, // X-Achse verwendet die Werte aus dem 'datetime'-Array
title: {
text: 'Zeit'
}
},
yAxis: {
title: {
text: 'Temperatur (°C)'
}
},
legend: {
layout: 'vertical', // Legenden-Bereich vertikal anordnen
align: 'right', // Legenden-Bereich rechtsbündig ausrichten
verticalAlign: 'middle' // Legenden-Bereich mittig ausrichten
},
series: [{
name: 'Temperatur', // Name der Datenreihe (wird im Legenden-Bereich angezeigt)
data: data.yAxis1 // Daten für die Y-Achse verwenden
//color: '#ff0000' // Farbe der Linie (rot)
}]
});
</script>
</body>
</html>

我不知道为什么温度不显示只显示日期时间而不显示温度

但数据在那里(xAxis和yAxis1):在图表中没有显示

var data = {
"xAxis":["2022-11-21", "2022-11-21", "2022-11-21", "2022-11-21",  
"2022-11-21", "2022-11-21", "2022-11-21", "2022-11-21", 
"2022-11-21", "2022-11-21", "2022-11-21", "2022-11-21", 
"2022-11-21", "2022-11-21", "2022-11-21", "2022-11-21", 
"2022-11-21", "2022-11-21", "2022-11-21", "2022-11-21", 
"2022-12-10"
],
"yAxis1":[ "22", "22", "22", "22", 
"23", "23", "23", "23",
"22", "23", "23", "22", 
"22", "22", "23", "23",
"23", "23", "23", "23", 
"25" 
]
};

是数据库的样子现在只想显示温度

(SQL文件:when i create table first

)
DROP TABLE IF EXISTS temp_humidity;
CREATE TABLE IF NOT EXISTS temp_humidity (
device VARCHAR(50), 
datetime TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, 
temp VARCHAR(60), 
hum VARCHAR(60)
);
) 

附加信息^^(在设备中只显示设备名称(pi-002))

我以为问题出在"temp"Format是varchar类型,而不是int或其他数据类型所以在代码中我使用了CAST…(查询)但这并没有改变什么

有人知道我做错了什么还是我错过了什么?

尝试将temp作为数字而不是字符串传递,更改这一行

$data['yAxis1'][] = (int)$row['temp']; 

从mysqli扩展返回给你的所有东西都将是一个字符串,即使你在查询

中强制转换它

最新更新