我是新来的，并没有真正体验过来自SQL的highcharts / javascripts和变量数据。
情况是我用DHT22传感器获得了三个Pi3，Pis上的脚本运行良好，数据存储到我的NAS中，进入Maria5数据库。
我设法在每个传感器的表格中显示数据（日期/时间，温度，湿度）： Data shown in a table
我还设法在一页的单独高图中显示所有三个Pi3传感器（数据）的日期/时间和温度（或湿度）： three charts with temperature
我现在要做的是在单个Pi图表的每个高级图中显示温度和湿度。当我手动输入湿度的第二个yAxis数据（系列2）时，它正在工作： 2nd data series entered manually
温度和湿度数据的变量一定有问题。我在网上搜索过很多但是找不到有用的东西，或者我无法以正确的方式理解它......
在数据库中是字段＆＃39; dateandtime＆＃39; （2018-04-18 15:05:00），＆＃39; unix_timestamp＆＃39; （1524056702），＆＃39;传感器＆＃39; （值＆＃34; 1＆＃34;，＆＃34; 2＆＃34;或＆＃34; 3＆＃34;对于每个传感器），＆＃39;温度＆＃39;和＆＃39;湿度。
html页面应该没问题（index.html）;
<html>
<head>
<title>Temperatur Uebersicht</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="data.js" ></script>
</head>
<body>
<div id="chart1" style="height: 400px; margin: 0 auto"></div>
</body>
</html>
带有SQL连接/语句的php文件（values1.php）;
<?php
$con = mysql_connect("localhost","user","password");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("piSensors", $con);
$result = mysql_query("SELECT *
FROM `temperaturedata`
WHERE sensor=1
ORDER BY unix_timestamp DESC
LIMIT 288 ")
or die ("Connection error");
while($row = mysql_fetch_array($result)) {
echo $row['unix_timestamp'] . "/" . $row['temperature'] . "/" . $row['humidity'] . "/" ;
}
mysql_close($con);
?>
...和两个系列的javascript（data.js）。手动输入第二系列的数据。在这里，我不知道如何使用变量，来自sql的实际数据（湿度）也显示在相同的图表中，如温度：
$(function() {
var x_values1 = [];
var y_values1 = [];
var switch1 = true;
$.get('values1.php', function(data1) {
data1 = data1.split('/');
for (var i in data1)
{
if (switch1 == true)
{
var ts = timeConverter(data1[i]);
x_values1.push(ts);
switch1 = false;
}
else
{
y_values1.push(parseFloat(data1[i]));
switch1 = true;
}
}
x_values1.pop();
$('#chart1').highcharts({
chart : {
type : 'spline'
},
title : {
text : 'Pi1'
},
subtitle : {
text : 'PiSensor # 1'
},
xAxis : {
title : {
text : 'Datum & Zeit'
},
categories : x_values1,
reversed : true
},
yAxis : [{
title : {
text : 'Temperatur'
},
labels : {
formatter : function() {
return this.value + ' C'
}
}
}, {
lineWidth: 1,
opposite: true,
title: {
text: 'Luftfeuchtigkeit'
},
labels : {
formatter : function() {
return this.value + ' %'
}
}
}],
tooltip : {
crosshairs : true,
shared : true,
valueSuffix : ''
},
plotOptions : {
spline : {
marker : {
radius : 4,
lineColor : '#666666',
lineWidth : 1
}
}
},
series : [{
name : 'Temperatur',
data : y_values1,
tooltip : {
valueSuffix: ' C'
}
}, {
name : 'Luftfeuchtigkeit',
data : [20,30,40,20],
yAxis : 1,
tooltip : {
valueSuffix : ' %'
}
}]
});
});
});
function timeConverter(UNIX_timestamp){
var a = new Date(UNIX_timestamp * 1000);
var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var year = a.getFullYear();
var month = months[a.getMonth()];
var date = a.getDate();
var hour = a.getHours();
var min = a.getMinutes() < 10 ? '0' + a.getMinutes() : a.getMinutes();
var time = date + ' ' + month + ' ' + year + ' ' + hour + ':' + min ;
return time;
}
如果有人能以正确的方式帮助或帮助我，我会非常感激！
修改：
我尝试使用此变体管理两个yAxis数据系列的高图。 输出＆＃34; values1.php＆＃34; （unix_timestamp /温度/湿度）：
1524060302/27.3/36.4/1524060002/27.3/36.4/1524059702/27.3/36.4/
输出＆＃34; values1.php＆＃34; with dateandtime（dateandtime / temperature / humidity）：
2018-04-18 16:05:00/27.3/36.4/2018-04-18 16:00:00/27.3/36.4/2018-04-18 15:55:00/27.3/36.4/
数据库结构的图片：DB structure
数据库值的图片：DB values
编辑（19.04.2018 / 12:25）
我像你说的那样更改了php代码：
<?php
$con = mysql_connect("localhost","user","password");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("piSensors", $con);
$result = mysql_query("SELECT *
FROM `temperaturedata`
WHERE sensor=1
ORDER BY unix_timestamp DESC
LIMIT 288 ")
or die ("Connection error");
while($row = mysql_fetch_array($result)) {
echo $row['unix_timestamp'] . "/" . $row['temperature'] . "/" . $row['humidity'] . ";" ;
}
mysql_close($con);
?>
php文件的输出现在是这样的：
1524134103/26.1/38.1;1524133802/26.1/38.2;1524133502/26.1/37.8;1524133202/26.2/37.9;
我也在javascript中进行了更改：
$(function() {
var x_values1 = [];
var y_values1 = [];
var y_values2 = [];
var switch1 = true;
$.get('values1.php', function(data1) {
data1 = data1.split(';').reverse();
for (var i in data1) {
let tmpData = data1[i].split('/');
y_values1.push({x: parseInt(tmpData[0])*1000, y: parseFloat(tmpData[1])});
y_values2.push({x: parseInt(tmpData[0])*1000, y: parseFloat(tmpData[2])});
}
//x_values1.pop();
console.log(y_values1);
$('#chart1').highcharts({
chart : {
type : 'spline'
},
title : {
text : 'Buro'
},
subtitle : {
text : 'PiSensor # 1'
},
xAxis : {
title : {
text : 'Datum & Zeit'
},
categories : x_values1,
reversed : false
},
yAxis : [{
title : {
text : 'Temperatur'
},
labels : {
formatter : function() {
return this.value + ' C'
}
}
}, {
lineWidth: 1,
opposite: true,
title: {
text: 'Luftfeuchtigkeit'
},
labels : {
formatter : function() {
return this.value + ' %'
}
}
}],
tooltip : {
crosshairs : true,
shared : true,
valueSuffix : ''
},
plotOptions : {
spline : {
marker : {
radius : 4,
lineWidth : 1
}
}
},
series : [{
name : 'Temperatur',
data : y_values1,
color : '#FF0033',
tooltip : {
valueSuffix: ' C'
}
}, {
name : 'Luftfeuchtigkeit',
data : y_values2,
dashStyle: 'shortdot',
color : '#58ACFA',
zones : [{
value: 45,
color: '#00cc00',
}, {
value: 60,
color: '#ff9900',
}, {
value: 100,
color: '#ff0000',
}],
yAxis : 1,
tooltip : {
valueSuffix : ' %'
}
}]
});
});
});
function timeConverter(UNIX_timestamp){
var a = new Date(UNIX_timestamp * 1000);
var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var year = a.getFullYear();
var month = months[a.getMonth()];
var date = a.getDate();
var hour = a.getHours();
var min = a.getMinutes() < 10 ? '0' + a.getMinutes() : a.getMinutes();
var time = date + ' ' + month + ' ' + year + ' ' + hour + ':' + min ;
return time;
}
我为湿度添加了一些区域颜色（Luftfeuchtigkeit）和另一个dashStyle。这种变化运作良好。
但是xAxis Date＆amp; amp;时间（或现在的unix_timestamp）。 xAxis DateTime - Unix_Timestamp Problem in the HighCharts
SQL语句仍然相同（unix_timestamp），最后的时间转换器函数也没有改变。
答案 0 :(得分：0)
好的，我现在设法使用以下代码更改xAxis（datetime）：
xAxis : {
type : 'datetime',
labels: {
format: '{value:%e.%m. %H:%M}'
},
title : {
text : 'Datum & Zeit'
},
categories : x_values1,
reversed : false
},
但我还有两点应该改变。 一个是HighCharts上显示的时间。小时是2小时到晚，本地/服务器时间是+2小时。我不知道如何在xAxis和Tooltip上为HighChart输出添加+2小时，或者如何调整时间计算。
以下是上述问题的两个屏幕截图：
Screenshot 1, 2h time difference
Screenshot 2, SQL DB Data (correct time)
使用过的javascript代码现在看起来像这样：
$(function() {
var x_values1 = [];
var y_values1 = [];
var y_values2 = [];
var switch1 = true;
$.get('values1.php', function(data1) {
data1 = data1.split(';').reverse();
for (var i in data1) {
let tmpData = data1[i].split('/');
y_values1.push({x: parseInt(tmpData[0])*1000, y: parseFloat(tmpData[1])});
y_values2.push({x: parseInt(tmpData[0])*1000, y: parseFloat(tmpData[2])});
}
//x_values1.pop();
console.log(y_values1);
$('#chart1').highcharts({
chart : {
type : 'spline'
},
title : {
text : 'Buro'
},
subtitle : {
text : 'PiSensor # 1'
},
xAxis : {
type : 'datetime',
labels: {
format: '{value:%e.%m. %H:%M}'
},
title : {
text : 'Datum & Zeit'
},
categories : x_values1,
reversed : false
},
yAxis : [{
title : {
text : 'Temperatur'
},
labels : {
formatter : function() {
return this.value + ' C'
}
}
}, {
lineWidth: 1,
opposite: true,
title: {
text: 'Luftfeuchtigkeit'
},
labels : {
formatter : function() {
return this.value + ' %'
}
}
}],
tooltip : {
crosshairs : true,
shared : true,
valueSuffix : '',
},
plotOptions : {
spline : {
marker : {
radius : 4,
lineWidth : 1
}
}
},
series : [{
name : 'Temperatur',
data : y_values1,
color : '#FF0033',
tooltip : {
valueSuffix: ' C'
}
}, {
name : 'Luftfeuchtigkeit',
data : y_values2,
dashStyle: 'shortdot',
color : '#58ACFA',
zones : [{
value: 40,
color: '#FE9A2E',
}, {
value: 60,
color: '#2E9AFE',
}, {
value: 100,
color: '#FE9A2E',
}],
yAxis : 1,
tooltip : {
valueSuffix : ' %'
}
}]
});
});
});
$(function() {
var x_values3 = [];
var y_values3 = [];
var y_values4 = [];
var switch1 = true;
$.get('values2.php', function(data2) {
data2 = data2.split(';').reverse();
for (var i in data2) {
let tmpData = data2[i].split('/');
y_values3.push({x: parseInt(tmpData[0])*1000, y: parseFloat(tmpData[1])});
y_values4.push({x: parseInt(tmpData[0])*1000, y: parseFloat(tmpData[2])});
}
//x_values1.pop();
console.log(y_values3);
$('#chart2').highcharts({
chart : {
type : 'spline'
},
title : {
text : 'Wohnzimmer'
},
subtitle : {
text : 'PiSensor # 2'
},
xAxis : {
type : 'datetime',
labels: {
format: '{value:%e.%m. %H:%M}'
},
title : {
text : 'Datum & Zeit'
},
categories : x_values3,
reversed : false
},
yAxis : [{
title : {
text : 'Temperatur'
},
labels : {
formatter : function() {
return this.value + ' C'
}
}
}, {
lineWidth: 1,
opposite: true,
title: {
text: 'Luftfeuchtigkeit'
},
labels : {
formatter : function() {
return this.value + ' %'
}
}
}],
tooltip : {
crosshairs : true,
shared : true,
valueSuffix : ''
},
plotOptions : {
spline : {
marker : {
radius : 4,
lineWidth : 1
}
}
},
series : [{
name : 'Temperatur',
data : y_values3,
color : '#FF0033',
tooltip : {
valueSuffix: ' C'
}
}, {
name : 'Luftfeuchtigkeit',
data : y_values4,
dashStyle: 'shortdot',
color : '#58ACFA',
zones : [{
value: 40,
color: '#FE9A2E',
}, {
value: 60,
color: '#2E9AFE',
}, {
value: 100,
color: '#FE9A2E',
}],
yAxis : 1,
tooltip : {
valueSuffix : ' %'
}
}]
});
});
});
$(function() {
var x_values5 = [];
var y_values5 = [];
var y_values6 = [];
var switch1 = true;
$.get('values3.php', function(data3) {
data3 = data3.split(';').reverse();
for (var i in data3) {
let tmpData = data3[i].split('/');
y_values5.push({x: parseInt(tmpData[0])*1000, y: parseFloat(tmpData[1])});
y_values6.push({x: parseInt(tmpData[0])*1000, y: parseFloat(tmpData[2])});
}
//x_values1.pop();
console.log(y_values5);
$('#chart3').highcharts({
chart : {
type : 'spline'
},
title : {
text : 'Schlafzimmer'
},
subtitle : {
text : 'PiSensor # 3'
},
xAxis : {
type : 'datetime',
labels: {
format: '{value:%e.%m. %H:%M}'
},
title : {
text : 'Datum & Zeit'
},
categories : x_values5,
reversed : false
},
yAxis : [{
title : {
text : 'Temperatur'
},
labels : {
formatter : function() {
return this.value + ' C'
}
}
}, {
lineWidth: 1,
opposite: true,
title: {
text: 'Luftfeuchtigkeit'
},
labels : {
formatter : function() {
return this.value + ' %'
}
}
}],
tooltip : {
crosshairs : true,
shared : true,
valueSuffix : ''
},
plotOptions : {
spline : {
marker : {
radius : 4,
lineWidth : 1
}
}
},
series : [{
name : 'Temperatur',
color : '#FF0033',
data : y_values5,
tooltip : {
valueSuffix: ' C'
}
}, {
name : 'Luftfeuchtigkeit',
data : y_values6,
dashStyle: 'shortdot',
color : '#58ACFA',
zones : [{
value: 40,
color: '#FE9A2E',
}, {
value: 60,
color: '#2E9AFE',
}, {
value: 100,
color: '#FE9A2E',
}],
yAxis : 1,
tooltip : {
valueSuffix : ' %'
}
}]
});
});
});
我认为重点在那里：
for (var i in data1) {
let tmpData = data1[i].split('/');
y_values1.push({x: parseInt(tmpData[0])*1000, y: parseFloat(tmpData[1])});
y_values2.push({x: parseInt(tmpData[0])*1000, y: parseFloat(tmpData[2])});
values1.php
<?php
$con = mysql_connect("localhost","user","password");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("piSensors", $con);
$result = mysql_query("SELECT *
FROM `temperaturedata`
WHERE sensor=1
ORDER BY unix_timestamp DESC
LIMIT 288 ")
or die ("Connection error");
while($row = mysql_fetch_array($result)) {
echo $row['unix_timestamp'] . "/" . $row['temperature'] . "/" . $row['humidity'] . ";" ;
}
mysql_close($con);
?>
第二点是工具提示信息。 还应该只显示xAxis上显示的信息。 喜欢＆＃34; day.month hour.min＆＃34; （％e。％m。％H：％M）
也许有人可以在这里帮助我... thx。
编辑（20.04.2018,13：19）
我添加了以下代码来解决时间差为2小时的问题：
Highcharts.setOptions({
time: {
timezoneOffset: -2 * 60
}
});
（每5分钟记录一次SensorData）
现在我只需要用日期/时间格式修复工具提示信息（仅显示％H：％M）
