用CSS技术实现成绩统计图表

2011-06-13周剑强

山西电子技术 2011年5期

周剑强

(忻州职业技术学院，山西忻州 034000)

0 引言

人们经常会用图表来形象地表示数据，网页设计中也会碰到这个问题，比如学校网站中出现的成绩统计图表，如图1所示。传统的方法做这种网页必须是先制作图表图片，再把图片对象插入到网页当中，每次成绩统计都得做一个新图片。现在，我们使用CSS技术也可以制作漂亮的图表，而且图表数据是可变的。我们使用CSS代码构建一个成绩统计表，每次考试后只须改变代码中对应容器的高度值就改变了它所代表的成绩，这样就把我们从不断的制作图片中解放出来了。

图1 网页中的图表

1 CSS技术构建条状图的原理

首先使用CSS代码来构建一个简单的条状图，如图2所示。这里使用一个div对象内嵌一个span对象。我们要用span对象的宽度来形象地表示数据，宽度为“80%”就代表“80”这个数据，宽度为“60%”就代表“60”这个数据。具体代码如下:

图2 简单条状图

CSS样式表根据代码位置的不同分为行间样式表、内部样式表和外部样式表，直接书写于对象标签中的是行间样式表，集中书写在网页起首位置的是内部样式表，独立写在一个CSS文件中的是外部样式表。“style="width:80%”这句代码用来定义span对象的宽度，它直接写于span标签中，属于行间样式表。在这里，使用行间样式表是为了便于修改span对象的宽度，从而灵活改变它所代表的数据。div和span还各自有一个内部样式“tm”和“tn”，它们的代码如下:

在CSS样式表中，对象的宽度和高度可以以百分比为单位来设置，百分比的基数是它父级对象的宽度或高度。在本例中，span的父级对象是div，所以它的宽度就以div的宽度为基数，div对象的宽度为200px，那么span对象的宽度就是80%*200px=160px。

CSS技术中，每个对象都有“display”属性，用于设置对象是否显示或如何显示。如果属性值是“block”，表示它为块状对象，默认状态下，每个块状对象单独占用一行进行显示;如果属性值是“inline”，表示它为内联对象，也叫行间对象。默认状态下，多个内联对象共同在一行内显示，而且对内联对象设置宽度值无效。

span对象默认是一个内联对象，无法设置宽度，因此在“tn”中有“display:block”这句代码，通过这句代码把span对象强行设置为一个块状对象，可以有效地设置宽度。我们还给div对象设置了一个1px宽的边框，给span对象设置了一个背景色，边框和背景的颜色是一致的，为了美观，在边框和背景之间加了一个2px的间隙。

我们可以用这个条状图表示“80”这个数据，如果把span的宽度改为60%同时把里边的数字改为60就可表示“60”这个数据了。

2 CSS成绩图表的设计

2.1 以“ul”为容器实现图表

本文正是依据上边条状图的原理，利用CSS技术来制作成绩统计表，效果如图3所示。由于成绩统计表中有多个条状图，所以改用无序列表“ul”作为容器。每个“li”标签形成一个条状图，代表一门成绩。而每组“ul”标签包含多个“li”标签，表示一个班的成绩。具体代码如下:

三组“ul”标签表示了三个班的成绩，而每组“ul”标签中内含三组“li”标签，分别代表“语文”、“数学”、“英语”三门成绩。它们的CSS样式代码如下:

图3 成绩统计图

2.2 设置对象的浮动属性

在XHTML网页中，body中的块状对象根据其前后顺序从上到下依次显示，这种显示规则称作文档流，而浮动定位可以打破这种默认的显示规则。“float”属性就是用来设置浮动定位的，如果其属性值为“left”表示对象向左浮动，从而清空右侧位置用来放置下方的对象;如果其属性值为“right”表示对象向右浮动，从而清空左侧位置用来放置下方的对象。设置浮动定位以后，每个块状对象不再单独占用一行，而是多个块状对象同时在一行内显示。

在CSS2.0中，“ul”元素的“display”属性默认为“block”，也就是说它是一个块状对象，而且为了有效地设置宽度，“li”也被强行设置为块状对象，依据文档流原则它们都要单独占用一行，从上到下依次显示。在本例中，代表成绩的条状图应该位于同一水平线上，这样才能对比成绩的高低，所以多个“ul”和“li”元素应该在同一行内显示。因此，“tb”和“tb li”两个选择符中都设置了“float:left”这个属性。

2.3 对象的定位

所有条状图必须底部对齐才能看出高度的差别，从而形象地显示出分数的高低差异，所以仅有浮动定位还不够，必须对“span”对象设置绝对定位，从而精确地控制它的底部位置，保证底部位于同一水平线上。通过“position:absolute;bottom:0px”这两句代码，给“span”对象设置了绝对定位。绝对定位的参照系是最近的已定位上级元素，所以要给“li”元素进行定位，“tb li”中“position:relative;”这句代码给“li”元素设置了相对定位。这样定位的最后效果就是，每个“span”对象以它的上级元素“li”为参照系绝对定位，“span”的底部位于“li”元素的0px高度，从而保证了所有条状图底部位于同一水平线上。

“yw”、“sx”、“yy”三个样式很简单，只是设置了三种条状图的背景色，三种颜色的条状图分别代表“语文”、“数学”、“英语”三门成绩。通过以上方法，再加上适当的文字和标识，就可以形成一个完美的成绩统计图表，如图4所示。