我想使用RPi,MySQLi,PHP和Chart.js绘制图形。我遵循了这个教程:
https://www.youtube.com/watch?v=2F5iTlPgaV8&t=138s
目前,我的图表是空的。 X轴是'未定义',y轴的范围是错误的。 在我的情况下,x轴应显示时间格式值(HH:MM:SS)。有没有人知道如何从MySQL为Chart.js正确设置接收时间数据?
我也检查了这个解决方案,但它对我不起作用:
chart.js v2 - how to 'fill' the graph when using time scale
谢谢!
<?php
$servername = "localhost";
$username = "airqualitysensor";
$password = "password";
$database = "temperatura";
$conn = new mysqli($servername, $username, $password, $database);
if ($conn->connect_error){
die("Connection failed: ". $conn->connect_error);
exit();
}
$sql = "SELECT * FROM temperaturaodczyt";
$result = $conn->query($sql);
$data = array();
foreach($result as $row){
$data[] = $row;
}
$result->close();
$conn->close();
print json_encode($data);
?>
$(document).ready(function(){
$.ajax({
url:"http://localhost/index.php",
method: "GET",
success: function(data) {
console.log(data);
var tczas = [];
var temperatura = [];
for (var i in data){
tczas.push(data[i].tczas);
temperatura.push(data[i].temperatura);
}
var chartdata = {
labels: tczas,
datasets : [
{
label : "Zmierzona temperatura",
fill: false,
lineTension: 0.1,
backgroundColor: "rgb(200, 200, 200, 0.75)",
borderColor: "rgb(200, 200, 200, 0.75)",
hoverBackgroundColor: "rgb(200, 200, 200, 1)",
hoverBorderColor: "rgb(200, 200, 200, 0.75)",
data: temperatura
}
]
};
var ctx = $("#mycanvas");
var lineGraph = new Chart(ctx, {
type: "line",
data: chartdata
});
},
error: function(data) {
}
});
});