CSSで作る垂直と水平の棒グラフ[CSS]

tech.wowkhmer.comより、CSSで作る垂直と水平の棒グラフの紹介です。

グラフの棒は画像を用意します。あとは、下記のようにマークアップしていくだけです。

垂直の棒グラフ

bar0812041.jpg

XHTML


<table id="bargraphVertical">
  <tbody><tr><th>Visits 2007</th>
    <td>10000<img src="column.gif" alt="10000" width="35" height="10"></td>
    <td>17000<img src="column.gif" alt="17000" width="35" height="34"></td>
    <td>24000<img src="column.gif" alt="24000" width="35" height="48"></td>
    <td>30000<img src="column.gif" alt="30000" width="35" height="60"></td>
    <td>35000<img src="column.gif" alt="35000" width="35" height="70"></td>
    <td>40000<img src="column.gif" alt="40000" width="35" height="80"></td>
    <td>50000<img src="column.gif" alt="50000" width="35" height="100"></td>
    <td>60000<img src="column.gif" alt="60000" width="35" height="120"></td>
    <td>70000<img src="column.gif" alt="70000" width="35" height="140"></td>
    <td>80000<img src="column.gif" alt="80000" width="35" height="160"></td>
    <td>90000<img src="column.gif" alt="90000" width="35" height="180"></td>
    <td>100000<img src="column.gif" alt="100000" width="35" height="200"></td>
  </tr></tbody>
    <tfoot><tr><th>Month</th>
    <th>Jan</th>
    <th>Feb</th>
    <th>Mar</th>
    <th>Apr</th>
    <th>May</th>
    <th>Jun</th>
    <th>Jul</th>
    <th>Aug</th>
    <th>Sep</th>
    <th>Oct</th>
    <th>Nov</th>
    <th>Dec</th>
  </tr></tfoot>
</table>

CSS


#bargraphVertical{
  font:0.7em Arial;
  width:475px;
  border:1px solid #ccc;
}
#bargraphVertical td{
  padding:0;
  margin:0;
  vertical-align:bottom;
  text-align:center;
  background:#eee url(graphbg.gif) 15px bottom;
}
#bargraphVertical img{
  display:block;
  border-right:1px solid #fff;
}
#bargraphVertical th{
  font-weight:normal;
}

水平の棒グラフ

bar0812042.jpg

XHTML


<table id="bargraphHorizontal"><tbody>
    <tr>
        <th class="label">Country</th>
        <th class="val">Visitors</th>
    </tr>
    <tr>
        <td class="label">CAMBODIA</td>
        <td class="val"><img src="row.gif" width="200" height="10"> 100000</td>
    </tr>
    <tr>
        <td class="label">UNITED STATES</td>
        <td class="val"><img src="row.gif" width="180" height="10"> 90000</td>
    </tr>
    <tr>
        <td class="label">AUSTRALIA</td>
        <td class="val"><img src="row.gif" width="160" height="10"> 80000</td>
    </tr>
    <tr>
        <td class="label">Unknown</td>
        <td class="val"><img src="row.gif" width="140" height="10"> 70000</td>
    </tr>
    <tr>
        <td class="label">FRANCE</td>
        <td class="val"><img src="row.gif" width="120" height="10"> 60000</td>
    </tr>
    <tr>
        <td class="label">THAILAND</td>
        <td class="val"><img src="row.gif" width="100" height="10"> 50000</td>
    </tr>
    <tr>
        <td class="label">REPUBLIC OF KOREA</td>
        <td class="val"><img src="row.gif" width="80" height="10"> 40000</td>
    </tr>
    <tr>
        <td class="label">CANADA</td>
        <td class="val"><img src="row.gif" width="70" height="10"> 35000</td>
    </tr>
    <tr>
        <td class="label">JAPAN</td>
        <td class="val"><img src="row.gif" width="60" height="10"> 30000</td>
    </tr>
    <tr>
        <td class="label">SINGAPORE</td>
        <td class="val"><img src="row.gif" width="48" height="10"> 24000</td>
    </tr>
</tbody></table>

CSS


#bargraphHorizontal{
  font:0.7em Arial;
  border:1px solid #ccc;
}
#bargraphHorizontal th{
  font-weight:normal;
}
#bargraphHorizontal td{
  padding:1px 0;
  margin:0;
}
#bargraphHorizontal .label{
  text-align:right;
}
#bargraphHorizontal .val{
  text-align:left;
}
#bargraphHorizontal img{
  vertical-align:middle;
}