高架图表不显示正确的日期，也不按日期缩放

Question

我已经创建了我的图表的JSFiddle，我正在尝试使用我的数据创建该图表。

我已经成功地从mySQL中导出了我的数据，并且unix时间戳看起来是正确的。第一次数据从2004年1月1日开始，最后一次是从昨天(2013年3月12日)开始。然而，图表只显示了1月13日至16日以及我不需要的时间。我需要它来显示整个数据范围，IE 2004 - 2013。按日期缩放似乎也不起作用？

我的JSFiddle链接是：

http://jsfiddle.net/petenaylor/rJDRB/1/

 <script type="text/javascript">

(function($){ // encapsulate jQuery

$(function() {
var seriesOptions = [],
    yAxisOptions = [],
    seriesCounter = 0,
    names = ['Electric', 'Oil', 'Gas'],
    colors = Highcharts.getOptions().colors;

$.each(names, function(i, name) {

    $(function() {

$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
    // Create the chart
    window.chart = new Highcharts.StockChart({
        chart : {
            renderTo : 'container'
        },

        rangeSelector : {
            selected : 1
        },

        title : {
            text : 'Energy Prices'
        },

        series : [{
            name : 'Electric',

            <?php 
            $result = mysql_query (" SELECT * FROM energyprices ORDER BY id ASC") or die (mysql_error());
            while ($row = mysql_fetch_array($result)) {
            extract($row);
            $date = strtotime($row['pDate']); // convert from Unix timestamp to JavaScript time
            $data1[] = "[$date, $electric]";
            }
            ?>


            data: [<?php echo join($data1, ',') ?>],
            tooltip: {
                valueDecimals: 2
            }
        },{
            name : 'Oil',


            <?php 
            $result = mysql_query (" SELECT * FROM energyprices ORDER BY id ASC") or die (mysql_error());
            while ($row = mysql_fetch_array($result)) {
            extract($row);
            $date = strtotime($row['pDate']); // convert from Unix timestamp to JavaScript time
            $data2[] = "[$date, $oil]";
            }
            ?>


            data: [<?php echo join($data2, ',') ?>],
            tooltip: {
                valueDecimals: 2
            }
        },{
            name : 'Gas',


            <?php 
            $result = mysql_query (" SELECT * FROM energyprices ORDER BY id ASC") or die (mysql_error());
            while ($row = mysql_fetch_array($result)) {
            extract($row);
            $date = strtotime($row['pDate']); // convert from Unix timestamp to JavaScript time
            $data3[] = "[$date, $gas]";
            }
            ?>


            data: [<?php echo join($data3, ',') ?>],
            tooltip: {
                valueDecimals: 2
            }
        }]
    });
});

 });

});



// create the chart when all data is loaded
function createChart() {

    chart = new Highcharts.StockChart({
        chart: {
            renderTo: 'container'
        },

        rangeSelector: {
            selected: 4
        },

        yAxis: {
            labels: {
                formatter: function() {
                    return (this.value > 0 ? '+' : '') + this.value + '%';
                }
            },
            plotLines: [{
                value: 0,
                width: 2,
                color: 'silver'
            }]
        },

        plotOptions: {
            series: {
                compare: 'percent'
            }
        },

        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
            valueDecimals: 2
        },

        series: seriesOptions
    });
}

});
})(jQuery);

谢谢!

Answer 1

您的数据x应该乘以1000，因为您需要JS时间戳，并且还按x升序排序。