- 对于我从MySql调用的每个湿度值，都将显示Solid Gauge。我已经挣扎了好几天，不知道还能做什么。它无论如何都不起作用，你能试着帮我做项目吗
该值似乎是从我共享的图像中的php中提取的；然而，我想我忽略了一些东西，图形无法检测到这个数字。
HTML
<?php
include("hum.php");
?>
<html>
<head>
<title>Highcharts Tutorial</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src = "https://code.highcharts.com/highcharts.js"></script>
<script src = "https://code.highcharts.com/highcharts-more.js"></script>
<script src = "https://code.highcharts.com/modules/solid-gauge.js"></script>
</head>
<body>
<div style = "width: 600px; height: 400px; margin: 0 auto">
<div id = "container-speed" style = "width: 300px; height: 200px; float: left">
</div>
</div>
<script language = "JavaScript">
$(function () {
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '100%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The speed gauge
$('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 200,
title: {
text: 'Speed'
}
},
credits: {
enabled: false
},
series: [{
name: 'Speed',
data: [],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">km/h</span></div>'
},
tooltip: {
valueSuffix: ' km/h'
}
}]
}));
// Bring life to the dials
setInterval(function () {
point = $('#container-speed').highcharts().series[0].points[0];
humidity;
$.getJSON("hum.php", function(data) {
point.update(parseFloat(humidity));
});
}, 2000);
});
</script>
PHP
<?php
$mysqli= new mysqli('localhost', 'root','','sensorsdata');
$sql = '
SELECT humidity,
UNIX_TIMESTAMP(CONCAT_WS(" ", date, time)) AS datetime
FROM allv1
ORDER BY date DESC, time DESC LIMIT 1
';
$result_4 = $mysqli->query($sql);
while($row_4 = $result_4->fetch_assoc()) {
echo $row_4['humidity'];
}
?>
目前，它是这样出现在屏幕上的：
我的php表如下：
如果我解决了这个问题，我将用其他值绘制图表。
ED伊斯坦布尔
尝试是成功的。**ajax让我找到了答案。。。
只需像这样调整setInterval部分。
setInterval(function () {
$.ajax({
url: "hum.php",
data: 'gauge1',
type:'get',
dataType: "json",
cache: false,
success: function(data){
var humidity = $.parseJSON(data);
var chart = $('#container-speed').highcharts();
chart.series[0].points[0].update(humidity);
}
});
}, 2000);
});
我认为point = $('#container-speed').highcharts().series[0].points[0];是未定义的，因为初始数据是一个空数组，所以没有渲染任何点。尝试设置一些初始伪数据，例如：
series: [{
name: 'Speed',
data: [1],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">km/h</span></div>'
},
tooltip: {
valueSuffix: ' km/h'
}
}]