0
我正在使用高圖表顯示餅圖,如下所示。圖表不按預期方式顯示
的問題是,當它從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.");
}
});
}
OK讓我試試謝謝 – unkown 2012-08-08 11:56:57