検査件数のグラフを拡大

先日、検査件数のページを更新しました。

・・・しばらく眺めていたら、グラフの右側の余白が目に付き、気になって仕方ない。

・・・検査件数のグラフを拡大することにしました。

このグラフはCANVASを利用したPHPで描画しています。

画像ファイルなら画像編集ソフト(GIMP等)でサクッと拡大して終わりですが、このグラフの場合は、プログラムの修正が必要になります。

その代わり、文字がボヤケることはありません。

今回は、ブロックの高さを調整する為に、変数 bh を追加しました。(下記ソース116行目)

・・・たまには、ソースをイジってみないと、いろいろ忘れそうな、今日この頃・・・。

・・・時が経つのは早いですね・・・


2017/07/23追記:
一部プログラムのミスがあったので、プログラムソース及び画像を差し替えました。
猛暑で頭の回転が悪くなっていたようです。・・・あしからず。



まったく洗練されていないソースはこちら

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <style type="text/css">
      #kensa_count {
      	width: 840px;
      	height: 652px;
      	background-color: ivory;
			border: 1px #aaa solid;		//* 枠線の装飾 */
      }
      @media screen and (max-width: 840px) {
        #kensa_count {
            width: 560px;
            height: 435px;
        }
      }
      @media screen and (max-width: 560px) {
      #kensa_count {
          width: 460px;
          height: 357px;
        }
      }
      @media screen and (max-width: 460px) {
      #kensa_count {
          width: 330px;
          height: 256px;
        }
      }
    </style>
    <script type="text/javascript">  
    <!--  
      //3桁区切りを付加する関数
      function addFigure(str) { 
        var num = new String(str).replace(/,/g, ""); 
        while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); 
        return num; 
      } 

      var imax = <?php echo count( file( "./count.csv" ) ); ?>-1;

		var kensa_year = [<?php
		   $filepath = "./count.csv";
		   $file = new SplFileObject($filepath); 
		   $file->setFlags(SplFileObject::READ_CSV); 
		   foreach ($file as $line) {
		      if (!empty($line[0])) { //フィールドデータのないレコードは除外
		         if ($line[0] == '1996') {
		            echo "".$line[0]."";  // 最初
		         }else{
		            echo ",".$line[0].""; // 2つ目以降
		         }
		      }
		   }
		?>];

		var kensa_i = [<?php
		   $filepath = "./count.csv";
		   $file = new SplFileObject($filepath); 
		   $file->setFlags(SplFileObject::READ_CSV); 
		   foreach ($file as $line) {
		      if (!empty($line[0])) { //フィールドデータのないレコードは除外
		         if ($line[0] == '1996') {
		            echo "".$line[1]."";  // 最初
		         }else{
		            echo ",".$line[1].""; // 2つ目以降
		         }
		      }
		   }
		?>];

		var kensa_d = [<?php
		   $filepath = "./count.csv";
		   $file = new SplFileObject($filepath); 
		   $file->setFlags(SplFileObject::READ_CSV); 
		   foreach ($file as $line) {
		      if (!empty($line[0])) { //フィールドデータのないレコードは除外
		         if ($line[0] == '1996') {
		            echo "".$line[2]."";  // 最初
		         }else{
		            echo ",".$line[2].""; // 2つ目以降
		         }
		      }
		   }
		?>];

		var kensa_f = [<?php
		   $filepath = "./count.csv";
		   $file = new SplFileObject($filepath); 
		   $file->setFlags(SplFileObject::READ_CSV); 
		   foreach ($file as $line) {
		      if (!empty($line[0])) { //フィールドデータのないレコードは除外
		         if ($line[0] == '1996') {
		            echo "".$line[3]."";  // 最初
		         }else{
		            echo ",".$line[3].""; // 2つ目以降
		         }
		      }
		   }
		?>];

      onload = function(){

        var ctx = document.getElementById("kensa_count").getContext("2d");
        var x_start = 60;
        var y_start = 607;
        var x_width = (840 - x_start * 2) / imax;
        var x_txt_top = 88;
        var x_txt_top2 = 626;
        var y_txt_top = 280;
        var y_txt_top2 = 440;
        var year_xx = 0;
        var year_yy = 0;
        var yt = 20;	// 縦方向のブロック数
        var ytc = yt /2 ;	// 縦方向のカウント
        var bh = 112;	// ブロックの高さ
        
        ctx.font = "22px Meiryo";
        ctx.fillText("年度別 検査件数 推移グラフ", 288, 32);

        //背景(四角の背景色)
        for(i = 0 ; i <= ytc ; i++ ) {
        ctx.beginPath();
          ctx.fillStyle = 'beige';
          if(i<ytc){
            ctx.fillRect(x_start,y_start-(bh/4)-(bh/4*i)-(bh/4*i),x_width*(imax+1),bh/4);
          }
          ctx.fillStyle = 'honeydew';
          if(i<ytc){
            ctx.fillRect(x_start,y_start-(bh/4)-(bh/4)-(bh/4*i)-(bh/4*i),x_width*(imax+1),bh/4);
          }
        }
        //背景(水平線)
        for(i = 0 ; i <= yt ; i++ ) {
          ctx.beginPath();
          ctx.strokeStyle = '#aaa';
          ctx.lineWidth = 1;
          ctx.moveTo(x_start+(x_width*0),y_start-bh/4*i)
          ctx.lineTo(x_start+(x_width*(imax+1)),y_start-bh/4*i);
          ctx.stroke();
        }
        //背景(垂直線)
        for(i = 0 ; i <= imax ; i++) {
          ctx.beginPath();
          ctx.strokeStyle = '#aaa';
          ctx.lineWidth = 1;
          ctx.moveTo(x_start+(x_width*(i+1)),y_start-(bh/4*yt))
          ctx.lineTo(x_start+(x_width*(i+1)),y_start);
          ctx.stroke();
        }
        //横軸
          ctx.beginPath();
          ctx.strokeStyle = '#000';
          ctx.lineWidth = 1;
          ctx.moveTo(x_start,y_start)
          ctx.lineTo(x_start+(x_width*(imax+1)),y_start);
          ctx.stroke();
        
        //縦軸
          ctx.beginPath();
          ctx.moveTo(x_start,y_start)
          ctx.lineTo(x_start,y_start-(bh/4*yt));
          ctx.stroke();
        
        for(i = 0 ; i <= (imax/2) ; i++) {
        //背景(横軸下部の単位・・・年)
          ctx.font = "14px Meiryo";
          ctx.fillStyle = 'black';
          year_xx = (kensa_year[i*2]-1900);
          year_yy = year_xx;
          if(year_xx>=100){ year_yy = (kensa_year[i*2]-1900-100); }
				 if(year_yy<10){ year_yy = "0" + year_yy; }
			    ctx.fillText("'" + year_yy , x_start+(x_width*i*2) - 12, y_start +24);
        }
        //背景(縦軸左側の単位)
        for(i = 0 ; i <= ytc ; i++) {
          ctx.fillStyle = 'rgb(17,43,116)';
          ctx.textAlign = 'right';
          ctx.fillText(addFigure(200*i), 20+32, y_start-bh/2*i+4);
        }
        //説明の背景
          ctx.beginPath();
          ctx.fillStyle = '#ddd';
          ctx.fillRect(x_txt_top -10,y_txt_top -20,170,54);
          ctx.fillRect(x_txt_top2 -10,y_txt_top2 +10,170,30);
        
        //胃内視鏡検査
        for(i = 0 ; i <= imax ; i++) {
          ctx.beginPath();
          ctx.fillStyle = 'rgb(17,43,116)';
          ctx.arc(x_start+(x_width*i),y_start-((kensa_i[i])/4*bh/100),3,0,Math.PI*2,false);
          ctx.fill();
        }
        for(i = 0 ; i <= (imax-1) ; i++) {
          ctx.beginPath();
          ctx.strokeStyle = 'rgb(17,43,116)';
          ctx.lineWidth = 2;
          ctx.moveTo(x_start+(x_width*i),y_start-((kensa_i[i])/4*bh/100))
          ctx.lineTo(x_start+(x_width*(i+1)),y_start-((kensa_i[(i+1)])/4*bh/100));
          ctx.stroke();
        }
        ctx.beginPath(); ctx.arc(x_txt_top,y_txt_top - 4,3,0,Math.PI*2,false); ctx.fill();
        ctx.beginPath(); ctx.arc(x_txt_top + 30,y_txt_top - 4,3,0,Math.PI*2,false); ctx.fill();
        ctx.beginPath(); ctx.moveTo(x_txt_top,y_txt_top - 4); ctx.lineTo(x_txt_top + 30,y_txt_top - 4); ctx.stroke();
        ctx.font = "16px Meiryo";
        ctx.textAlign = 'left';
        ctx.fillText("胃内視鏡検査", x_txt_top + 40,y_txt_top);   

        //大腸内視鏡検査
        for(i = 0 ; i <= imax ; i++) {
          ctx.beginPath();
          ctx.fillStyle = 'orangered';
          ctx.arc(x_start+(x_width*i),y_start-((kensa_d[i])/4*bh/100),3,0,Math.PI*2,false);
          ctx.fill();
        }
        for(i = 0 ; i <= (imax-1) ; i++) {
          ctx.beginPath();
          ctx.strokeStyle = 'orangered';
          ctx.lineWidth = 2;
          ctx.moveTo(x_start+(x_width*i),y_start-((kensa_d[i])/4*bh/100))
            ctx.lineTo(x_start+(x_width*(i+1)),y_start-((kensa_d[(i+1)])/4*bh/100));
          ctx.stroke();
        }
        ctx.beginPath(); ctx.arc(x_txt_top2,y_txt_top2 +30 -4,3,0,Math.PI*2,false); ctx.fill();
        ctx.beginPath(); ctx.arc(x_txt_top2 + 30,y_txt_top2 +30 -4,3,0,Math.PI*2,false); ctx.fill();
        ctx.beginPath(); ctx.moveTo(x_txt_top2,y_txt_top2 +30 -4); ctx.lineTo(x_txt_top2 + 30,y_txt_top2 +30 -4); ctx.stroke();
        ctx.fillText("大腸内視鏡検査", x_txt_top2 + 40,y_txt_top2 +30);   

        //腹部超音波検査
        for(i = 0 ; i <= imax ; i++) {
          ctx.beginPath();
          ctx.fillStyle = 'green';
          ctx.arc(x_start+(x_width*i),y_start-((kensa_f[i])/4*bh/100),3,0,Math.PI*2,false);
          ctx.fill();
        }
        for(i = 0 ; i <= (imax-1) ; i++) {
          ctx.beginPath();
          ctx.strokeStyle = 'green';
          ctx.lineWidth = 2;
          ctx.moveTo(x_start+(x_width*i),y_start-((kensa_f[i])/4*bh/100))
            ctx.lineTo(x_start+(x_width*(i+1)),y_start-((kensa_f[(i+1)])/4*bh/100));
          ctx.stroke();
        }
        ctx.beginPath(); ctx.arc(x_txt_top,y_txt_top +24 -4,3,0,Math.PI*2,false); ctx.fill();
        ctx.beginPath(); ctx.arc(x_txt_top + 30,y_txt_top +24 -4,3,0,Math.PI*2,false); ctx.fill();
        ctx.beginPath(); ctx.moveTo(x_txt_top,y_txt_top +24 -4); ctx.lineTo(x_txt_top + 30,y_txt_top +24 -4); ctx.stroke();
        ctx.fillText("腹部超音波検査", x_txt_top + 40,y_txt_top +24);   

    }

    //-->  
    </script>
  </head>
  <body style="margin:0; padding:0;">
  		<div  style="text-align: center;">
			<canvas id="kensa_count" width="840" height="652"><img src="./kensa_count_2016.png" alt="kensa_count_2016.png" hspace="0" border="0" vspace="0" width="840" height="652"></canvas>
		</div>
  </body>
</html>