0

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

问题是，如果在从 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>

这parsedData是解析 XML 并返回数组的 ajax 函数的回调；现在，在我在“Renderpiechart()”函数中调用并加载数据以绘制饼图之前，我放置了一个警报并显示图表，但如果我删除警报，则不会显示图表。我的东西catdata名称数组还没有填充，所以图表没有显示。

这是我解析的数据 js 文件：

<script src="js/jquery1-7-2.min.js" type="text/javascript" ></script>
var categories=[];
var items=[];
var totalCategories;
var totalItems;

function parseData(callback){   
        var cnt=0;
            $.ajax({
                type:"GET",
                url:"test.xml",
                success:function(xml){                                      
                    totalCategories = $(xml).find('totalCategories').text();
                    totalItems = $(xml).find('totalItems').text();
                    $(xml).find('category').each(function(){
                        var tempcategory= new Array();                      
                        var catogoryId = $(this).find('cat_id').text();
                        var catogoryName = $(this).find('cat_name').text();
                        tempcategory[0]=catogoryId;
                        tempcategory[1]=catogoryName;
                        categories[cnt]=tempcategory;
                        cnt++;                      
                    });                     
                    cnt=0;
                    $(xml).find('items').each(function(){
                        var tempitem=new Array();
                        var catId = $(this).find('category_id').text();
                        var itemId = (this).find('item_id').text();
                        var itemName = (this).find('item_name').text();

                        var itemtype = $(this).find('type').text();
                        tempitem[0]=catId;
                        tempitem[1]=itemId;
                                            tempitem[2]=itemname;
                        items[cnt]=tempitem;
                        cnt++;                  
                    });                     
                  callback.call(null,totalCategories,totalItems,items,categories);
                },
                error: function(){
                    alert("An error occurred while processing XML file.");
                }               
            }); 
    }
4

1 回答 1

1

设置回调parseData并不意味着脚本挂起，直到它回来。因此，您的脚本中发生的事情是您正在调用parseData，而后者又执行 ajax 请求，但与此同时，脚本继续并调用RenderPieChart，但尚未填充图表数据。

这就是为什么，如果您发出警报，您将看到数据，因为警报会阻止脚本，因此parseData有足够的时间来完成。

我建议您将调用放在parseDataajax的回调中document.ready()，然后调用：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);   
                },
                    ...          
            }); 
    }
于 2012-08-08T11:53:06.380 回答