MySQL日期时间 - XAXIS HIGHCHART

Question

我是这个社区的新人。自从几天以来，我试图使用Highstock实现图表。此图表将显示随时间变化的温度监控。

这些值通过PHP获取并存储在MySQL中。我能够在Highchart的XAXIS中显示温度值，但不显示日期时间。

我没有使用Javascript，我认为我的问题可能会发布，如果我找到解决方案如何将DateTime转换为JavaScript中的Timestamp并将其显示为DateTime。

请在下面找到我的代码：

<?php 

     //Récupération des valeurs stockées dans MySQL 
     mysql_connect("localhost","root","root");  //connexion à la base de données mysql 
     mysql_select_db("Chart");      //connexion à la base de données concernées 

?> 

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script src="https://code.highcharts.com/stock/highstock.js"></script> 
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script> 


<div id="container"> 

<script> 

<?php 
     //récuparation de la colonne "value" dans le tableau "temperature" 
     $query = mysql_query("SELECT value FROM inside_temp"); 
     while($ligne = mysql_fetch_array($query)){ 
       $inside_temp[] = $ligne[0]; 
     } 
     //récupération de la colonne date dans le tableau date 
     $query = mysql_query("SELECT date FROM inside_temp"); 
     while($row = mysql_fetch_array($query)){ 
       //$date_inside[] = $row[0]; 
       $date_inside_temp[] = strtotime($row[0]) *1000; 
       $date_inside_temp[] = date_format($row[0]," Y-m-d H:i:s,"); 
     } 
     //récuparation de la colonne "value" dans le tableau "temperature" 
     $query = mysql_query("SELECT value FROM outside_temp"); 
     while($ligne = mysql_fetch_array($query)){ 
       $outside_temp[] = $ligne[0]; 
     } 
     //récuparation de la colonne "value" dans le tableau "temperature" 
     $query = mysql_query("SELECT value FROM thermostat_setpoint"); 
     while($ligne = mysql_fetch_array($query)){ 
       $therm_setpoint[] = $ligne[0]; 
     } 
     //récuparation de la colonne "value" dans le tableau "temperature" 
     $query = mysql_query("SELECT value FROM consumption"); 
     while($ligne = mysql_fetch_array($query)){ 
       $consumption[] = $ligne[0]/1000; 
     } 

?> 

    Highcharts.stockChart('container', { 

     rangeSelector: { 
      selected: 4 
     }, 

     title: { 
       text: 'Consumption & Temperature monitoring' 
     }, 

     subtitle: { 
       text: 'Heating experiment - LTU, Summer 2017' 
     }, 

     xAxis: { 
       type: 'datetime', 
         //categories: [<?php echo join($date_inside_temp,',') ?>], 
         categories: Date.UTC(<?php echo $date_inside_temp;?>), 
       tickInterval: 15, 
       labels: { 
         format: '{value:%Y-%b-%e %H:%m}' 
       } 
     }, 

     yAxis: { 
       title: { 
         text: 'Measured values (°C or kW)' 
         } 
     }, 


     series: [{ 
       name: 'Wall plug consumption', 
       data:[<?php echo join($consumption,',') ?>] 

     }, { 

       name: 'Inside temperature', 
       data: [<?php echo join($inside_temp,',') ?>] 

     }, { 

       name: 'Thermostat setpoint', 
       data:[<?php echo join($therm_setpoint,',') ?>] 

     }, { 

       name: 'Outside temperature', 
       data:[<?php echo join($outside_temp,',') ?>] 

    }] //fin de series 

    }); 

The current result in picture

Answer 1

参考Highcharts API on series.data.x

X：数

点的x值。对于日期时间坐标轴，X值是自1970年以来

在你的代码以毫秒为单位的时间戳你先转换DateTime为毫秒

$date_inside_temp[] = strtotime($row[0]) *1000; 

那么你在你的代码添加datetime格式

$date_inside_temp[] = date_format($row[0]," Y-m-d H:i:s,");`. 

然后，您尝试通过在混合的dateobjects数组上使用Date.UTC（）将其转换回毫秒。

categories: Date.UTC(<?php echo $date_inside_temp;?>), 

Answer 2

对于highcharts，您必须将dateTime不仅转换为时间戳，但在时间戳毫秒。

当我有这样的问题。我用PHP以毫秒为单位将dateTime转换为timeStamp。这在PHP中很方便。

PHP

strtotime({your_dateTime})*1000 

MYSQL 此查询的CONVERT DATETIME到UNIX时戳

SELECT UNIX_TIMESTAMP(STR_TO_DATE('Apr 15 2012 12:00AM', '%M %d %Y %h:%i%p'))*1000 

但是如果你想在JavaScript中执行的转换而已，所以：

converting-a-datetime-string-to-timestamp-in-javascript

个

how-do-you-get-a-timestamp-in-javascript

---

2017年6月8日 - 更新

官方文档： data-from-a-database如何从MySQL中获取数据，并转换为以highcharts。

Convertation在PHP沙箱：php_sand_box

的jsfiddle http://jsfiddle.net/1gbpzeho/