skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

棒グラフを簡単に表示できるJavaScript「Horizontal Bar Graph in jQuery」

｜ ｜ ｜ ｜ ｜ ｜ ｜

棒グラフを作るのは手間ですが、jQueryプラグインの「jQuery Horizontal Bar Graph」を利用すると簡単に実現可能です。
またソース上に数値が残るので、SEOをある程度犠牲にしなくてすみそうです。

使用方法
jQuery Horizontal Bar Graphからjquery.horiz-bar-graph.jsをjQueryからjquery.jsをダウンロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.horiz-bar-graph.js"></script>
<script type="text/javascript">
$(function() {
$("#id名").horizontalBarGraph({
colors: ["#c22", "#999", "#2c2"], //色（要素分,で記述）
hoverColors: [ "#f33", "#ccc", "#6d6" ], //マウスオーバー色（要素分,で記述）
interval: 0.2
});
});
</script>
<style>
.hbg-bar { padding-left: 2px; color: #fff; background-color: #600; }
.hbg-bar, .hbg-title { margin-bottom: 1px; }
</style>

上記を記述後、以下のように数値を書いていけば完了です。
<dl title="タイトル" id="demo">
<dt>ラベル1</dt>
<dd>数値1</dd>
<dd>数値2</dd>
<dd>数値3</dd>
<dt>ラベル2</dt>
<dd>数値1</dd>
<dd>数値2</dd>
<dd>数値3</dd>
<!-- 以下個数分 -->
</dl>

棒グラフを簡単に表示できるJavaScript「Horizontal Bar Graph in jQuery」サンプル

記事作成：2009年12月16日

前の記事：画像を背景に100%で表示させるJavaScript「fullscreenr」
次の記事：面白法人カヤックのアプリ勉強会に行ってみたよ