テーブルの内容をグラフで表示する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>
        <caption>Table 1: Graph by columns</caption>
        <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>

サンプル

	項目1	項目2	項目3	項目4
1	10	20	30	30
2	20	40	60	30
3	40	80	120	30
4	30	10	60	30

Javascriptサンプルページ一覧

skuare.net