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

JS タイムスタンプが必要なため、データ x に 1000 を掛ける必要があります。また、x で昇順に並べ替えます。

于 2013-03-13T11:03:30.977 に答える