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/