Question

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

问题是，如果我在代码中使用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是来自ajax函数的回调，它解析XML并返回数组;现在在我调用并在“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.");
                }               
            }); 
    }

Answer 1

为parseData设置回调并不意味着脚本会在它返回之前挂起。所以在你的脚本中发生的是你正在调用parseData，而RenderPieChart又执行一个ajax请求，但与此同时，脚本继续并调用parseData但是图表数据尚未填充。

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

我知道您将调用document.ready()置于RenderPieChart下，然后在ajax的回调中调用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); }, ... }); }：

{{1}}

图表未按预期显示

1 个答案: