tableの内容を簡単にグラフ化するjQueryプラグイン「gvChart」

tableで表組みにしたものをグラフ化するのは面倒な作業だったりします。
そこでjQueryプラグイン「gvChart」で簡単にグラフ化しましょう。
通常通りtableを記載し、JavaScriptを記述すれば完成です。
tableの内容を簡単にグラフ化するjQueryプラグイン「gvChart」サンプル

使用方法
gvChartからファイルをダウンロードします。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.gvChart.js"></script>
<script type="text/javascript">
gvChartInit();
$(document).ready(function(){
$('#id名').gvChart({
chartType: 'ColumnChart',
//その他に AreaChart、LineChart、BarChart、ColumnChart、PieChartがあります。
gvSettings: {
vAxis: {title: 'No of players'}, //縦軸タイトル
hAxis: {title: 'Month'}, //横軸タイトル
width: 720, //幅
height: 300, //高さ
}
});
</script>

あとはtableを通常通り書けば完成です。
<table id="id名">
<caption>Game players count</caption>
<thead>
<tr>
<th></th>
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
<th>Apr</th>
</tr>
</thead>
<tbody>
<tr>
<th>2010</th>
<td>125</td>
<td>185</td>
<td>327</td>
<td>359</td>
</tr>
<tr>
<th>2009</th>
<td>1167</td>
<td>1110</td>
<td>691</td>
<td>165</td>
</tr>
</tbody>
</table>

tableの内容を簡単にグラフ化するjQueryプラグイン「gvChart」サンプル

sponsors

「tableの内容を簡単にグラフ化するjQueryプラグイン「gvChart」」をシェアする

記事作成:
記事URL:

TOP > > > tableの内容を簡単にグラフ化するjQueryプラグイン「gvChart」