如何使用Json对象填充Highchart

Question

我正在尝试使用highchart对象从服务器端填充json。坦率地说，我对jquery和highchart有一般的了解。我是json，jquery和highchart的新手。 我可以从服务器端收到json对象，但在填充highchart时遇到问题。 任何身体都可以帮助我。

我从服务器收到的json对象看起来像这样

[Object { year=2001,  populations=10000}, Object { year=2002,  populations=20000}, Object { year=2003,  populations=30000}, Object { year=2004,  populations=40000}, Object { year=2005,  populations=50000}, Object { year=2006,  populations=60000}, Object { year=2007,  populations=70000}]

我的脚本填充高图

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: 'dispatcherServlet/reportController/getreport',
        dataType: "json",
        contentType: "application/json",
        crossDomain: true,
        success: function (data) {
            console.log(data);
            var name = Array();
            var value = Array();
            var dataArrayFinal = Array();
            for (i = 0; i < data.length; i++) {
                name[i] = data[i].year;
                value[i] = data[i].populations;
            }
            for (var j = 0; j < name.length; j++) {
                var temp = new Array(name[j], value[j]);
                dataArrayFinal[j] = temp;
            }
            // draw chart
            $('#container').highcharts({
                chart: {
                    type: "column"
                },
                title: {
                    text: "City Population"
                },
                xAxis: {
                    allowDecimals: false,
                    title: {
                        text: "Year"
                    }
                },
                yAxis: {
                    title: {
                        text: "Population",
                        data: value[i].year

                    }

                },
                series: [{
                    data: dataArrayFinal
                }]
            });

        }


    });

});

当我将数据从服务器接收到高图系列时。我正在获得高潮。

第二个脚本看起来像这样

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: '/dispatcherServlet/reportController/getreport',
        dataType: "json",
        contentType: "application/json",
        crossDomain: true,
        success: function (data) {
            console.log(data);

            for (var i = 0; i < data.length; i++) {
               // alert(data[i].year);
               // alert(data[i].populations);

                // draw chart
                $('#container').highcharts({
                    chart: {
                        type: "column"
                    },
                    title: {
                        text: "City Population"
                    },
                    xAxis: {
                        allowDecimals: false,
                        title: {
                            text: "Year"
                        }
                    },
                    yAxis: {
                        title: {
                            text: "Population",
                           
                            
                        }
                    
                    },
                    series: [{
                        data: data
                    }]
                });
                
            }


            }
    });

});

Answer 1

最后它起作用了

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: '/dispatcherServlet/reportController/getreport',
        dataType: "json",
        contentType: "application/json",
        crossDomain: true,
        success: function (data) {
            console.log(data);

            // Populate series
            var processed_json = new Array();
            for (i = 0; i < data.length; i++) {
                processed_json.push([data[i].year, parseInt(data[i].populations)]);
            }

            // draw chart
            $('#container').highcharts({
                chart: {
                    type: "column"
                },
                title: {
                    text: "City Population"
                },
                xAxis: {
                    allowDecimals: false,
                    title: {
                        text: "Year"
                    }
                },
                yAxis: {
                    title: {
                        text: "Population"


                    }

                },
                series: [{
                    data: processed_json
                }]
            });

        }


    
    });

});

Answer 2

[ { "year":2001, "populations":10000}, 
  { "year":2002,"populations":20000}, 
  { "year":2003, "populations":30000},
  { "year":2004, "populations":40000}, 
  { "year":2005, "populations":50000},
  { "year":2006, "populations":60000}, 
  { "year":2007, "populations":70000}
]




    var title = prompt("Please enter Title of your Chart: ", "");

  //  var chart = $('#container').highcharts();
    var x=new Array();

    //var product = prompt("Please enter Column Name: ", "");
    var stock = prompt("Please enter Y Axis Name: ", "");
    //var name = prompt("Please enter Series Name: ", "");

    $(function () {



            var text="Stock Level";
            var y=new Array();
            var attr="";
            var processed_json = new Array(); 

            $.getJSON('data2.json', function(data) {      //Getting data from JSON file

                //var keys=new Array();

                var obj=JSON.stringify(data[1]);
                //alert(obj);
                attr=JSON.stringify(obj.substring(2,obj.indexOf(":")-1))
                //alert(JSON.stringify(obj.substring(2,obj.indexOf(":")-1)));
                var attr1=attr.substring(1,attr.length-1);
                //alert(attr1);
                //alert(attr1);

                $.each(data, function(key, value)
                {

            //  var yName="Stock";

                //var product="ProductId";

                var idd=value[attr1];
                //Getting Values of 1st Attribute that has to be represented along X-axis
                x.push(idd);
                //Getting Values of 2nd attribute that has to be represented along Y-axis
                y.push(value.populations);


                //$("ul").append("<li>"+value.ProductId+" "+value.Stocklevel+"<li>")
                });

                            // draw chart
                $('#container').highcharts({


                chart: {
                    type: "column"
                },
                title: {
                    text: title
                },
                xAxis: {
                    categories: x,              //Populating X-axis
                    type: 'category',
                    allowDecimals: false,
                    title: {
                        text: ""
                    }
                },
                yAxis: {
                    title: {
                        text: stock
                    }
                },
                series: [
                {

                    name: name ,
                    data:y                      //Populating Y-axis
                }
                ]
            }); 
        });
    });