//円グラフのデータ var PopMan = 8826; 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); }