Question

首次尝试使用Highcharts / Php / MySQL。我有一个PHP脚本来从MySQL恢复日期时间系列。我试图将我的数据窃取到找到的here的Highcharts代码中。到目前为止，我只是设法得到图表轴和＆amp;要在浏览器中显示的标题，这会让我认为格式化数据系列时出现问题。我知道JS需要在Unix中进行日期格式化，所以我尝试用下面的php代码替换while循环，

while($row = mysql_fetch_array($result)) {
$uts=strtotime($row['DATETIMES']);
$date=date("l, F j, y H:i:s",$uts);
echo $date . "\t" . $row['CCGT']. "\n";
}

不幸的是系列仍然没有显示。有没有人能够了解为什么不能绘制日期时间序列？

原始php代码

<?php

$con = mysql_connect("localhost","user",");

if (!$con) {
die('Could not connect: ' . mysql_error());
}

mysql_select_db("test", $con);

$result = mysql_query("SELECT * FROM PR") or die ("Error");
echo mysql_error();
while($row = mysql_fetch_array($result)) {
  echo $row['DATETIMES'] . "\t" . $row['CCGT']. "\n";
}

mysql_close($con);
?>

以

格式返回数据

2013-12-23 09:45:00 8389 2013-12-23 09:50:00 8478 2013-12-23 09:55:00 8761 2013-12-23 10:00:00 8980 2013-12-23 10:05:00 9050 2013-12-23 10:10:00 9010

Highcharts代码如下

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

</head>
<body>

<h1>CCGT</h1>

<script type="text/javascript">
    var chart;
            $(document).ready(function() {
                var options = {
                    chart: {
                        renderTo: 'container',
                        defaultSeriesType: 'line',
                        marginRight: 130,
                        marginBottom: 25
                    },
                    title: {
                        text: 'CCGT',
                        x: -20 //center
                    },
                    subtitle: {
                        text: '',
                        x: -20
                    },
                    xAxis: {
                        type: 'datetime',
                        tickInterval: 60 * 1000, // one hour
                        tickWidth: 0,
                        gridLineWidth: 1,
                        labels: {
                            align: 'center',
                            x: -3,
                            y: 20,
                            formatter: function() {
                                return Highcharts.dateFormat('%l%p', this.value);
                            }
                        }
                    },
                    yAxis: {
                        title: {
                            text: 'Generation MW'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        formatter: function() {
                                return Highcharts.dateFormat('%l%p', this.x-(1000*60)) +'-'+ Highcharts.dateFormat('%l%p', this.x) +': <b>'+ this.y + '</b>';
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        x: -10,
                        y: 100,
                        borderWidth: 0
                    },
                    series: [{
                        name: 'Count'
                    }]
                }
                // Load data asynchronously using jQuery. On success, add the data
                // to the options and initiate the chart.
                // This data is obtained by exporting a GA custom report to TSV.
                // http://api.jquery.com/jQuery.get/
                jQuery.get('data.php', null, function(tsv) {
                    var lines = [];
                    traffic = [];
                    try {
                        // split the data return into lines and parse them
                        tsv = tsv.split(/\n/g);
                        jQuery.each(tsv, function(i, line) {
                            line = line.split(/\t/);
                            date = Date.parse(line[0] +' UTC');
                            traffic.push([
                                date,
                                parseInt(line[1].replace(',', ''), 10)
                            ]);
                        });
                    } catch (e) {  }
                    options.series[0].data = traffic;
                    chart = new Highcharts.Chart(options);
                });
            });
</script>



</head>
<body>

<div id="container" style="width: 100%; height: 400px; margin: 0 auto"></div>

</body>
</html>

编辑：

我还尝试过UNIX_TIMESTAMP在SQL查询期间返回unix时间，然后乘以1000以返回JS时间。 Data.php现在以下列格式返回日期：1387908000000 但是，初始化图表仍然不会返回任何系列。如何在上面的jQuery代码中从JS格式化日期以便与Highcharts兼容？

Answer 1

试试这个

1.First set the date in a variable 
2.Find difference between your date and 1-1-1970
3.Multiply that value into 24*60*60*1000
4.Put this value into highchart

Answer 2

Highcharts使用javascript时间戳，而不是日期。要实现这一点，您可以在php中计算时间或在javascript中使用Date.UTC（）。 Secondoly我喜欢在php中使用json_encode（）并返回正确的JSON，然后在js脚本中加载并初始化图表。

Highcharts没有绘制日期时间序列

2 个答案: