CSSで簡易バーグラフの表示

GA-PVcounter プラグインを作成した時に、アナリティクスデータを Google chart tools を使って表示する方法については先日紹介しましたが、CSSを使うことで簡易バーグラフを表示できるので紹介します

アナリティクスのページでは、折れ線グラフや円グラフ等のチャートが使用されているので、最初は下記の棒グラフも google chart tools で表示されているものと思っていました

CSS-chart

firebug で見てみると CSS を使って描画しているようです

基本的には、div タグに対して背景色を width (%) 指定するだけで棒グラフらしく見せています
ちょっとした棒グラフは、CSSでいいんだ 知らなかった (^_^;)

ということで検索してみると、沢山ヒットします

以前から使われている一般的なテクニックのようなので、あらためて紹介するまでもないのですが、自分用のメモとしてまとめておきます

頑張れば、かなり凝ったグラフも描画出来るようですが、通常は google chart tools 等を利用し、簡単にちょっとワンポイントとしてグラフっぽく見せたいときに利用したいと思います

アナリティクスのサイトのCSSと検索で見つけた下記参考サイトのCSSを元にやってみました

ほとんど参考サイトのCSSのままですが、アナリティクスサイトの表示と似たような雰囲気になるように、枠での囲みを止め、色と表示位置を調整しました

.graph {
    position: relative; /* IE is dumb */
    width: 50px;
    /*border: 1px solid #058DC7;*/
    padding: 2px;
}


.graph .bar {
    display: block;
    position: relative;
    background: #058DC7;
    text-align: left;
    color: #f0ffff;
    height: 1.5em;
    line-height: 1.5em;
    float: left;
    margin-right: 10px;
}
.graph .bar span { position: absolute; left: 1em; }

後は、表示したいところに下記のような div タグを記述して、PHPから $rate に背景色の幅割合、$pv にページビュー数, $ratestr にページビューの割合数を指定しています

<div class =’graph’><span class=’bar’ style=width:$rate%;></span> $pv $ratestr</div>

こんな感じの棒グラフっぽい表示となります

CSS-chartsample

手軽に使えるので、表示にワンポイントほしい時にちょうどいいです (^^)


まとめ記事紹介

search star user home refresh tag chevron-left chevron-right exclamation-triangle calendar comment folder thumb-tack navicon angle-double-up angle-double-down angle-up angle-down quote-left googleplus facebook instagram twitter rss