Question

我想通过getJSON方法将数据传递给highcharts：

<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);。我怎么解决这个问题？感谢。

Answer 1

您需要在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);
       }
    );
}

Answer 2

你初始化highcharts，在获取数据之前，这是固定的脚本，我注释了更改的行。

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的

Demo，但你可以看到问题

highcharts通过JSON获取数据？

2 个答案: