Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

CSSでバーグラフ表示

Jun172007
Author: bzbell
Categories: Tools
Tags: CSS
Social Bookmark

Prev Page: walk2web
Next Page: あわせて読みたい

こんにちわ^^

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

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

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

カスタマイズ

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

全エントリ数: 735

アクセス解析 [2]
書籍 [6]
カスタマイズ [233]
インストール [17]
スクリプト [26]
jQuery [44]
雑記 [26]
mootools [2]
ムーバブルタイプ [63]
プラグイン [18]
prototype [22]
レンタルサーバ [9]
テンプレート [61]
小技 [19]
ツール [143]
トピック [29]
トラブルシューティング [33]

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

全エントリ数: 735

0% [002] Analytics（アクセス解析）
1% [006] Books（書籍）
32% [233] Customize（カスタマイズ）
2% [017] Install（インストール）
4% [026] JavaScript（スクリプト）
6% [044] jQuery（jQuery）
4% [026] Moblog（雑記）
0% [002] mootools（mootools）
9% [063] MovableType（ムーバブルタイプ）
2% [018] Plugins（プラグイン）
3% [022] prototype（prototype）
1% [009] Rental Server（レンタルサーバ）
8% [061] Template（テンプレート）
3% [019] Tips（小技）
19% [143] Tools（ツール）
4% [029] Topic（トピック）
4% [033] Troubleshooting（トラブルシューティング）

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

まずグラフイメージを用意します。
bargraph.png

上記イメージの横幅は左右ボーダーサイズ(=1px)を含めて 123px になります。
なので、実際に表示目盛りとして表示される部分は 121px ですね。
次にグラフの目盛りイメージを用意します。
bargraph_back.png

上記イメージの横幅は 242px です。グラフイメージサイズ(=121px) × 2の幅を用意します。
そして、上記サンプルに示したカテゴリのエントリ数をグラフ表示したタグは以下のようになります。
1. <?php $barsize = 123/*px*/; $entry_all = <$MTBlogEntryCount$>; ?>
2. <ul>
3. <MTCategories>
4. <li><?php $per = round(<$MTArchiveCount$> / $entry_all, 2); $graph = $barsize - $barsize * $per - 1; ?>
5. <?php echo ($per * 100); ?>%<img src="http://●●●/bargraph.png" alt="<?php echo $per * 100 ?>%"
6. class="bargraph" style="background-position:-<?php echo $graph ?>px 0;" />
7. [<$MTArchiveCount zero_pad="3"$>] <$MTCategoryLabel decode_html="1" remove_html="1"$></li>
8. </MTCategories>
9. </ul>
青い字の部分はバーグラフの横幅になります。
赤い字の部分は、全エントリ数に対する比率を計算しています。計算式は以下のようになります。

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

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

計算結果を round() 関数で小数点第2位で切り上げる、0.32 となります。
そして、緑の字の部分は計算した比率からグラフの長さを計算しています。計算式は以下のようになります。

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

グラフの長さ(=82.64) = グラフイメージサイズ(=123) - グラフイメージサイズ(=123) * 上記計算結果(=0.32) - 1

最後にカーキ色の部分でグラフイメージの位置として、グラフの長さ(=63.206)分をマイナス座標指定してあがることで、動的にグラフ表示することができます。
最後にグラフイメージの CSS です。
1. img.bargraph {
2. background: white url(http://●●●/bargraph_back.png) top left no-repeat;
3. padding: 0;
4. margin: 5px 0 0 0;
5. background-position: 1px 0;
6. }