cssでグラフを描く

css beautyで紹介されていたCSS Stacked Bar Graphsという記事で、下の画像のような棒グラフをcssと(x)htmlだけ描く方法が公開されていました。

このグラフは、縦軸と横軸部分を<ul>、グラフ本体を<dl>で描いています。
縦軸・横軸は単純に<li>を並べているだけなので割愛。

グラフ本体のhtmlは以下のように指定していく。

<dl>
<dt>Mon</dt>
<dd class="p36"><span><b>36</b></span></dd>
<dd class="sub p30"><span><b>30</b></span></dd>
</dl>

.subがついているほうが前面のグラフになり、.p30や.p36で高さを指定しています。
cssの記述（一部）は以下の通り。

dl#csschart{
background:url(../images/bg_chart.gif) no-repeat 0 0;
width:454px;
height:360px;
padding-left:11px;
}
dl#csschart dt{
display:none;
}
dl#csschart dd{
position:relative;
float:left;
display:inline;
width:33px;
height:330px;
margin-top:22px;
}
dl#csschart span{
position:absolute;
display:block;
width:33px;
bottom:0;
left:0;
z-index:1;
color:#555;
text-decoration:none;
}
dl#csschart span b{
display:block;
font-weight:bold;
font-style:normal;
float:left;
line-height:200%;
color:#fff;
position:absolute;
top:5px;
left:3px;
text-align:center;
width:23px;
}
/* Styling the Bars. */
dl#csschart span{
height:50%;
background:url(../images/bar.png) repeat-y;
}
dl#csschart .sub{
margin-left:-33px;
}
dl#csschart .sub span{
background:url(../images/subBar.png) repeat-y;
}

dl#csschart .p0 span{height:0%}
dl#csschart .p1 span{height:1%}
dl#csschart .p2 span{height:2%}
dl#csschart .p3 span{height:3%}
dl#csschart .p4 span{height:4%}
dl#csschart .p5 span{height:5%}

/*This continues until 100%*/

曜日ごとに<dd>を並べ、左揃えにしています。

これだけで充分きれいなんですが、文字のサイズを大きくすると後ろにあるバーの数字が読めなくなったり、縦横軸の数字が重なってしまったりします。
heightやwidthをemで指定して、文字の拡大縮小に対応できるようにしたらいいのかな。

あと、何よりも致命的なのは、前に来ているバーのほうが大きい数字の場合、後ろにいるバーは見えなくなっちゃうんですよねｗ

全く同じ見た目でやろうとすると使えない方法になっちゃいますが、半分だけ重ねて、数字はちょっと離れたところに表示、のようにすれば「前年度との比較」みたいな棒グラフが簡単に描けちゃいますね。

作者のページで画像入りのファイルをダウンロードできるので、気になった方はどうぞ。

関連投稿

• 背景画像付きのボックス
  category: css tags: css.
• リストマーカーの表示位置を揃える
  category: css tags: css.
• display:inline-block; を使う
  category: css tags: css+inline-block+tips.
• デフォルトスタイルのリセット
  category: css tags: css+tips.

posted on 2008.12.11 12:50pm