如何使用 Json 对象填充 Highchart答案

【问题标题】：How to Populate Highchart using Json Object如何使用 Json 对象填充 Highchart
【发布时间】：2015-05-28 11:37:50
【问题描述】：

我正在尝试使用json object 从服务器端填充highchart。坦率地说，我对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
                }]
            });

        }


    });

});

当我只是将接收到的数据从服务器传递到 highchart 系列时。我的高图表越来越差了。

第二个脚本如下所示

$(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
                    }]
                });
                
            }


            }
    });

});

【问题讨论】：

您放置了两个脚本样本。第一个显示没有数据，对吧？第二个有什么问题？没有描述。您的第一个脚本在 yAxis 处有明确的失败 data: value[i].year。您应该开始删除它。在那一刻没有价值[i]

标签： javascript jquery json highcharts

【解决方案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
                }]
            });

        }


    
    });

});

【讨论】：

【解决方案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
                }
                ]
            }); 
        });
    });

【讨论】：