[jQuery Horizontal Bar Graphライブラリ] 横棒グラフを表示する
説明
jQuery Horizontal Bar Graphライブラリで横棒グラフを表示するには$()でグラフデータを内包しているdlタグを指定します。dlタグのdtにデータの項目名、ddにデータを指定します。ddが複数ある場合は1つの横棒グラフに複数の項目が入ることになります（色分けもできます）。
グラフ表示に必要なスタイルシート（hbg-bar、hbg-title）を定義しておきます。設定が終わったらhorizontalBarGraph()メソッドを呼び出します。この時にオプションパラメータでintervalを指定してください。これを指定しなくても表示されますが、グラフのサイズが小さすぎたり大きすぎたりするのを防ぐためです。
サンプルプログラム
【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="css/graph.css" type="text/css" media="all">
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.horiz-bar-graph.js"></script>
<script type="text/javascript" src="js/sample.js"></script>
</head>
<body>
<h1>jQuery Horizontal Bar Graphで横棒グラフを描く</h1>
<dl id="DigitalCamera" title="今月のデジカメ販売シェア">
<dt>CANON</dt><dd>30.5</dd>
<dt>NIKON</dt><dd>28</dd>
<dt>SONY</dt><dd>12.5</dd>
<dt>Panasonic</dt><dd>5</dd>
<dt>その他</dt><dd>14</dd>
</dl>
</body>
</html>
【sample.js】
$(function(){
$("#DigitalCamera").horizontalBarGraph({
interval : 0.1
});
});