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

テーブルで表組みを作って、それにあわせて画像でグラフを作る・・・
そんな作業は億劫です。
なので、jQueryプラグイン「graphTable」を使用して、楽をしましょう。
テーブルの内容をグラフで表示するJavaScript「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」サンプル

sponsors

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

記事作成:
記事URL:

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