Movable Type 備忘録
CSSでバーグラフ表示
こんにちわ^^
関東は梅雨入りしましたが、今日はとってもいい天気でしたよ (●´∀`●)
予報では明日も天気がいいとのこと。
なので、明日は天気良かったらマンガ喫茶行って読みかけの本を読みに行こうと思う今日この頃です (●>∀<●)
さて、今回は CSS を使って各カテゴリに属するエントリ数をバーグラフ表示させてみたいと思います。
カスタマイズ
わたしのサイトでは、投稿したエントリ数は771件になります。
そして、各カテゴリに属するエントリ数は以下の通りです。
全エントリ数: 771
- Analytics<アクセス解析> [2]
- Books<書籍> [8]
- Customize<カスタマイズ> [235]
- Install<インストール> [17]
- JavaScript<スクリプト> [26]
- jQuery
[47] - Moblog<雑記> [31]
- mootools
[2] - MovableType<ムーバブルタイプ> [67]
- Plugins<プラグイン> [25]
- prototype
[22] - Rental Server<レンタルサーバ> [9]
- Template<テンプレート> [61]
- Tips<小技> [20]
- Tools<ツール> [153]
- Topic<トピック> [33]
- Troubleshooting<トラブルシューティング> [33]
これをバーグラフにして表示すると以下のようになります。
全エントリ数: 771
- 0%
[002] Analytics - 1%
[008] Books - 30%
[235] Customize - 2%
[017] Install - 3%
[026] JavaScript - 6%
[047] jQuery - 4%
[031] Moblog - 0%
[002] mootools - 9%
[067] MovableType - 3%
[025] Plugins - 3%
[022] prototype - 1%
[009] Rental Server - 8%
[061] Template - 3%
[020] Tips - 20%
[153] Tools - 4%
[033] Topic - 4%
[033] Troubleshooting
上記のように、動的にグラフ表示させるには単純な計算式でできます。
まずグラフイメージを用意します。
bargraph.png上記イメージの横幅は左右ボーダーサイズ(=1px)を含めて 123px になります。
なので、実際に表示目盛りとして表示される部分は 121px ですね。次にグラフの目盛りイメージを用意します。
bargraph_back.png上記イメージの横幅は 242px です。グラフイメージサイズ(=121px) × 2の幅を用意します。
そして、上記サンプルに示したカテゴリのエントリ数をグラフ表示したタグは以下のようになります。
<?php $barsize = 123/*px*/; $entry_all = <$MTBlogEntryCount$>; ?><ul><MTCategories><li><?php $per = round(<$MTArchiveCount$> / $entry_all, 2); $graph = $barsize - $barsize * $per - 1; ?><span><?php echo ($per * 100); ?>%</span><span><img src="http://●●●/bargraph.png" alt="<?php echo $per * 100 ?>%"class="bargraph" style="background-position:-<?php echo $graph ?>px 0;" /></span><span>[<$MTArchiveCount zero_pad="3"$>] <$MTCategoryLabel decode_html="1" remove_html="1"$></span></li></MTCategories></ul>
青い字の部分はバーグラフの横幅になります。
赤い字の部分は、全エントリ数に対する比率を計算しています。計算式は以下のようになります。カスタマイズ・カテゴリの場合
0 = カスタマイズ・カテゴリのエントリ数(=) / 全エントリ数(=771)
計算結果を round() 関数で小数点第2位で切り上げる、0 となります。
そして、緑の字の部分は計算した比率からグラフの長さを計算しています。計算式は以下のようになります。カスタマイズ・カテゴリの場合
グラフの長さ(=122) = グラフイメージサイズ(=123) - グラフイメージサイズ(=123) * 上記計算結果(=0) - 1
最後にカーキ色の部分でグラフイメージの位置として、グラフの長さ(=63.206)分をマイナス座標指定してあがることで、動的にグラフ表示することができます。
最後にグラフイメージの CSS です。
img.bargraph {background: white url(http://●●●/bargraph_back.png) top left no-repeat;padding: 0;margin: 5px 0 0 0;background-position: 1px 0;}
以上で動的にグラフを表示させることができました。
ここでは投稿された全エントリに対する各カテゴリに属する割合をグラフで表示させてみましたが、投稿時間をグラフ表示させてもおもしろいかも、です ( ̄∇ ̄)b
そそ、あらかじめ断っておきますと、IE6 ではこのカスタマイズは使えません。
てか、そもそも IE6 は アルファ・チャンネルの PNG 画像をサポートしていないので…あしからず♪
Trackback Pings(0)
No trackbacks found.
Comments(0)
No comments found.




Post a Comment