Question

我是新来的，并没有真正体验过来自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），最后的时间转换器函数也没有改变。

Answer 1

好的，我现在设法使用以下代码更改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
}
});

correct display of time

（每5分钟记录一次SensorData）

现在我只需要用日期/时间格式修复工具提示信息（仅显示％H：％M）

两个DataSeries for yAxis 1和2 with Datadb from SQLdb

1 个答案: