jQuery制作简单柱状图实例
编程学习 2021-07-04 21:47www.dzhlxh.cn编程入门
这篇文章主要介绍了jQuery制作简单柱状图的方法,实例分析了html与css布局以及jQuery功能的具体实现方法,需要的朋友可以参考下
本文实例讲述了jQuery制作简单柱状图的方法。分享给大家供大家参考。具体实现方法如下：
Html部分：
代码如下:
<head>
<title>柱状图</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css.css" type="text/css" rel="stylesheet" />
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="histogram.js" type="text/javascript"></script>
</head>
<body>
<div class="histogram-container" id="histogram-container"></div>
</body>
<title>柱状图</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css.css" type="text/css" rel="stylesheet" />
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="histogram.js" type="text/javascript"></script>
</head>
<body>
<div class="histogram-container" id="histogram-container"></div>
</body>
CSS部分：
代码如下:
/*以下为柱状图样式*/
.histogram-container{position:relative;margin-left:60px;margin-top:10px;margin-bottom:25px;}
.histogram-bg-line{border:#999 solid;border-width:0 0px 1px 1px;border-right-color:#eee;overflow:hidden;width:99%;}
.histogram-bg-line ul{overflow:hidden;border:#eee solid;border-width:1px 0 0 0;clear:both;}
.histogram-bg-line li{float:left;overflow:hidden;background:#fff;}
.histogram-bg-line li div{border-right:1px #eee solid;}
.histogram-content{position:absolute;left:0px;top:0;width:99%;height:100%;}
.histogram-content ul{height:100%;}
.histogram-content li{float:left;height:100%;text-align:center;position:relative;}
.histogram-box{position:relative;display:inline-block;height:100%;width:20px;}
.histogram-content li a{position:absolute;bottom:0;right:0;display:block;width:20px;font-size:0;line-height:0;}
.histogram-content li .histogram-name{position:absolute;bottom:-20px;left:0px;white-space:nowrap;display:inline-block;width:100%;font-size:12px;overflow:hidden;}
.histogram-y{position:absolute;left:-60px;top:-10px;font:12px/1.8 verdana,arial;}
.histogram-y li{text-align:right;width:55px;padding-right:5px;color:#333;}
.histogram-bg-line li div,.histogram-y li{height:30px;/*控制单元格的高度及百分比的高度，使百分数与线条对其*
.histogram-container{position:relative;margin-left:60px;margin-top:10px;margin-bottom:25px;}
.histogram-bg-line{border:#999 solid;border-width:0 0px 1px 1px;border-right-color:#eee;overflow:hidden;width:99%;}
.histogram-bg-line ul{overflow:hidden;border:#eee solid;border-width:1px 0 0 0;clear:both;}
.histogram-bg-line li{float:left;overflow:hidden;background:#fff;}
.histogram-bg-line li div{border-right:1px #eee solid;}
.histogram-content{position:absolute;left:0px;top:0;width:99%;height:100%;}
.histogram-content ul{height:100%;}
.histogram-content li{float:left;height:100%;text-align:center;position:relative;}
.histogram-box{position:relative;display:inline-block;height:100%;width:20px;}
.histogram-content li a{position:absolute;bottom:0;right:0;display:block;width:20px;font-size:0;line-height:0;}
.histogram-content li .histogram-name{position:absolute;bottom:-20px;left:0px;white-space:nowrap;display:inline-block;width:100%;font-size:12px;overflow:hidden;}
.histogram-y{position:absolute;left:-60px;top:-10px;font:12px/1.8 verdana,arial;}
.histogram-y li{text-align:right;width:55px;padding-right:5px;color:#333;}
.histogram-bg-line li div,.histogram-y li{height:30px;/*控制单元格的高度及百分比的高度，使百分数与线条对其*
上一篇：AngularJS实现表单验证
下一篇：js分页工具实例