TD内で画像を重ねて表示する方法
---------------------------------------------------------------------------
<![CDATA[
「ネットで水やり」にてセンサー測定値と比較用データを棒グラフで重ねる方法である。
--------------------------------------------------------------------------------
#!/usr/bin/perl
# ----------------------------------------------------------------
# <TD 内の枠内で 2つの棒グラフを重ねて表示する
# １つの画像は一部透明処理されている
#
# 基本形の例：<td valign="bottom" width="60" height="170" style="position:relative;">
# <img src="$gif_A" width="10" height="150" title="150" style=\"position:absolute; bottom:0px; left:0>
# ----------------------------------------------------------------
$gif_rain_m_G = 'graph_rain_m.gif';
$gif_blu_G = 'graph_blu.gif';
$gif_yel_T_G = 'graph_yel_T.gif';
$gif_red_T_G = 'graph_red_T.gif';
###################################################################
$title_name = "棒グラフのテスト";
$target_ymd= 20180628;
$Myyyymmnn = sprintf("TD内で画像を重ねる<BR>%4d年%2d月%2d日",substr($target_ymd,0,4),substr($target_ymd,4,2),substr($target_ymd,6,2));
$i=0;
$j=0;
$xx_d_max = 5; # 表示倍率（表示調整）
$ar_A_water0=(); # test data用アレイ
$ar_B_water0=(); # test data用アレイ
$g1_height = 170; # 画像表示部のTDの高さ
$w_th = 10; # 画像表示部のTDの１つの幅
# print <<EOF 以下に一行の改行が必要
print <<EOF_header;
<HTML><HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<FONT color="#ffffff"><title>title_name</title>
</HEAD>
<!-- 以下に一行の改行が必要
-->
<BODY bgcolor="#1568ce" background="b1_color.jpg" link="#ffff00" text="#ffffff" vlink="#ffff00" alink="#ffff00">
<table border="3" cellspacing="2">
<tr>
<td bgcolor="\#fffff0\" align="center">
<font size="4" color="#000000">$Myyyymmnn</font><BR>
<font size="1" color="#000000">
<table border="1" cellspacing="0" cellspacing="1">
<tr>
<td valign="bottom" width="20" height="$g1_height">
<FONT size="-2" color="#000000" align="center">０%</FONT>
</td>
EOF_header
$L2_D =500;
$L1_D =400;
$L1_up=10;
for( $i=0 ; $i < 5 ; $i++ ){
print "<td valign=\"bottom\" width=\"60\" height=\"$g1_height\"style=\"position:relative;\" >";
$TD_w= 0;
for( $j=0 ; $j < 6 ; $j++ ){
$L1_D=$L1_D+$L1_up; # test data
$ar_A_water0[$i][$j]=$L1_D; # test date
$ar_B_water0[$i][$j]=$L2_D; # test date
$xx = $ar_A_water0[$i][$j];
$bar = int($xx / $xx_d_max);
$SS = $ar_B_water0[$i][$j] / $xx_d_max; # 比較用データを表示位置に調整
$ALT_C = $ar_A_water0[$i][$j];
$ALT_S = $ar_B_water0[$i][$j];
if($ar_A_water0[$i][$j] < $ar_B_water0[$i][$j]){ # 比較値より小さい時：乾燥
# $gif_G = $gif_blu_G;
print "<img src=\"$gif_yel_T_G\" width=\"$w_th\" height=\"$SS\" title=\"$ALT_S\" style=\"position:absolute; bottom:0px; left:$TD_w\">";
print "<img src=\"$gif_blu_G\" width=\"$w_th\" height=\"$bar\" title=\"$ALT_C\" style=\"position:absolute; bottom:0px; left:$TD_w\">";
}
else{
# $gif_G = $gif_rain_m_G;
# title表示($ALT_C)の為短い方を後から表示させるように順番を入れ替える
print "<img src=\"$gif_rain_m_G\" width=\"$w_th\" height=\"$bar\" title=\"$ALT_C\" style=\"position:absolute; bottom:0px; left:$TD_w\">";
print "<img src=\"$gif_yel_T_G\" width=\"$w_th\" height=\"$SS\" title=\"$ALT_S\" style=\"position:absolute; bottom:0px; left:$TD_w\">";
}
$TD_w = $TD_w + $w_th;
}
print "</td>";
}
print "</tr>";
print "</table>";
print "</td>";
print"</tr>";
print"</table>";
print "</BODY></HTML>";
exit;
</PLAINTEXT>
<P><BR>
</P>
</BODY>
</HTML>]]></plaintext></body></div>