コニファ・ロゴ

csstest:jQueryを使って、テーブルのセル内にバーチャート表示

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

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

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

サンプルのtable

  パターン1 パターン2
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>

 

 

 

戻るボタン