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

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

CSS Stacked Bar Graphs
demo

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

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

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

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

HTML

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

CSS

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