highcharts get data by JSON?

2019-05-23 03:17发布

站内问答 / jQuery
968 2 6

I want to pass data to highcharts by getJSON method:

<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>

the value of data1.result[0].dayactivity is: 

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

when i put this value directly to options.series[0].data, it works, but when i pass it throuth getJSON, it does not. The chart is empty. It seems that it executes var chart = new Highcharts.Chart(options); first. How can i solve this? thanks.

2条回答
Root（大扎）
2楼-- · 2019-05-23 03:36

You need to move the creation of the Chart within the success callback of $.getJSON(); You only have to instantiate and create the Chart once and that will be within the callback function. 

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);
       }
    );
}
查看更多
0人赞 添加讨论(0) 举报
手持菜刀，她持情操
3楼-- · 2019-05-23 03:37

You initialised highcharts, before get data, this is fixed script, I commented changed lines.

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();

Demo without json, but you can see problem

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)