以下に示すように、ハイチャートを使用して円グラフを表示しています。
問題は、次の例のように、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>
これは、XMLを解析して配列を返すajaxparsedData関数からのコールバックです。円グラフを描画するために「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.");
}
});
}