CSSでグラフ表示

サーバの監視用途で、Perlでコマンドを書いたのだが、どうしてもGUIでの表示。できればWebでの表示をご希望とのこと。テキストで表示画面を作成したのだが、どうも見づらい。出来ればグラフで視覚的に表示したい。追加ソフト無しでグラフを表示したい。後々の管理を考えると、出来れば画像ファイルも置きたくない。（cgi１本で実現したい）
と言うことで、頑張ってCSSだけで、グラフを表示することにした。
結果から書くと、意外と簡単。

<style> .graph { position: relative; width: 400px;\n"; border: 1px solid darkslateblue; padding: 2px; } .graph .bar { display: block; position: relative; background: hotpink; text-align: center; color: black; height: 1em; line-height: 1em; } .graph .bar span { position: absolute; left: 1em; } </style>

<html>
<div class="graph">
<strong class="bar" style="width: 100px>
50％</strong>
</div>
</html>


後はHTMLの100pxと50％の部分を適時書き換えればｏｋ。

ちなみに表示させると、こんな感じ




31%
1%

取りあえずはシンプルにグラフ化できたので、満足。