2

getJSON メソッドでデータをハイチャートに渡したい:

<script type="text/javascript">
var chart;
    $(document).ready(function(){
$("#datepicker1").datepicker({showOn: 'button', buttonImage: 'css/base/images   /calendar.gif', buttonImageOnly: true,dateFormat: "yy-mm-dd"});
  });
function draw_chart(){`
   var url="http://localhost/handle_data.php?start=2012-12-30&end=2013-01-04";
    chart=new Highcharts.Chart({});

$.getJSON(url,function(data1){
 var options={
    chart: {
            renderTo: 'container',
    type: 'line'
        },

        xAxis:{
    type: 'datetime'

   },
        yAxis: {
            title: {
                text: 'test'
            }

        }, 
        series:[{
           data:data1.result[0].dayactivity,
           name: "name"
       }]

};
var chart = new Highcharts.Chart(options);
});
}

</script>
</head>

<body>

<div >  
<input type="text" id="datepicker1" name="date1" onchange='draw_chart()' >
</div>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

の値data1.result[0].dayactivityは次のとおりです。 

[[1356796800,0.0],[1356883200,16.1],[1356969600,0.0],[1357056000,0.0],[1357142400,15.0]],

この値を に直接入れるoptions.series[0].dataと機能しますが、getJSON を介して渡すと機能しません。チャートは空です。最初に実行されるようですvar chart = new Highcharts.Chart(options);。どうすればこれを解決できますか? ありがとう。

4

2 に答える 2

3

の作成を のコールバックChart内に移動する必要があります。一度だけインスタンス化して作成する必要があり、それはコールバック関数内になります。success$.getJSON();Chart

function draw_chart() {
    var url="http://localhost/handle_data.php?start=2012-12-30&end=2013-01-04";
    $.getJSON(url,
        function(data1){
            /** Declare options after success callback. */
            var options={
                chart: {
                     renderTo: 'container',
                     type: 'line'
                },
                xAxis:{
                     type: 'datetime'
                },
                yAxis: {
                     title: { text: 'test'}
                }, 
                series:[{
                    data:data1.result[0].dayactivity,
                    name: "name"
                }]
           };

           /** Create a chart instance and pass options. */
           var chart = new Highcharts.Chart(options);
       }
    );
}
于 2013-02-02T04:20:42.117 に答える
0

データを取得する前にハイチャートを初期化しました。これは修正されたスクリプトです。変更された行にコメントしました。

var chart;
$(document).ready(function () {
    $("#datepicker1").datepicker({
        showOn: 'button',
        buttonImage: 'css/base/images   /calendar.gif',
        buttonImageOnly: true,
        dateFormat: "yy-mm-dd"
    });
});

function draw_chart() {
    var url = "http://localhost/handle_data.php?start=2012-12-30&end=2013-01-04";
//    chart = new Highcharts.Chart({}); //PROBLEM ONE - empty initialisation 

    $.getJSON(url, function (data1) {
        var options = {
            chart: {
                renderTo: 'container',
                type: 'line'
            },

            xAxis: {
                type: 'datetime'

            },
            yAxis: {
                title: {
                    text: 'test'
                }

            },
            series: [{
                data: data1.result[0].dayactivity,
                name: "name"
            }]

        };
        //var chart = new Highcharts.Chart(options); // removed var here, as it looks you want it to be global
        chart = new Highcharts.Chart(options);
    });
}
draw_chart();

json なしのデモですが、問題を確認できます

于 2013-02-02T04:20:19.847 に答える