用CSS实现柱状图（Bar Graph）的方法（三）——复杂柱状图的实现

在前面的文章中，我分别介绍了基于列表元素柱状图和基于表格元素柱状图的实现方法，虽然方法比较简单，但是它却包含了基本的实现原理。在了解了前面两节的基础知识后，我们只以利用它来实现更加复杂的柱状图效果。

一、情景

 假设有一家公司，要统计2007年1~4季度南北区域产品的销售状况，那么可能需要做类似下面的这张表：

 其中Q1~Q4分别代表1~4季度，橙色和蓝色分别代表北方和南方的产品销售情况。现在我们又把这张Excel统计出来的数据表呈现在网页上。

二、准备

在仔细研究了上面的图形之后，我们发现，大体可以把这个柱状图分为以下几个部分，首先按季度分为四个组，然后再按区域划分两组，也是先分大组再分小组，组内分组。有了这样的印象之后，我们就可以开始构建页面元素。在选择页面元素时，不但要考虑代码片断最优还是考虑代码的语意和可读性。很显然，使用div来实现这样的总局可能不够简洁，因为是组内再分组的情况，而div没有子元素，所以会产生多层div嵌套的情况，因此不能作为首先。综合上面的考虑，我们可以使用列表元素来实现，首先，列表元素有子元素，而且从语意上说也比使用div更符合要求。这里我选择了使用无序列表<ul>(当然，你也可以考虑使用<ol>或者

• 
  

• " href="http://www.dudo.org/article.asp?id=98" target=_blank>dd dt dl元素）。

三、代码的构架

确定了网页使用的标签元素后，我们可以根据需要来编写下面的HTML代码片断（好的HTML代码结构可以使页面设计达到事半功倍的效果）。

<ul id="q-graph">  
 <li id="q1" class="qtr">Q1   
 <ul>  
  <li class="north bar" style="height:111px;">18</li>  
  <li class="south bar" style="height:99px;">16</li>  
 </ul></li>  
 <li id="q2" class="qtr">Q2   
 <ul>  
  <li class="north bar" style="height:198px;">32</li>  
  <li class="south bar" style="height:210px;">34</li>  
 </ul></li>  
 <li id="q3" class="qtr">Q3   
 <ul>  
  <li class="north bar" style="height:260px;">43</li>  
  <li class="south bar" style="height:198px;">32</li>  
 </ul></li>  
 <li id="q4" class="qtr">Q4   
 <ul>  
  <li class="north bar" style="height:111px;">18</li>  
  <li class="south bar" style="height:198px;">32</li>  
 </ul></li>  
  
</ul>  

上面这代代码的作用就是在一个<ul>中嵌套了另外一个<ul>,这样就实现了两次分组（代码中同时按照比例设定了li的高度）。

注意：在这段代码中，有id和class现时出现的情况，也有同时使用两个class的情况，至于何时使用class、何时使用id请参考这篇CSS Classes vs ID。

点击此处查看运行效果

四、有了HTML代码后，我们就可以使用CSS来样式化结构了

1、首先，对Body进行设置如下：

body {   
      padding:0;   
      margin:40px;   
      font-size:9pt;   
      font-family:Helvetica,Geneva,sans-serif;   
}  

代码很简单，只是要说明一点的是，一定要记得在body中指定文字大小和等宽字体，这在含有英文和数字的页面布局中是十分必要的。

2、接下来要做的是，对ul元素进行布局。

遵行前面两节布局中使用的相对定位和绝对定位方法：首先把外围元素设置为relative，然后把内层需要定位的元素设置为absolute，此外还需要去除ul和li默认的样式（这一点很重要），并设定宽度和高度等：

/*ul*/  
ul#q-graph {   
  border:2px solid #0063be;   
 background:#adfe12 url(fade-light.png) repeat-x scroll 0 0;        
  height:300px;   
 width:600px;   
  position:relative;   
    list-style:none;   
  margin:1.1em 1em 3.5em;   
   padding:0;   
}  

注意，一定要清除ul、li的默认样式，特别是padding和marging的值，因为在不同的浏览器中他们的值是不一样的，所以在一般情况下都应该是先清除再负值。
接下来，简单设置一下所有的li元素，主要是清空默认样式和使它们服从绝对定位（下面的样式对所有的li元素生效）：

#q-graph li {   
 position:absolute;   
    text-align:center;   
    bottom:0;   
 padding:0  
 margin:0;   
       }  

其中，bottom:0;是绝对定位，意即使所有的指定元素底部对齐。

点击此处查看运行结果