chartify.js:table要素をグラフ化表示できるJs



tableタグの要素(td、th等)をグラフ化します。
円・棒・帯グラフ等にできる様です。

1.CSSの記述例

以下は任意でです。

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:2.0em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:700px;
	margin:0 auto;
	text-align:center;
}
-->
</style>

2.ヘッダーとJavaScriptの記述例

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="chartify.js"></script>
<script type="text/javascript">
$(function() {
	//グラフ化するtableのid名を指定
	$('#idGraph').chartify(
	'pie', {	//pie(円グラフ)、bar(棒グラフ)
		pieChartRotation: -1.256/2,	//回転
		showLegend: false,	//説明の表示
		colors: ["ffffff", "ff66ff"]	//色
	});
});
</script>

3.HTMLの記述例

<table id="idGraph">
  <thead>
    <tr>
      <td></td>
      <th>少ない方</th>
      <th>多い方</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>金額</th>
      <td>1.256</td>
      <td>5.027</td>
    </tr>
  </tbody>
</table>

chartify.js:table要素をグラフ化表示するデモページ

ソース元:Chartify – A Visualization Plugin for jQuery

グラフ化をエクセルでやることはあっても、
Jsでやることは今まででまだ無いです。