[CSS]棒グラフのデータを重ねて表示するスタイルシート

the wojo groupから、棒グラフのデータを重ねて表示するスタイルシートを紹介します。

CSS Stacked Bar Graphs
demo

こんなグラフを見たら、「実装は画像」と思ってしまいますが、テキストや色などの修正が手軽であるという利点は大きいです。

実装にはulとdlが使用されており、各項目やデータの値はテキストのため簡単に変更ができます。

デモでは棒グラフを二つ重ねていますが、増やすことも可能でした。

三つに増やしたデモのキャプチャ

HTML

赤色の「21」を四行目に追加。classは「sub2」を設定。

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

CSS

「csschart.css」のL.77あたりに下記を追加。
赤色の背景画像（subbar2.png）も作成します。

dl#csschart .sub2{
	margin-left:-33px;
}
dl#csschart .sub2 span{
	background:url(../images/subbar2.png) repeat-y;
}

Post on:2008年12月11日