我是这个社区的新手。几天后,我正在尝试使用Highstock实现图表。该图表将显示随时间变化的温度监测。
这些值是通过PHP获取并存储在MySQL中的。我能够在Highchart的XAXIS中显示温度值,但不能显示DateTime。
我没有使用Javascript,如果我找到解决方案如何在Javascript中将DateTime转换为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
});
答案 0 :(得分:2)
对于highcharts,您必须将dateTime不仅转换为时间戳,而且还应将时间戳转换为毫秒。
当我遇到这样的问题时。我在PHP中将dateTime转换为timeStamp,毫秒。在PHP中很方便。
<强> PHP 强>
<div class="wrapper">
<div class="box header">Header</div>
<div class="box sidebar">Sidebar</div>
<div class="box sidebar2">Sidebar 2</div>
<div class="box content">Content
<div class="panelwrap">
<div class="panel">Panel A</div>
<div class="panel">Panel B</div>
<div class="panel tall-panel">Panel C</div>
<div class="panel">Panel D</div>
<div class="panel">Panel E</div>
<div class="panel">Panel F</div>
<div class="panel tall-panel">Panel G</div>
<div class="panel tall-panel">Panel H</div>
<div class="panel">Panel I</div>
<div class="panel">Panel J</div>
<div class="panel wide-panel">Panel K</div>
</div>
</div>
<div class="box footer">Footer</div>
</div>
<强> MYSQL 强> 这个查询CONVERT DATETIME到UNIX时间戳记
strtotime({your_dateTime})*1000
但是如果你只想在JavaScript中进行转换,那么:
converting-a-datetime-string-to-timestamp-in-javascript
how-do-you-get-a-timestamp-in-javascript
06.08.2017 - 更新
官方文档: data-from-a-database如何从mysql获取数据并转换为highcharts。
php沙箱中的转换:php_sand_box
jsFiddle http://jsfiddle.net/1gbpzeho/
答案 1 :(得分:0)
请参阅Highcharts API on series.data.x
x:数字
该点的x值。对于日期时间轴,X值是自1970年以来以毫秒为单位的时间戳。
在您的代码中,您首先将>=
转换为毫秒
<
然后在代码中添加日期时间格式
DateTime
然后,您尝试通过在混合日期对象数组上使用Date.UTC()将其转换回毫秒。
$date_inside_temp[] = strtotime($row[0]) *1000;