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

テーブルの内容をグラフで表示するJavaScript「graphTable」

｜ ｜ ｜ ｜ ｜ ｜ ｜

テーブルで表組みを作って、それにあわせて画像でグラフを作る・・・
そんな作業は億劫です。
なので、jQueryプラグイン「graphTable」を使用して、楽をしましょう。

使用方法
graphTableからjquery.graphTable.jsをjQueryからjquery.js、flotからjquery.flot.jsをダウンロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript" src="jquery.graphTable-0.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#id名').graphTable({series: 'columns'});
});
</script>

あとはidを振ったtableを記述すれば完成です。
<table border="0" cellpadding="0" id="id名" width="500">
<thead>
<tr>
<th></th>
<th>項目1</th>
<th>項目2</th>
<th>項目3</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>10</td>
<td>20</td>
<td>30</td>
</tr>
<tr>
<th>2</th>
<td>20</td>
<td>40</td>
<td>60</td>
</tr>
<tr>
<th>3</th>
<td>40</td>
<td>80</td>
<td>120</td>
</tr>
</tbody>
</table>

テーブルの内容をグラフで表示するJavaScript「graphTable」サンプル

記事作成：2009年10月28日

前の記事：本をめくるように画像を表示するJavaScript「imBookFlip」
次の記事：CSS Spriteの手間を軽減するJavaScript「AutoSprites - A jQuery Menu Plugin」