jQuery制作简单条形图的例子

本文介绍了用jQuery制作简单条形图的方法,供大家参考,具体的实现方法如下:

HTML的一部分:

复制代码代码如下所示:

条形图

















CSS部分:

下面的代码复制如下:

。直方图容器{ position:相对;margin-left: 60px;边距:10px;margin-bottom: 25px;}

。直方图BG线{边界:# 999固体;边框宽度:0 0px 1px 1px;权利边界颜色:# EEE;溢出:隐藏;宽度:99%;}

。直方图BG线UL {溢出:隐藏;边界:# EEE固体;边框宽度:1px 000;明确:两;}

。直方图BG线李{浮动:左;溢出:隐藏;背景:# FFF;}

。直方图BG线里div {边界:1px # EEE固体;}

内容:绝对位置。直方图{;左:0px;最高:0;宽度:99%;高度:100%;}

直方图内容高度:100%;}

直方图内容:浮动:左;高度:100%;文本对齐:中心;位置:相对;}

。直方图箱{位置:相对;显示:内联块;身高:100%;宽度:20px;}

直方图的内容。李{位置:绝对的;下:0;右:0;显示:块;宽度:20px;字体大小:0;线高度:0;}

内容。直方图李。Histogram的名字{位置:绝对;底:- 20px;左:0px;空格:nowrap;显示:内联块;宽度:100%;字体大小:12px;溢出:隐藏;}。

。histogram-y {位置:绝对;左:- 60px;顶部:- 10px;字体:12px / 1.8宋体,宋体;}

。histogram-y李{文本对齐:右;宽度:55px;填充右:5px;颜色:# 333;}

。直方图BG线里DIV。histogram-y李{身高:30px; / *高度控制细胞的高度和比例,线条的比例和*