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

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

デモのキャプチャ

CSS Stacked Bar Graphs
demo

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

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

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

デモのキャプチャ

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

HTML

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

CSS

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

sponsors

top of page

©2018 coliss