今日の人気記事

  1. テーブルにページャーを「PaginateMyTable」
  2. テーブルやリストから文字列を検索「QuickSearch」
  3. Bootstrapを使ったカレンダーを実装「Zabuto Calendar」
  4. レトロなフリップ時計やカウントダウンタイマーを実装「flipCountDown」
  5. ブラウザーをフルスクリーン(全画面)表示に「Fullscreen」

テーブルをグラフに変換する「highchartTable」

スポンサーリンク

テーブルの内容を簡単にグラフに変換するプラグイン「highchartTable」を紹介します。

jQueryプラグイン「highchartTable」

このプラグインを使えば、テーブルを作成するだけで「棒グラフ」「折れ線グラフ」などを簡単に実装することができます。複数のグラフを重ねることもできるので、便利です。

ちなみに、グラフの描画には「Highcharts」を使っているようです。

スポンサーリンク

デモで実際のグラフをご覧ください。

「highchartTable」のデモ

デモのソース(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>
スポンサーリンク

関連記事(一部広告含む)