Movable Type 備忘録

CSSでバーグラフ表示

Jun172007
Author: bzbell
Categories: Customize
Tags: Bar Graph, CSS, Customize

Next Page: mootoolsでリッチなメニューを作る
Prev Page: メールフォームにファイルアップロード機能を付ける

こんにちわ^^

関東は梅雨入りしましたが、今日はとってもいい天気でしたよ (●´∀｀●)
予報では明日も天気がいいとのこと。

なので、明日は天気良かったらマンガ喫茶行って読みかけの本を読みに行こうと思う今日この頃です (●＞∀＜●)

さて、今回は CSS を使って各カテゴリに属するエントリ数をバーグラフ表示させてみたいと思います。

カスタマイズ

わたしのサイトでは、投稿したエントリ数は495件になります。
そして、各カテゴリに属するエントリ数は以下の通りです。

全エントリ数: 495

MovableType( ムーバブルタイプ ) [41]
Template( テンプレート ) [45]
Customize( カスタマイズ ) [252]
Install( インストール ) [16]
Troubleshooting( トラブルシューティング ) [25]
Tools( ツール ) [109]
Rental Server( レンタルサーバ ) [4]
Moblog( モブログ ) [17]
Books( 書籍 ) [1]

これをバーグラフにして表示すると以下のようになります。

全エントリ数: 495

8.3% [041] MovableType( ムーバブルタイプ )
9.1% [045] Template( テンプレート )
50.9% [252] Customize( カスタマイズ )
3.2% [016] Install( インストール )
5.1% [025] Troubleshooting( トラブルシューティング )
22% [109] Tools( ツール )
0.8% [004] Rental Server( レンタルサーバ )
3.4% [017] Moblog( モブログ )
0.2% [001] Books( 書籍 )

上記のように、動的にグラフ表示させるには単純な計算式でできます。

まずグラフイメージを用意します。
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, 3);
$graph = $barsize - $barsize * $per - 1; ?>
<?php echo ($per * 100); ?>%<img src="http://●●●/bargraph.png" alt="<?php echo $per * 100 ?>%" 
 class="bargraph" style="background-position:-<?php echo $graph ?>px 0;"
/>
 [<$MTArchiveCount zero_pad="3"$>] <$MTCategoryLabel decode_html="1" remove_html="1"$></li>
</MTCategories>
</ul>
```
青い字の部分はバーグラフの横幅になります。
赤い字の部分は、全エントリ数に対する比率を計算しています。計算式は以下のようになります。

カスタマイズ・カテゴリの場合

0= カスタマイズ・カテゴリのエントリ数(=) / 全エントリ数(=495)

計算結果を round() 関数で小数点第3位で切り上げると、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 画像をサポートしていないので…あしからず♪

参考：Bare Naked App » Displaying percentages