Question

我必须在动态折线图中显示实时功耗值。我为此感到高兴 highcharts 库。我希望x轴上的时间和y轴上的功率都来自mysql数据库。但即使从数据库中正确提取时间和功耗值，我也无法在高保真图上获得正确的时间。

为了开发代码，我在数据库中创建了以下表格。我已插入假设值来开发代码。

mysql> use sample;
Database changed
mysql> select * from Power_data;
+-------+----------+---------------------+
| SR_NO | POWER_D1 | DATE_TIME           |
+-------+----------+---------------------+
|     1 |  294.975 | 2016-02-04 06:01:00 |
|     2 |  295.837 | 2016-02-04 06:02:00 |
|     3 |   279.45 | 2016-02-04 06:03:00 |
|     4 |  288.765 | 2016-02-04 06:04:00 |
|     5 |   298.08 | 2016-02-04 06:05:00 |
|     6 |  319.297 | 2016-02-04 06:06:00 |
+-------+----------+---------------------+
6 rows in set (0.00 sec)

mysql> select * from counter
    -> ;
+-----+---------+---------+---------+
| cid | select1 | select2 | select3 |
+-----+---------+---------+---------+
|   1 |       1 |       1 |       1 |
+-----+---------+---------+---------+
1 row in set (0.00 sec)

然后我在live.php文件中编写了实时服务器的代码。这段代码按照highcharts的要求以毫秒的形式正确地给我时间。

<?php
// Set the JSON header
header("Content-type: text/json");  

$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = 'root';

$conn = mysql_connect($dbhost, $dbuser, $dbpass);

if(! $conn ) {
    die('Could not connect: ' . mysql_error());
}
mysql_select_db('sample');
$sql1='SELECT select1 FROM counter WHERE cid=1';
$r=mysql_fetch_array(mysql_query($sql1,$conn));
$i=$r['select1'];
//echo $i;

$sql2='SELECT * FROM Power_data WHERE SR_NO='.$i;
$result=mysql_query($sql2,$conn);

if(!$result){
die('Could not get data:' . mysql_error());
}
$i++;
$sql3='UPDATE counter SET select1='.$i.' WHERE cid=1';
mysql_query($sql3,$conn);

while($row=mysql_fetch_array($result)){
extract($row);  
$y=$POWER_D1;
$x=strtotime($DATE_TIME);
// Create a PHP array and echo it as JSON
$ret = array($x, $y);
echo json_encode($ret,JSON_NUMERIC_CHECK);

}
 mysql_close($conn);

?>

在此之后，获取实时数据并在折线图中显示的代码就像这样。文件名是client.php：

<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script type="text/javascript src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
var chart;
/**
 * Request data from the server, add it to the graph and set a timeout 
 * to request again
 */
function requestData() {
    $.ajax({
        url: 'live.php',
        success: function(point) {
    //document.write(point);
            var series = chart.series[0],
                shift = series.data.length > 20; // shift if the series is 
                                             // longer than 20

            // add the point
           chart.series[0].addPoint(point, true, shift);

           // call it again after one second
           setTimeout(requestData, 1000);    
        },
        cache: false
    });
}
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'spline',
            events: {
                load: requestData
            }
        },
        title: {
            text: 'Live random data'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150,
            maxZoom: 20 * 1000
        },
        yAxis: {
            minPadding: 0.2,
            maxPadding: 0.2,
            title: {
                text: 'Value',
                margin: 80
            }
        },
        series: [{
            name: 'Random data',
            data: []
        }]
    });        
});

</script>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

我的高图在x轴上显示错误的时间值。有人请告诉我是否遗漏了某些事情。

Answer 1

尝试更改行：

$x=strtotime($DATE_TIME);

要：

$x=strtotime($DATE_TIME)*1000;

Highcharts datetime系列预计时间戳形式的x值为毫秒。 PHP strtotime以秒返回时间戳。

我的高潮图没有在x轴上显示正确的时间

1 个答案: