棒グラフを簡単に表示できる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>

サンプル

2006
66
11
23
2007
20
41
39
2008
17
12
71
2009
11
8
81

Javascriptサンプルページ一覧
skuare.net