0

我已经创建了我试图使用我的数据创建的图表的 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);

谢谢！

4

1 回答 1

0

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

于 2013-03-13T11:03:30.977 回答