テーブル内に棒グラフを作る方法

質問

テーブルの数値を読み込んで、そのテーブルにグラフを表示したいのですが、
方法がわかりません。

具体的には以下のサイトとほぼ同じようにテーブル内にグラフを作りたいです。
ttp://2ch.logpo.jp/

宜しくお願いします。

回答No.1

mikemike7 · ベストアンサー

参考のページを見れば分かる気もしますが...。
誰も回答していないので、
HTML・CSSは得意ではありませんが、書いてみます。
#おそらく参考ページとは作成方法が異なります。

CSS部
table{
border-collapse: collapse;
border: solid 1px #000000;
}
td{
border: solid 1px #000000;
}
.box{
position: relative;
}
.graph{
position: absolute;
z-index: 1;
display: block;
height: 10px;
background-color: #cccccc;
}
.text{
position: relative;
z-index: 2;
}

HTML部
<table>
<tr><td>
<div class="box">
<div class="graph" style="width: 85%;"></div>
<div class="text">OKWave</div>
</div>
</td></tr>
<tr><td>
<div class="box">
<div class="graph" style="width: 60%;"></div>
<div class="text">教えて！goo</div>
</div>
</td></tr>
<tr><td>
<div class="box">
<div class="graph" style="width: 48%;"></div>
<div class="text">Yahoo!知恵袋</div>
</div>
</td></tr>
</table>

説明
どこまでHTML・CSSがおわかりかわからないですが、

<div class="graph" style="width: **%;"></div>
の部分がグラフ部分なので、width: 数値%;
として伸ばしたい長さの値をそれぞれ指定します。
%で指定していますが、pxでも何でも良いです。

グラフのバーを画像にしたい。
縦幅を変更したい。
位置をずらしたい。
という場合には、
.graph{
ここ
}
を修正、追記します。

お礼

これです！　ありがとうございます！
無事できたのですが、少し疑問があったので質問させてください。

.text{
position: relative;
z-index: 2;
}

ここでの『position: relative;』はなぜ必要なのでしょうか？
z-index: 2;で優先順位は記述しているので
必要ないと思って削ったら表示されませんでした。

もし宜しければご返答頂けるとうれしいです。

回答No.2

mikemike7

>ここでの『position: relative;』はなぜ必要なのでしょうか？
まず、z-index: 2;をつけなければなりません。
そうしないとグラフーのバーに文字が隠れてしまいます。

z-indexは、postion: static以外でないと無効になるので、
relativeを指定しています。

お礼

なるほど、勉強になりました。
ご丁寧にありがとうございました！