テーブルをグラフに変換する「highchartTable」
当ページのリンクには広告が含まれています。
スポンサーリンク
テーブルの内容を簡単にグラフに変換するプラグイン「highchartTable」を紹介します。
jQueryプラグイン「highchartTable」
このプラグインを使えば、テーブルを作成するだけで「棒グラフ」「折れ線グラフ」などを簡単に実装することができます。複数のグラフを重ねることもできるので、便利です。
ちなみに、グラフの描画には「Highcharts」を使っているようです。
スポンサーリンク
デモで実際のグラフをご覧ください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="highchartTableのデモでーす。">
<title>highchartTable - jQuery Plugin Demo</title>
<script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="highcharts.js"></script>
<script src="jquery.highchartTable.js"></script>
<style>
section {
padding: 20px;
float: left;
}
</style>
</head>
<body>
<h1>highchartTableのデモでーす。</h1>
<section>
<table class="highchart" data-graph-container=".highchart-container" data-graph-type="column">
<thead>
<tr>
<th>年</th>
<th>売上</th>
<th data-graph-type="area">純利益</th>
</tr>
</thead>
<tbody>
<tr>
<td>2010</td>
<td>2000</td>
<td>800</td>
</tr>
<tr>
<td>2011</td>
<td>2500</td>
<td>-500</td>
</tr>
<tr>
<td>2012</td>
<td>5000</td>
<td>1200</td>
</tr>
<tr>
<td>2013</td>
<td>2000</td>
<td>500</td>
</tr>
</tbody>
</table>
</section>
<section>
<div class="highchart-container"></div>
</section>
<script>
$(document).ready(function() {
$('table.highchart').highchartTable();
});
</script>
</body>
</html>
スポンサーリンク