图表不按预期方式显示

问题描述：

我正在使用高图表显示饼图，如下所示。图表不按预期方式显示

的问题是，当它从XML解析数据并填充阵列，如以下示例的图表不如果我不使用的代码之间的警报diplayed：

<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."); 
       }    
      }); 
    }

答

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

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

我seggest你把电话给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); 
       }, 
        ...   
      }); 
    }

OK让我试试谢谢 – unkown 2012-08-08 11:56:57

图表不按预期方式显示

相关推荐