7.棒グラフ

参照 URL http://horiuchi.akira.ne.jp/cgi/giho-07.html
■概要  TV を見ていると、よく「○○を支持しますか?しませんか?」といった世論調査を行っています。 CGI ではこういったリアルタイムの調査をインターネット上で行うことができ、棒グラフ表示する ことができます。残念ながら HTML 標準機能では円グラフ表示はできませんが、棒グラフはテーブル タグを使って表示することができます。ここでは、1つの棒を1つのテーブルで表し、テーブル(棒グラフ) を更にテーブルで囲み全体のバランスをとっています。そのため、このように中央寄せをしても全体 のバランスが崩れることはありません。また、単独のテーブルタグで構成してありますので、外部サブ ルーチン化することもできます。 * データファイル "giho-07-kekka.txt" はブランクページから始めても大丈夫ですが、初期値として  「0,0,0」を入れておくと、0 人の表示ができます。 * データファイルには「書き込み」権限が必要です。  ■データファイルの変化
giho-07-kekka.txt
0,0,0
1,0,0
2,0,0
2,1,0
3,1,0
4,1,0
  ・
  ・
  ・
171,51,12
172,51,12
入力フォーム画面 giho-07.html
<HTML>
<HEAD>
<TITLE>Giho 07</TITLE>
</HEAD>
<BODY BGCOLOR="#7ffffe">
<FORM ACTION="giho-07.cgi" METHOD="POST">
<PRE>

<H2> 棒グラフ表示</H2>
<HR>

 今回の生徒会提案をあなたは支持しますか?

 <INPUT TYPE="radio" NAME="teian" VALUE="0" CHECKED>支持する <INPUT TYPE="radio" NAME=
"teian" VALUE="1">支持しない <INPUT TYPE="radio" NAME="teian" VALUE="2">どちらともいえない

<HR>
 <INPUT TYPE="submit" VALUE="送信">
</PRE>
</FORM>
</BODY>
</HTML>
CGI 画面 giho-07.cgi
#!/usr/local/bin/perl -Lsjis

require 'cgi-lib.pl';
&ReadParse(\%moji);

# 投票結果の読み込み
  open F, '+<giho-07-kekka.txt';
  @a = split /,/,<F>;

# 選択項目のカウント値を +1
  ++$a[$moji{teian}];

# 投票結果の書き込み
  $temp = join ",", @a;
  seek F,0,0;
  print F "$temp";
  close F;

# パーセント・棒の長さの計算
  $sum = $a[0] + $a[1] + $a[2]; 
  $p1 = int 100*$a[0]/$sum; $v1 = 3*$p1;
  $p2 = int 100*$a[1]/$sum; $v2 = 3*$p2;
  $p3 = int 100*$a[2]/$sum; $v3 = 3*$p3;

# 本文
print &PrintHeader;
print <<EOH;
<HTML>
<HEAD>
<TITLE>Giho 07</TITLE>
</HEAD>
<BODY BGCOLOR="#7ffffe">

<PRE>
<CENTER>
<H3> 棒グラフ表示</H3>

<TABLE CELLSPACING="0" CELLPADDING="3" STYLE="font-family:'MS ゴシック'; font-size:1.0em">
<CAPTION>回答数 $sum 人</CAPTION>

<TR><TD COLSPAN="3"> </TD></TR>
<TR><TD>支持する</TD>

<TD><TABLE CELLSPACING="0" CELLPADDING="5" STYLE="font-family:'MS ゴシック'; font-size:1.0em">
<TR><TD BGCOLOR="#8080ff" WIDTH="$v1"> </TD><TD>$p1 %</TD></TR>
</TABLE></TD><TR>

<TR><TD>支持しない</TD>
<TD><TABLE CELLSPACING="0" CELLPADDING="5" STYLE="font-family:'MS ゴシック'; font-size:1.0em">

<TR><TD BGCOLOR="#ff8080" WIDTH="$v2"> </TD><TD>$p2 %</TD></TR>
</TABLE></TD><TR>

<TR><TD NOWRAP>どちらともいえない </TD>
<TD><TABLE CELLSPACING="0" CELLPADDING="5" STYLE="font-family:'MS ゴシック'; font-size:1.0em">

<TR><TD BGCOLOR="#e7e896" WIDTH="$v3"> </TD><TD>$p3 %</TD></TR>
</TABLE></TD><TR>

<TR><TD COLSPAN="3"> </TD></TR>
<TR><TD>支持する</TD><TD COLSPAN="2">$a[0] 人</TD></TR>
<TR><TD>支持しない</TD><TD COLSPAN="2">$a[1] 人</TD></TR>
<TR><TD>どちらともいえない </TD><TD COLSPAN="2">$a[2] 人</TD></TR>

</TABLE>
</CENTER>
</PRE>

EOH
print &HtmlBot;