javascript - Highcharts/JavaScript 月份与 MySQL 不兼容

Question

我正在尝试擦干地下室的墙壁。为此，我有两个比重计(一个在地下室里面，一个在外面)。与这些值相关，我打开通风口，从外面带来新鲜空气，或者我启动除湿机。这个系统对我来说很好用。但是为了监视和控制该系统的功能，我将值写入 MySQL 数据库:

Datum = '2020-09-29 13:05:03'

现在我正在使用图表库 Highcharts 进行演示:

LineChart in webbrowser with wrong Month

如您所见，实际和最后一个值是从 10 月 29 日开始的，也就是 future 一个月。

我的互联网研究表明，在 JavaScript 中，月份数组以 0 开头，在 PHP(我用它从 MySQL 数据库中提取值)中，月份数组似乎以 1 开头。所以我的问题是:我该如何解决这个问题？

我擅长电子学，擅长微型计算机编程，但是为了这次演示，我把来自不同站点的许多代码部分拼凑在一起，几乎完成了。但也只是差不多。如果可能的话，我可以接受任何肮脏的解决方法，比如

datetime2.setMonth((datetime2.getMonth)-1

但问题是我的编程能力很差，我没有能力学习一本完整的 JavaScript 和一本 PHP 书来解决这个烦人的小问题。

这是 DataLogger_Chart.html 中感兴趣的代码片段或混沌片段

<?php
$servername = "localhost";
$username = "XXXXXXXXX";
$password = "XXXXXXXXX";
$dbname = "Data_Logging";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
    }

$sql = "SELECT Luftfeuchte_absolut_innen, Luftfeuchte_absolut_aussen, Datum FROM Data_Logging.Temp_und_Luftfeuchte WHERE Datum >= date_sub(now(), interval 24 hour)";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $dataLuftFeuchteInnen[] = $row["Luftfeuchte_absolut_innen"];
        $dataLuftFeuchteAussen[] = $row["Luftfeuchte_absolut_aussen"];
        $dataDatum[] = $row["Datum"];
        }

    foreach ($dataDatum as &$value) {
        $datetime1[] = date('y, n, j, G, i, s', strtotime($value));
        }
    unset($value); // Entferne die Referenz auf das letzte Element
    foreach ($datetime1 as &$value) {
        $datetime2[] = 'Date.UTC('.$value.')';
        }
    unset($value); // Entferne die Referenz auf das letzte Element

    for ($i = 0; $i < count($dataLuftFeuchteInnen); $i++) {
        $datensatz_1[$i] = "[".strval($datetime2[$i]).", ".strval($dataLuftFeuchteInnen[$i])."]";
        $datensatz_2[$i] = "[".strval($datetime2[$i]).", ".strval($dataLuftFeuchteAussen[$i])."]";
        }

} 
else {
    echo "0 results";
}
$conn->close();
?>

我觉得这部分没那么有趣:

        <script type="text/javascript">  
Highcharts.chart('container', {

title: {
    text: 'Absolute Luftfeuchte Keller / Aussen'
    },
subtitle: {
    text: 'Wenn (Luftfeuchte aussen < Luftfeuchte innen) und (Innentemperatur > 17°C) schaltet sich der Lüfter ein. '
    },
yAxis: {
    title: {
        text: 'Luftfeuchte in gr / m³'
        }
},

在这里我可以在 Highcharts 中格式化输出格式

xAxis: {
    type: 'datetime',
        dateTimeLabelFormats: { 
                            hour: '%H:%M'  
                        }
},

最后一部分:

legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
},

plotOptions: {
    series: {
        label: {
            connectorAllowed: false
        }
    }
},

至此，JavaScript代码中插入了上面的php数据

series: [{
    name: 'Luftfeuchte Innen',
    data: [<?php echo join($datensatz_1, ",") ?>]
}, {
    name: 'Luftfeuchte Aussen',
    data: [<?php echo join($datensatz_2, ",") ?>]
}],

当我查看浏览器中显示的源代码时，上面的代码片段创建了这个:

series: [{
    name: 'Luftfeuchte Innen',
    data: [[Date.UTC(20, 9, 28, 14, 55, 03), 10.59],[Date.UTC(20, 9, 28, 15, 00, 02),...shortened...,[Date.UTC(20, 9, 29, 14, 50, 03), 11.05]]
    , {
    name: 'Luftfeuchte Aussen',
    data: [[Date.UTC(20, 9, 28, 14, 55, 03), 10.31],[Date.UTC(20, 9, 28, 15, 00, 02),...shortened...,[Date.UTC(20, 9, 29, 14, 50, 03), 10.97]]
    }],

代码的最后一部分:

responsive: {
    rules: [{
        condition: {
            maxWidth: 500
        },
        chartOptions: {
            legend: {
                layout: 'horizontal',
                align: 'center',
                verticalAlign: 'bottom'
            }
        }
    }]
}

});
    </script>

Answer 1

HighCharts 接受以毫秒为单位的日期时间

所以首先将日期时间字符串转换为毫秒，然后传递给 HighCharts 对象。