Apples To Oranges ? San Francisco Bay Area Visual and Experience Design Studio

CSSオンリーでクールなグラフを書くサンプル集。
3つほど紹介されていてどれもクールで実用的。

1. まず、次のようなグラフを書くサンプル。

実際のHTMLコード

<style>
    .graph {
        position: relative; /* IE is dumb */
        width: 200px;
        border: 1px solid #B1D632;
        padding: 2px;
    }
    .graph .bar {
        display: block;
        position: relative;
        background: #B1D632;
        text-align: center;
        color: #333;
        height: 2em;
        line-height: 2em;           
    }
    .graph .bar span { position: absolute; left: 1em; }
</style>
<div class="graph">
    <strong class="bar" style="width: 24%;">24%</strong>
</div>

CSSを取ると凄くシンプルなHTMLになっていろんなところで使えそうですね。
CSSもシンプルなので、なかなか実用的におもえます。

2. 次に、次のようなメーター風グラフを書くサンプル。

<style>
    dl {
        margin: 0;
        padding: 0;                    
    }
    dt {
        position: relative; /* IE is dumb */
        clear: both;
        display: block;
        float: left;
        width: 104px;
        height: 20px;
        line-height: 20px;
        margin-right: 17px;             
        font-size: .75em;
        text-align: right;
    }
    dd {
        position: relative; /* IE is dumb */
        display: block;                
        float: left;    
        width: 197px;
        height: 20px;
        margin: 0 0 15px;
        background: url("g_colorbar.jpg");
     }
     * html dd { float: none; }
    /* IE is dumb; Quick IE hack, apply favorite filter methods for
    wider browser compatibility */

     dd div {
        position: relative;
        background: url("g_colorbar2.jpg");
        height: 20px;
        width: 75%;
        text-align:right;
     }
     dd div strong {
        position: absolute;
        right: -5px;
        top: -2px;
        display: block;
        background: url("g_marker.gif");
        height: 24px;
        width: 9px;
        text-align: left;
        text-indent: -9999px;
        overflow: hidden;
     }
</style>
<dl>
    <dt>Love Life</dt>
    <dd>
        <div style="width:25%;"><strong>25%</strong></div>
    </dd>
    <dt>Education</dt>
    <dd>
        <div style="width:55%;"><strong>55%</strong></div>
    </dd>
    <dt>War Craft 3 Rank</dt>
    <dd>
        <div style="width:75%;"><strong>75%</strong></div>
    </dd>
</dl>

画像を三種類使っているので１，２，３とダウンロードして使えます。

3. 今度はカラフルでカッコいい棒グラフのサンプル。

<style>
    #vertgraph {                   
        width: 378px;
        height: 207px;
        position: relative;
        background: url("g_backbar.gif") no-repeat;
    }
    #vertgraph ul {
        width: 378px;
        height: 207px;
        margin: 0;
        padding: 0;
    }
    #vertgraph ul li { 
        position: absolute;
        width: 28px;
        height: 160px;
        bottom: 34px;
        padding: 0 !important;
        margin: 0 !important;
        background: url("g_colorbar3.jpg") no-repeat !important;
        text-align: center;
        font-weight: bold;
        color: white;
        line-height: 2.5em;
    }

    #vertgraph li.critical { left: 24px; background-position: 0px bottom !important; }
    #vertgraph li.high { left: 101px; background-position: -28px bottom !important; }
    #vertgraph li.medium { left: 176px; background-position: -56px bottom !important; }
    #vertgraph li.low { left: 251px; background-position: -84px bottom !important; }
    #vertgraph li.info { left: 327px; background-position: -112px bottom !important; }
</style>
<div id="vertgraph">
    <ul>
        <li class="critical" style="height: 150px;">22</li>
        <li class="high" style="height: 80px;">7</li>
        <li class="medium" style="height: 50px;">3</li>
        <li class="low" style="height: 90px;">8</li>
        <li class="info" style="height: 40px;">2</li>
    </ul>
</div>

これも画像を2種類使っています。１，２が使えます。
これもなかなかシンプルなＨＴＭＬですね。結構なCSSテクニックが感じられます。

グラフといえばGDで描画することを考えがちですが、CSSだけでもこれだけ美しいグラフを描画できるのに関心。

関連エントリ
JavaScriptでグラフを描画出来るライブラリ『WebFX』
PHPで画像を使わず、HTMLでグラフを描画するライブラリ:HTML-GRAPHS
ミニグラフ作成ライブラリSparkline
PearのImage_Graphのグラフ描画サンプル