このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

前回のPHPで簡易アンケート にパーセンテージ表示するバーの設置方法です。

ではバーの作成を

HTML

 <p class="r4">【男性】%<span class="bar"></span></p>
<p class="r5">【女性】%<span class="bar"></span></p>

CSS

#yesNoArea .bar{
display:block;
width:100%;
height:15px;
background:#03C;
}
#yesNoArea .r5 .bar{
background:#F03;
}

前回のファイルにこれらのHTML,CSSを追加。

このような表示になります。

では男性と女性の%の数値を求めましょう。

PHP

$manPar = ($yes/$count*100);
$manPar = number_format($manPar, 1, '.', '');
$womanPar = (($count-$yes)/$count*100);
$womanPar = number_format($womanPar, 1, '.', '');

男性の%は 男性数値÷トータル数値×100 で求められます。

気をつける点は、このままだと、ダァーと小数点以下の数値が求められてしまうので、

number_format関数で

number_format($manPar, 1, '.', '');

小数点1桁にしております。

また女性の%数値の計算式は

トータル数値-男性数値÷トータル数値*100 で求められます。

男性の%数値同様number_format関数で小数点1桁にします。

また、round関数でも同様に求められます。

round($manPar,1)

それらをHTML反映

HTML

<p class="r4">【男性】<?php echo $manPar;?>%<span class="bar" style="width:<?php echo $manPar;?>%;"></span></p>
<p class="r5">【女性】<?php echo $womanPar;?>%<span class="bar" style="width:<?php echo $womanPar;?>%;"></span></p>

それぞれの数値表示にecho関数で表示させ、表示バー部分はインラインスタイルシートで

widthの指定を%で行い、そのままecho関数で値を読み込めば完成！

デモページはこちらから