tableの内容をグラフ化!「Chartify -- A Visualization Plugin for jQuery」

tableの内容をグラフ化!「Chartify -- A Visualization Plugin for jQuery」サンプル tableで表組みにした内容を手軽にグラフにしたいことがあると思います。
Chartify -- A Visualization Plugin for jQueryを利用すると、簡単にグラフ化できてしまいます。

使用方法 Chartify -- A Visualization Plugin for jQueryからファイルをダウンロード。
また、下記のような表があったとします。

Not Pac-Man Pac-Man
Amount 1.256 5.027

ソースは下記です。
<table id="id名">
<thead>
<tr>
<td></td>
<th>Not Pac-Man</th>
<th>Pac-Man</th>
</tr>
</thead>
<tbody>
<tr>
<th>Amount</th>
<td>1.256</td>
<td>5.027</td>
</tr>
</tbody>
</table>

これに対し、JavaScriptを以下のように記述すればあっという間にグラフに変換されます。
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="chartify.min.js"></script>
<script type="text/javascript">
$(function() {
$('#id名').chartify(
'pie', { //pie、bar
pieChartRotation: -1.256/2, //回転
showLegend: false, //説明を表示するか
colors: ["eeeeee", "ffc000"] //色指定
});
});
</script>

tableの内容をグラフ化!「Chartify -- A Visualization Plugin for jQuery」サンプル

sponsors

「tableの内容をグラフ化!「Chartify -- A Visualization Plugin for jQuery」」をシェアする

記事作成:
記事URL:

TOP > > > tableの内容をグラフ化!「Chartify -- A Visualization Plugin for jQuery」