Jquery 图表未按预期显示_Jquery_Arrays_Charts_Load

Jquery 图表未按预期显示

jquery arrays charts

Jquery 图表未按预期显示,jquery,arrays,charts,load,Jquery,Arrays,Charts,Load,我正在使用高位图表显示饼图，如下所示问题在于，如果在解析XML数据并填充数组时代码之间未使用警报，则图表不会显示，如以下示例所示： <html> <head> <script src="http://code.jquery.com/jquery-1.6.3.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></scri

我正在使用高位图表显示饼图，如下所示

问题在于，如果在解析XML数据并填充数组时代码之间未使用警报，则图表不会显示，如以下示例所示：

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script> 
    <script src="parseData.js" ></script>

    <script>

    var cntItem=0;
    var cntCategory=0;
    var categoryGroup;
    var itemGroup;
    var catdata=[];
    parseData(function (totalCategories,totalItems,items,categories) {

        cntItem=totalItems;
        cntCategory=totalCategories;
        categoryGroup=categories;
        itemGroup=items;        
    }); 
    alert('asfas');
    var numerator=100;
    var denominator=cntCategory;
    var remainder = (100/13);
    var cnt=0;
            var itemdata = [
                      ['aloogobi', 42.0],
                      ['pannermakhani', 26.8],
                      {
                          name: 'Chrome',
                          y: 14.8,
                          sliced: true,
                          selected: true
                      },
                      ['mattuerpaneer', 6.5],
                      ['Jaipuri', 8.2],
                      ['Kolapuri', 0.7]
                  ]; 

                for(var i=0;i<categoryGroup.length;i++){
                    var temp=[categoryGroup[i][1],7.5];
                    catdata.push(temp);                 
                }  

     $(document).ready(function () {    

            RenderPieChart('container', catdata);     


            function RenderPieChart(elementId, dataList) {
                new Highcharts.Chart({
                    chart: {
                        renderTo: elementId,
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    }, title: {
                        text: 'Browser market shares at a specific website, 2010'
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
                        }
                    },
                    plotOptions:{
                        series: {
                            cursor: 'pointer',
                                point: {
                                    events: {
                                        click: function() {
                                            ++cnt;
                                            if(cnt=='1'){
                                                RenderPieChart('container', catdata);
                                                alert(catdata[this.x][0]+" - "+catdata[this.x][1]);                                             
                                            }
                                            if(cnt=='2'){
                                                RenderPieChart('container',itemdata);   
                                                alert(itemdata[this.x][0]+" - "+itemdata[this.x][1]);                                               
                                            }   
                                        }
                                    }
                                }
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 'Browser share',
                        data: dataList
                    }]
                });
            };
        });

    </script>
</head>
<body>
    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    <input type="button" id="categoryPieChart" value="Category Chart" />
    <input type="button" id="itemPiechat" value="Item Chart" />
</body>
</html>

为

parseData

设置回调并不意味着脚本将挂起，直到它返回。因此，脚本中发生的情况是，您正在调用

parseData

，它反过来执行ajax请求，但与此同时，脚本继续调用

RenderPieChart

，但图表数据尚未填充

这就是为什么，如果您发出警报，您将看到数据，因为警报正在阻止脚本，因此

parseData

有足够的时间完成

我建议您在

document.ready（）

下调用

parseData

，然后在ajax的回调中调用

RenderPieChart

：

function parseData(callback){   
        var cnt=0;
            $.ajax({
                type:"GET",
                url:"test.xml",
                success:function(xml){                                      
                   ....                  
                  callback.call(null,totalCategories,totalItems,items,categories);
                  RenderPieChart('container', catdata);   
                },
                    ...          
            }); 
    }

function parseData(callback){   
        var cnt=0;
            $.ajax({
                type:"GET",
                url:"test.xml",
                success:function(xml){                                      
                   ....                  
                  callback.call(null,totalCategories,totalItems,items,categories);
                  RenderPieChart('container', catdata);   
                },
                    ...          
            }); 
    }