Javascript 如何循环JSON值并在highcharts上绘制线条

我有下面的JSON数据

[

    {"line":"BAH","data":{"May":120}},
    {"line":"DOM","data":{"May":120,"Apr":90,"Mar":43.5}},
    {"line":"GLW","data":{"May":120}}

]

我想循环浏览这个数据，并在Y轴上用值（BAH、DOM、GLW）和X轴上的月份名称（May、Apr、Mar）绘制线图

代码

$.ajax（{
键入：“GET”，
url:'index.php/dashboard/getGraph？indicator_id='+id，
//数据类型：“JSON”，
成功：功能（结果）
{      
//控制台日志（“结果”+结果）；
//警报（'图形类型>>>>'+结果）；
var-graph_results=JSON.parse（results）；
//console.log（“图形类型>>>>>>>>”+图形结果.图形类型）；
//console.log（“图形名称>>>>>>>>”+图形结果.图形名称）；
//
//警报（“指示器输入”+图形结果。图形类型）；
//仅适用于直线图
if（graph\u results.graph\u name！=null&&graph\u results.graph\u type=='line'）
{ 
//构建系列
//1.执行Ajax调用
//var检验=1；
//警惕（“这是一条线”）；
$.ajax（{
键入：“GET”，
url:'index.php/dashboard/showGraphSeries'，
数据：{
指标id：图形结果。指标id，
年份用户过滤器：年份用户过滤器，
月用户过滤器：月用户过滤器，
q_用户过滤器：q_用户过滤器，
来自过滤器输入的日期：来自过滤器输入的日期，
日期到过滤器输入：日期到过滤器输入，
} ,
成功：功能（系列结果）
{
//console.log（“多少次”+图形结果.指示器id）；
//2.获取序列并构建数据
//log（JSON.parse（series_results））；
//3.我们构建了展示所需的结构
//[{'name'：'Some name'，'data'：'Some data'}]
//控制台日志（“系列数据”+系列结果）；
//log（“#”+图形结果。图形表名称）；
var data_series=JSON.parse（series_结果）；
//console.log（'data_series'+data_series.data）；
//
//警报（data_series.toSource（））；
var数据_t=[]；
var categ=[]；
var categ_sorted=null；
//
var图_数据=[]；
var值={}；
var d=[]；
用于（数据系列中的var项）
{
//警报（数据系列[项目].行）；
值['name']=数据系列[项目]。行；
//警报（项目）；
//
//警报（数据系列[项目].行）；
对于（数据系列[item].data中的变量i）
{
//警报（“>>>>”+数据系列[项目]。行+”>>>>“+i）；
// 
值['data']=[data_系列[item]。数据[i]]；
//
类别推力（i）；
图形_数据推送（值）；
}
//警报（categ.toSource（））；
//警报（数据系列[项目].data）；
//值['name']=data_series.line；
//值['data']=[data_series.data[item]]；
//
警报（values.toSource（））；
 $.ajax({ 
                                     type : 'GET' ,
                                     url: '<?php echo public_path() ?>index.php/dashboard/getGraph?indicator_id='+id,
                                    // dataType: 'JSON' ,
                                     success: function(results)
                                     {      
                                        // console.log("results "+results) ;
                                        // alert('Graph Type >>>>>>> '+results) ;
                                         var graph_results = JSON.parse(results);

                                    //   console.log("Graph Type >>>>>>>>> "+graph_results.graph_type); 
                                    //   console.log("Graph Name >>>>>>>>> "+graph_results.graph_name); 
                                         //
                                    //   alert("indicator_input "+graph_results.graph_type);
                                          // for Line graph only
                                         if(graph_results.graph_name != null && graph_results.graph_type == 'line') 
                                         { 

                                         //BUILD SERIES
                                         //1. Do an Ajax call
                                         //var test = 1 ; 
                                        // alert("It is a line ") ;
                                         $.ajax({ 
                                             type: 'GET' ,
                                             url: '<?php echo public_path() ?>index.php/dashboard/showGraphSeries',
                                             data: {

                                                    indicator_id:graph_results.indicator_id ,
                                                    year_user_filter:year_user_filter ,
                                                    month_user_filter:month_user_filter ,
                                                    q_user_filter:q_user_filter ,
                                                    date_from_filter_input: date_from_filter_input ,
                                                    date_to_filter_input: date_to_filter_input ,
                                                 } ,
                                             success: function(series_results) 
                                             {
                                                  //console.log("HOW MANY TIMES "+graph_results.indicator_id) ;

                                                 //2. get the series and construct data
                                                // console.log(JSON.parse(series_results));
                                                 //3. We construct the required structure for display
                                                 // [{ 'name': 'Some name' , 'data': 'Some Data'}]
                                                // console.log("Series data"+series_results);
                                                // console.log('#'+graph_results.graph_table_name);
                                                    var data_series = JSON.parse(series_results) ;
                                                   // console.log('data_series '+data_series.data);
                                                    //
                                                  //alert(data_series.toSource());
                                                    var data_t = [] ;
                                                    var categ = [] ;
                                                    var categ_sorted = null ;
                                                    //
                                                    var graph_data = [] ;
                                                    var values = {} ;
                                                    var d = [] ;

                                                    for(var item in data_series)
                                                    {
                                                          // alert(data_series[item].line) ;
                                                           values['name'] = data_series[item].line ;
                                                          // alert(item);
                                                           //
                                                            // alert(data_series[item].line) ;
                                                             for(var i in data_series[item].data)
                                                             {
                                                                // alert(">>>>"+data_series[item].line+">>>>>>"+i);
                                                                // 
                                                                 values['data'] = [data_series[item].data[i]] ;
                                                                 //
                                                                 categ.push(i);
                                                                 graph_data.push(values);

                                                             }

                                                            // alert(categ.toSource());
                                                            // alert(data_series[item].data) ;
                                                         //  values['name'] = data_series.line ;
                                                         //  values['data'] = [data_series.data[item]] ;
                                                           //
                                                          alert(values.toSource()) ;
                                                          // graph_data.push(values);
                                                         //  categ.push(item);
                                                    }

                                                    categ_sorted = sortMonths(categ) ; 
                                                //  alert(values.toSource()) ;
                                                //  alert(graph_data.toSource());
                                                //  alert(categ.toSource());
                                                     //dynamically build graphs

                                                    $('#'+graph_results.graph_table_name).highcharts({
                                                        title: {
                                                            text: ''+graph_results.graph_name,
                                                            x: -20 //center
                                                        },
                                                        subtitle: {
                                                            text: 'Source: '+data_series.data_source,
                                                            x: -20
                                                        },
                                                        xAxis: {
                                                            categories: categ_sorted
                                                        },
                                                        yAxis: {
                                                            title: {
                                                                text: ''+graph_results.name_y_axis
                                                            },
                                                            plotLines: [{
                                                                value: 0,
                                                                width: 1,
                                                                color: '#808080'
                                                            }]
                                                        },
                                                        credits:
                                                        {
                                                            enabled: false
                                                        },
                                                        tooltip: {
                                                            valueSuffix: ''
                                                        },
                                                        legend: {
                                                            layout: 'vertical',
                                                            align: 'right',
                                                            verticalAlign: 'middle',
                                                            borderWidth: 0
                                                        },
                                                        series: graph_data
                                                    });

                                                    //end dynamic graphs


                                             } ,
                                             error: function() 
                                             {

                                             }

                                         }) ;

                                     }
                                        //end for line

                                         } ,
                                         error: function(){
                                              //console.log("getGraph error");
                                              alert("getGraph error") ;
                                         }
                                    });

var arrData = [ 
                     {"line":"BAH","data":{"May":120}},
                    {"line":"DOM","data":{"May":120,"Apr":90,"Mar":43.5}},
                    {"line":"GLW","data":{"May":120}}
                ]

    arrSeries = []; 
    arrMonth = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];


    arrData.forEach(function(oneSeries,key){


        var tempArr =  new Array(12);

        for(keyVal in oneSeries.data){

           tempArr.splice(keyVal+1,0,oneSeries.data[keyVal]);

        }

        arrSeries[oneSeries.line] = tempArr;    

        console.log(arrSeries)        

    });


    var chart=$("#container").highcharts();

    for(keyVal in arrSeries){

        chart.addSeries({                        
             name: keyVal,
            data:  arrSeries[keyVal]
        })
    }

var index;
    arrData.forEach(function(oneSeries,key){



        var tempArr = Array.apply(0, new Array(12));
        tempArr = tempArr.map(function(val,key){ return null})

        for(keyVal in oneSeries.data){
            index  = arrMonth.indexOf(keyVal);

           tempArr[parseInt(index)]=oneSeries.data[keyVal];


        }

        arrSeries[oneSeries.line] = tempArr;




        //arrSeries     
    });