jQueryを使った、テーブルのセル内に表示するバーチャートです。統計データなどを見比べる際に重宝しそうです。

databarは、tdの中にliタグを使って、3つの数値を入れ、パーセントに変換して色分けしてくれます。テキスト部やバーの部分にマウスオーバーすると、title属性に納めたパーセントの値を表示します。

sparklineは、spanタグを使い、data属性のdata-vに入れた値を分子に、data-tに入れた値を分母にしたパーセンテージを、セルの横サイズいっぱいを100%にしたバーの長さで表示してくれます。

サンプルのtable

	パターン１	パターン２
databar	30 18 9	TOKYO OSAKA NAGOYA
sparkline	10%	1280/2060
sparkline	58.4%	あいうえお：380/450
sparkline	89%	名称：25/100

databarの場合のhtmlソース

 <td>
     <ul class="databar">
          <li class="data-d" data-v="32">TOKYO</li>
          <li class="data-e" data-v="53">OSAKA</li>
          <li class="data-f" data-v="22">NAGOYA</li>
     </ul>
 </td>

sparklineの場合のhtmlソース

 <td class="c">
	<span class="sparkline" data-bar="data-c" 
	data-v="380" data-t="450">あいうえお：380/450
	</span>
 </td>