先日、検査件数のページを更新しました。
・・・しばらく眺めていたら、グラフの右側の余白が目に付き、気になって仕方ない。
・・・検査件数のグラフを拡大することにしました。
このグラフは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">
<!--
//３桁区切りを付加する関数
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>