<<  别再说DIV＋CSS了！ | 首 页 | 法国女歌手推荐－Natasha St-Pier  >>
2007-05-17

CSS制作条状图表- [CSS]

如今，许多网站上都会用到统计表，于是我们需要为它们制作一些漂亮的图片来呈现，自然而然又想利用最少的带宽和最简单的标记。在把这些图片放到网页上的方法，一个是插入图片，一个是背景图片。

插入图片的代码固然简单，但是没有语义，跨平台的展示性并不强。那么背景图片呢，在更加没有语义的同时我们还要面临背景图片的两个问题：1.并非所有浏览器的默认设置是可以打印背景图片　2.用户不能复制图片中的数据到word文档或者outlook等其它编辑器。当然，我们可以告诉用户更改浏览器的打印设置，令其可以打印背景图片，但是要求用户这样做明显不是个好主意。接下来，我要介绍是另外一种方法，与以上两种方法完全不同哦～

什么是图表？

举个例子吧，比如：一个网站每月的浏览次数统计。我们需要画出一张下面这样的图表：

之前已经说过，直接在网页上插入一张图片是没有语义的，现在，我们要用一张表格来完成它，将需要展示的数据放入表格先：

<table>
    <tr>
        <th>Visits 2005</th>
        <td>10000</td>
        <td>15000</td>
        <td>20000</td>
        <td>30000</td>
        <td>35000</td>
        <td>40000</td>
        <td>50000</td>
        <td>60000</td>
        <td>70000</td>
        <td>80000</td>
        <td>90000</td>
        <td>100000</td>
    </tr>
    <tr>
        <th></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>
</table>

以上代码的显示效果会是这样：

Visits 20051000015000200003000035000400005000060000700008000090000100000
JanFebMarAprMayJunJulAugSepOctNovDec

你一定会提出疑义：没有图片的情况下，月份名称应该在浏览数据的上面。稍等一下，我们来切两张图片：
一张给圆柱，圆柱必须有足够高。
圆柱
一张作线状背景

现在，我们来把表格的代码稍做变动，放入对应的柱状图片：

<table class="bargraph">
    <tr>
        <th>Visits 2005</th>
        <td>10000<img src="column.gif" mce_src="column.gif"
        width="36" height="10" alt="10000" /></td>
        <td>15000<img src="column.gif" mce_src="column.gif"
        width="36" height="30" alt="15000" /></td>
        <td>20000<img src="column.gif" mce_src="column.gif"
        width="36" height="40" alt="20000" /></td>
        <td>30000<img src="column.gif" mce_src="column.gif"
        width="36" height="60" alt="30000" /></td>
        <td>35000<img src="column.gif" mce_src="column.gif"
        width="36" height="70" alt="35000" /></td>
        <td>40000<img src="column.gif" mce_src="column.gif"
        width="36" height="80" alt="40000" /></td>
        <td>50000<img src="column.gif" mce_src="column.gif"
        width="36" height="100" alt="50000" /></td>
        <td>60000<img src="column.gif" mce_src="column.gif"
        width="36" height="120" alt="60000" /></td>
        <td>70000<img src="column.gif" mce_src="column.gif"
        width="36" height="140" alt="70000" /></td>
        <td>80000<img src="column.gif" mce_src="column.gif"
        width="36" height="160" alt="80000" /></td>
        <td>90000<img src="column.gif" mce_src="column.gif"
        width="36" height="180" alt="90000" /></td>
        <td>100000<img src="column.gif" mce_src="column.gif" 
        width="36" height="200" alt="100000" /></td>
    </tr>
    <tr>
        <th></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>
</table>

请注意我只给这个table加了一个class，所以它还是很能令人接受，是吧:)

现在唯一剩下的就是用css完成整个案例：

.bargraph {
    font: 0.6em/2em Arial;
    color: #ddb;
    border-collapse: collapse;
    width: 476px;
}
.bargraph td {
    padding:0;
    margin:0;
    vertical-align:bottom;
    text-align:center;
    background: #2d271c url(gridline.gif) 15px bottom;
}
.bargraph th {
    background: #2d271c;
}
.bargraph img{
    display:block;
    border-right: 1px solid #000;
}

实例地址：http://www.khmerang.com/csslab/bargraphs/bargraph.html

本文思想及图片引自：http://www.khmerang.com/index.php?p=118，感谢精彩的原作！





Tag: CSS 学习日志 WEB标准 可用性 网页制作技术

评论

发表评论

 姓名：
 E-mail：
 地址：
   


 
@ 12:05:04 | 引用 0 | 编辑