2021年3月8日月曜日

テーブルのセル背景色で棒グラフを表示

テーブルのセルの値を元に、セルの背景色で棒グラフを表示。

デモページを表示

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
th, td {
  padding: 10px 0;
  background-color: #eee;
  border: 5px solid #ddd;
  text-align: center;
}
 
th {
  width: 4em;
}
 
td:first-of-type {
  width: 4em;
}
補足
  • 表のデザインのみで、棒グラフに関する定義はしていない。
  • レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(function(){
 
  $(window).on('load', function(){
 
    const COL_BAR = "#86af93";  /* 棒の色 */
    const COL_BG =  "#afcab7";  /* セルの背景色 */
 
    $('table.add-bar-bg tbody tr').each(function(){
      var capacity = $(this).children().eq(1);  /* 定員のセル要素 */
      var vacancy = $(this).children().eq(2);    /* 空き人数のセル要素 */
      var ratio = (1 - vacancy.text() / capacity.text()) * 100 + '%';
      vacancy.css('background', 'linear-gradient(to right , ' + COL_BAR + ' ' + ratio + ', ' + COL_BG +  ' ' + ratio + ')');
    });
  });
 
});
補足
  • このサンプルでは、棒グラフの色を CSS ではなく jQuery 内で定義している。
  • tbody 内の各行について、セルの値を元に棒グラフの長さを計算して、背景色の linear-gradient で棒グラフを表示している。
  • デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

1
2
3
4
5
6
7
8
9
10
11
12
<table class="add-bar-bg">
  <thead>
    <tr><th>施設名</th><td>定員</td><td>空き人数</td></tr>
  </thead>
  <tbody>
    <tr><th>松山園</th><td>10</td><td>2</td></tr>
    <tr><th>高松園</th><td>15</td><td>0</td></tr>
    <tr><th>御津園</th><td>22</td><td>5</td></tr>
    <tr><th>横田園</th><td>10</td><td>1</td></tr>
    <tr><th>川口園</th><td>12</td><td>6</td></tr>
  </tbody>
</table>
補足
  • add-bar-bg クラスがついた table 要素を処理対象にしている。
ラベル: , , , ,
⬆