table（表）要素内容をグラフ化表示する方法【chartify.js】 DAD UNION

chartify.jsを使って、tableタグ（表）の要素（td、th等）をグラフ化し、表示する方法をご紹介します。
円グラフ、棒グラフ、帯グラフにできます。

Contents

table（表）要素内容をグラフ化表示するCSSの記述
table（表）要素内容をグラフ化表示するJavaScriptの記述
table（表）要素内容をグラフ化表示するHTMLの記述
chartify.js：table要素をグラフ化表示するデモページ

table（表）要素内容をグラフ化表示する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>

table（表）要素内容をグラフ化表示するJavaScriptの記述

※jquery.min.js、chartify.jsファイルを読み込みます。$(tableタグ).chartify(グラフの種類,{オプション})を記述します。グラフの種類pie（円グラフ）、bar（棒グラフ）とオプションを指定します、必要に応じて変更して下さい。

<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: ["cccccc", "ff66ff"]	//色
	});
});
</script>

table（表）要素内容をグラフ化表示するHTMLの記述

※table（表）タグ要素にid=”idGraph”を指定します。table（表）タグ要素ではtheadタグ内にグラフとして表示する説明（見出し）を記述し、tbodyタグ内にグラフ化する数値を記述します。必要に応じて変更して下さい。

<div id="idWrap">
    <h1>tableタグの要素（td、th等）をグラフ化します。</h1>

<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>
</div><!--/idWrap-->