Highcharts 实时数据，json ajax答案

【问题标题】：Highcharts live data, json ajaxHighcharts 实时数据，json ajax
【发布时间】：2016-07-29 12:47:12
【问题描述】：

我的头要炸了。

livedata.php 在页面打开时加载 json。 live.php 将点添加到图形。

从 livedata.php 我得到这样的输出：

[["Date.UTC(2016, 07-1, 28, 15, 08)",37],["Date.UTC(2016, 07-1, 28, 15, 08)",37],["Date.UTC(2016, 07-1, 28, 15, 08)",37],["Date.UTC(2016, 07-1, 28, 15, 08)",37],["Date.UTC(2016, 07-1, 28, 15, 08)",37],["Date.UTC(2016, 07-1, 28, 15, 08)",37]]

live.php 输出 - 只有最后一行，看起来像

["Date.UTC('.2016, 07-1, 29, 15, 40.')", 44]

我有图表，实时 addPoint 工作，但 x 轴上没有日期。我做错了什么？

var chart;

function requestData() {
    $.ajax({
        url: 'live.php',
        success: function(point) {
            var series = chart.series[0],
                shift = series.data.length > 120; // shift if the series is 

                chart.series[0].addPoint(eval(point));

                setTimeout(requestData, 10000);    
        },
        cache: false
    });
}
$(function () {
        $.ajax({
        url: 'livedata.php',
        success: function(point) {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    type: 'areaspline',

                    events: {
                load: requestData
            }
                },
                title: {
                    text: 'Revenue vs. Overhead',

                },
                subtitle: {
                    text: '',

                },
                xAxis: {
                    type: 'datetime'


                },
                yAxis: {
                    title: {
                        text: 'Amount'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },


                series: [{

            name: 'Random data',
            data:  eval(point )
        }]
            });
        },    

    });


});

live.php

global $dbConnection;
    $stmt = $dbConnection->query('SELECT DATE_FORMAT(data,"%Y-%m-%d %H:%i") as dataa, humidity FROM sensorsdata order by id desc limit 1');    
    $row = $stmt->fetch(PDO::FETCH_ASSOC);
    $date_raw = strftime('%Y, %m-1, %d, %H, %M', strtotime($row[dataa]));
        $date_complete = "Date.UTC('.$date_raw.')";
    $ar = array($date_complete, $row[humidity]);
    echo json_encode($ar, JSON_NUMERIC_CHECK);

livedata.php

global $dbConnection;
$stmt = $dbConnection->query('SELECT DATE_FORMAT(data,"%Y-%m-%d %H:%i") as dataa, humidity FROM sensorsdata');    

$result = $stmt->fetchAll();

foreach ($result as $row) {
    $date_raw = strftime('%Y, %m-1, %d, %H, %M', strtotime($row[dataa]));
    $date_complete = 'Date.UTC('.$date_raw.')';
    $hum_for_chart[] = [$date_complete, $row[humidity]];

}

echo json_encode($hum_for_chart, JSON_NUMERIC_CHECK);

图表： Chart

【问题讨论】：

标签： php mysql json ajax highcharts

【解决方案1】：

我认为它的问题是你的数据试图让字符串像，

live.php

....
$date_complete = "Date.UTC('.$date_raw.')";
$ar = "[".$date_complete.",". $row[humidity]."]";
echo json_encode($ar);

livedata.php

....
foreach ($result as $row) {
    $date_raw = strftime('%Y, %m-1, %d, %H, %M', strtotime($row[dataa]));
    $date_complete = 'Date.UTC('.$date_raw.')';
    $hum_for_chart[] = "[".$date_complete.",". $row[humidity]."]";
}
....

您可以参考highcharts-data-series-issue-with-ajax-json-and-php

【讨论】：

字符串类型出现错误 Highcharts error #12: www.highcharts.com/errors/12 highcharts.js:286 Uncaught TypeError: h.splice is not a function

【解决方案2】：

我明白了！ 2天令人兴奋的））））

感谢Rohan Kumar 提供链接。我将 date.utc 更改为 unix 时间戳。

$datetimeUTC = ((strtotime($row[dataa])+ 10800) * 1000);
$data[] = [$datetimeUTC, $row[humidity]];
echo json_encode($data);

10800 - 即 +3 小时（莫斯科时区）

输出是

[[1469718529000,37],[1469718529000,37],[1469718530000,37],[1469718531000,37]]

就是这样，日期轴开始工作了！

【讨论】：