kitagata_old/js/piechart.js

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