我找到了这个 Highchart 实时数据示例 Live data 。我尝试使用来自 MySQL 的自己的数据，因此，我更改了 live-server-data.php 中的 $y 以在使用函数 后接收数据>fetch_assoc()。
HTML 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
JS
var chart; // global
function requestData() {
$.ajax({
url: 'live-server-data.php',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 20; // shift if the series is longer than 20
chart.series[0].addPoint(eval(point), true, shift);
// call it again after one second
setTimeout(requestData, 1000);
},
cache: false
});
}
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: requestData
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
name: 'Random data',
data: []
}]
});
});PHP代码
<?php
$conn = new mysqli($servername, $username, $password, $dbname);
if($conn->connect_error){
die("Connection failed: ".$conn->connect_error);
}
$sql_1 = "SELECT SensorData AS power FROM $tbname where SensorID = '1'";
$result_1=$conn->query($sql_1);
while($row = $result_1->fetch_assoc()){
$y = $row['power'];
}
$conn->close();
header("Content-type: text/json");
multiplied by 1000.
$x = time() * 1000;
$ret = array($x, $y);
echo json_encode($ret);
?>
图表已移动，但未显示任何数据。
所以我在 Chrome 浏览器上按 F12，然后发现了这个东西。
我认为“14.600”可能是我的问题的原因。请告诉我您是否知道解决此问题的方法。非常感谢。
最佳答案
我认为该图需要一个包含数值的数组。在您的情况下，一个值是数字，但另一个值是字符串，因此将所有值转换为数字，即整数或 float 。 (这里首选 float )并将该数组传递给图表。
关于javascript - 使用 highchart 来自 MySQL 的实时数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43572318/