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

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

使用方法
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」サンプル

sponsors

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

記事作成:
記事URL:

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