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

Realization of the Achievement Statistical Chart with CSS Technology

在学校类网站中有时会用到成绩统计图表,外形类似于EXCEL中的条状图。这种图表一般都是用图形处理软件制作好后再插入到网页当中,所以图表都是固定的、一次性的,下次考试后的图表必须重新制作,使用起来比较烦琐、死板。随着CSS技术在网站中越来越多的应用,我们发现使用它也可以制作灵活美观的图表。CSS2.0中,可以使用百分比来定义对象的高度和宽度,利用这一特性,我们可以很方便地借用一个容器的高度或宽度来形象地表现一个数值。以这种原理制作的图表数据是可变的,改变对象的高度或宽度参数值就相当于改变了它所代表的数据,而无须重新制作图片,减少了网页设计师的工作量。

Sometimes,achievement statistical chart is used in school website.Its shape is similar to the bar graph in EXCEL.Generally,these charts are created by the graphics treatment software,and then inserted into the web page.Therefore,the chart is fixed,and they must be redone after the next examination.This method is cumbersome and inflexible.With the popularizing of CSS technology,the people find that it can be used to create the flexible chart.In CSS2.0,it can use percentages to define the object＇s height and width,so to use the height or width of a container to represent a value easily.Data of this chart is changeable,changing the height or width of the container is equivalent to changing the data,It is not necessary to re-create an image no longer,and web designers＇ workload has be reduced.