tableのデータから棒グラフを自動生成するスクリプトのご紹介です。jQueryに依存します。手軽で良かったので備忘録として。

tableに記入されたデータを元にアニメーションエフェクト付きの棒グラフを自動生成する、というもの。以下、動作サンプルです。

TableBarChart

tableはマークアップで、棒グラフはそのtableのデータを元に生成されています。

<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.js'></script>
<script type="text/javascript" src="TableBarChart.js"></script>

本体とプラグインを読み込みます。

 $('#foo').tableBarChart('#bar', '', false);

tableとグラフを表示する要素を指定します。

<div id="bar"></div>

tableは普通にマークアップするだけ。グラフ表示は別途要素を用意します。

ライセンスはGPLとの事です。

TableBarChart