[CSS]棒グラフのデータを重ねて表示するスタイルシート
the wojo groupから、棒グラフのデータを重ねて表示するスタイルシートを紹介します。
こんなグラフを見たら、「実装は画像」と思ってしまいますが、テキストや色などの修正が手軽であるという利点は大きいです。
実装にはulとdlが使用されており、各項目やデータの値はテキストのため簡単に変更ができます。
デモでは棒グラフを二つ重ねていますが、増やすことも可能でした。
三つに増やしたデモのキャプチャ
HTML
赤色の「21」を四行目に追加。classは「sub2」を設定。
CSS
「csschart.css」のL.77あたりに下記を追加。
赤色の背景画像（subbar2.png）も作成します。
Post on:2008年12月11日
Comments
日刊ウェブログ式
on 2010年5月24日
円グラフや棒グラフをエクセルじゃない方法で簡単に作成する方法まとめ
グラフ作成と言えばエクセルが思い浮かびますが、エクセルを持ってない、または開くのが面倒ということもあるかもしれません。というわけで…