CSS3でグラフを作る手法はList of CSS3 Graph and Chart Techniquesにあるように色々公開されているんだけども、
ソースで見ると意味不明だったりするものが多いんで
それならテーブルをグラフにしちゃえばいいじゃんと思って試してみたのがコレです。
CSSでTableを折れ線グラフに変える – jsdo.it – share JavaScript, HTML5 and CSS
作り方
- tableとその中身をdisplay:blockにする
- theadの要素でx軸とy軸のベースを作る
- trで各ポイントの基準になるx軸とy軸の線を描く
- tr→x軸の線
- tr:before→y軸の線
- tr:after→y軸の数値
- thをx軸に配置
- tdでグラフの線を描く
- td→線
- :befor, :after→線両端の○
ベースと線に画像を使えばIEにも対応できるけど割愛。
表向き表示されないtrみたいな要素にも:beforeと:afterが使えます。
tableの要素はdisplay:tableとかになってるのでpositionを使うとおかしなことになるのですが
display:blockにしてしまえばdivと同じになるため、グラフを描くに必要な素材が不足する心配はありません。
この手法だと表とグラフ・グラフの種類を:targetやクラスの付与で切り替えたり出来るんで結構便利そうだと思いました。