Highcharts / JavaScript 月与 MySQL 不兼容

Posted 2023-02-24

【中文标题】Highcharts / JavaScript 月与 MySQL 不兼容

【英文标题】：Highcharts / JavaScript month is incompatible with MySQL

【发布时间】：2021-01-15 02:25:50

【问题描述】：

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

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

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

LineChart in webbrowser with wrong Month

如您所见，实际值和最后值是从 10 月 29 日开始的，正好是未来一个月。

我的互联网研究表明，在 javascript 中，月份数组以 0 开头，在 php（我用于从 MySQL 数据库中提取值）中，月份数组似乎以 1 开头。所以我的问题是：我该如何解决这个问题？

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

datetime2.setMonth((datetime2.getMonth)-1

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

这里是 DataLogger_Chart.html 中感兴趣的代码或 chaos-sn-ps

<?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
        
    
,

此时，上面的 php 数据已插入到 JavaScript 代码中

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>

【问题讨论】：

我认为这个话题可以帮助你解决你的日期格式问题：***.com/questions/9755911/…

嗨@Bastian，您的系列结构的结果似乎无效。请检查这个例子：jsfiddle.net/BlackLabel/rwvqkdn8 你可以在那里测试你的 JS 代码。此外，dateTimeLabelFormats 属性仅适用于 Highstock。

【参考方案1】：

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

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

【讨论】：

嘿@Waqar Akram，非常感谢您的回复。最近几天我病了，所以我很抱歉我的回复迟了：根据您的建议，我尝试将：foreach ($datetime1 as &$value) $datetime2[] = 'Date.UTC('.$value.')'; 更改为foreach ($datetime1 as &$value) $datetime2[] = date_timestamp_get($value); 但是当我选择一个特定的 datetime2 对象时，它是空的

@Bastian 你找到解决方案了吗？

【参考方案2】：

非常感谢@Waqar，毫秒的提示把我带到了这个网站link 所以我改变了：

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

到

foreach ($dataDatum as &$value) 
$datetime1[] = strtotime($value);

unset($value); // Entferne die Referenz auf das letzte Element
foreach ($datetime1 as &$value) 
$datetime2[] = $value * 1000;

unset($value); // Entferne die Referenz auf das letzte Element

这对我来说完全没问题！