もっと棒グラフらしく　縦向き棒グラフを作りたい(3ページ目)

画像の下に文字を表示

グラフの下に文字を表示するにはどうすれば良いでしょうか？
単純に、棒グラフを表示させた次の行に文字を書いても良いのですが、それだと、棒と文字の位置が一致してくれるとは限りません。

というわけで、ここは、tableを使うのがよいでしょう。

tableで縦向き棒グラフを整形

ここでは、次のような棒グラフを例にしてご説明致します。

ちゃんと、棒とその下の文字の位置がぴったり合っていますね。
これは、次のようにして作成しています。

このような表組みを作成して、線の太さを 0 に設定すれば、綺麗に揃った棒グラフに見えるわけです。
簡単ですね。

しかし、普通に表組みを作成しただけでは、次のようになってしまいます。

画像が、セルの中央に寄ってしまって、棒グラフにならなくなってしまうのですね。
これを防ぐために、セルを構成するtd要素（<td>タグ）に、valign属性を加えて、<td valign="bottom">とする必要があります。 こうすることで、セルの中身が下に寄るようになります。

それでは、HTMLソースをご紹介致しましょう。

<table border="0" cellspacing="1" cellpadding="0">
<tr>
<td valign="bottom"><img src="graph.gif" width="10" height="75"></td>
<td valign="bottom"><img src="graph.gif" width="10" height="54"></td>
<td valign="bottom"><img src="graph.gif" width="10" height="41"></td>
<td valign="bottom"><img src="graph.gif" width="10" height="62"></td>
<td valign="bottom"><img src="graph.gif" width="10" height="62"></td>
<td valign="bottom"><img src="graph.gif" width="10" height="75"></td>
<td valign="bottom"><img src="graph.gif" width="10" height="80"></td>
</tr><tr>
<td><font size="1">日</font></td>
<td><font size="1">月</font></td>
<td><font size="1">火</font></td>
<td><font size="1">水</font></td>
<td><font size="1">木</font></td>
<td><font size="1">金</font></td>
<td><font size="1">土</font></td>
</tr>
</table>

<td>～</td>が、1つのセルです。その中に、棒グラフ画像を入れます。上記では、画像ファイル名は graph.gif になっています。ここは適宜書き換えて下さい。 「width="10"」の部分は、棒の横幅の指定で、全部10ピクセルになっています。ここを書き換えれば、横幅を変化させられます。

もっと長い文字を表示するには？

上記のサンプルでは、棒の下に表示している文字は1文字だけです。 下記のグラフのように、もっと多くの文字を表示するにはどうすれば良いでしょうか？

また、棒グラフ用の画像素材も次のページでダウンロード頂けます。

それでは、次のページへ！ →