kitagata_old/js/piechart.js

//円グラフのデータ
var PopMan = 8862;
var PopWoman = 9596;
var data = [
	{
 		value : PopMan,
		color : "#01a9de"
	},
	{
		value : PopWoman,
		color : "#eb5f60"
	}
];
var options = {
	//Boolean - Whether we should animate the chart	
	animation : true,
	
	//Number - Amount of animation steps
	animationSteps : 100,
	
	//String - Animation easing effect
	//animationEasing : "easeOutBounce",
	
	//Boolean - Whether we animate the rotation of the Pie
	//animateRotate : true,
	
	//Boolean - Whether we animate scaling the Pie from the centre
	animateScale : false,
	
	//Function - Will fire on animation completion.
	onAnimationComplete : function(){
		var Man = new Image();
		var Woman = new Image();
		Man.src = "css/img/Man.png?" + new Date().getTime();
		Woman.src = "css/img/Woman.png?" + new Date().getTime();
		Man.onload = function() {
			ctx.drawImage(Man, 151, 70, 20, 50);
		}
		Woman.onload = function() {
			ctx.drawImage(Woman, 9, 70, 20, 50);
		}
		var Pop = parseInt(PopMan) + parseInt(PopWoman);
		var PerPopMan = Math.round(parseInt(PopMan) / parseInt(Pop) * 100);
		var PerPopWoman = Math.round(parseInt(PopWoman) / parseInt(Pop) * 100);
		
		var PopMan_text = document.getElementById("PopMan_text");
		var PopWoman_text = document.getElementById("PopWoman_text");
		var PerPopMan_text = document.getElementById("PerPopMan_text");
		var PerPopWoman_text = document.getElementById("PerPopWoman_text");
		
		PerPopMan_text.innerHTML = PerPopMan + "%";
		PerPopWoman_text.innerHTML = PerPopWoman + "%";
		
		PopMan_text.style.display = "block";
		PopWoman_text.style.display = "block";
		PerPopMan_text.style.display = "block";
		PerPopWoman_text.style.display = "block";
		
	}

};
var ctx = null;
var NewChart = null;
function piechart1(){
	ctx = $("#Maletofemaleratio").get(0).getContext("2d"),//Canvasのコンテキスト取得
	NewChart = new Chart(ctx);//チャートを生成

	NewChart.Pie(data,options);
}

/* オンロード時に動作 */
if(window.addEventListener) {
	window.addEventListener('load', piechart1, false);
} else {
	window.attachEvent("onload", piechart1);
}