CSS+HTML+JQuery实现条形图
在工作中遇到了写条形图的情况,因为文字,条形数量和条形图的颜色需要改变,所以不能用图片,所以决定写一个试试,写的比较简单,但毕竟是第一次,也遇到了一些问题,特意记录下来,以免忘记。
因为该页面还需要兼容ie8,处理每个条形的间距也是一个问题。所以使用justify-content: space-around;来让每个条形两端对齐,但是并不兼容ie8,于是通过js来计算每个条形之间的margin值来控制条形能达到两端对齐的效果。
还有一个问题是:文字无法上下居中,于是把文字单独写到一个span标签中,通过js来控制span的位置。
具体代码如下:
<div class="chart">
<div class="bar-div">
<span class="bar">
<span class="bar-percent" style="height:86%"><span class="num-percent">86%</span><span class="percent-subject">药学综合知识</span></span>
</span>
<span class="bar">
<span class="bar-percent" style="height:99%"><span class="num-percent">99%</span><span class="percent-subject">药学一</span></span>
</span>
<span class="bar">
<span class="bar-percent" style="height:78%"><span class="num-percent">78%</span><span class="percent-subject">药学二</span></span>
</span>
<span class="bar">
<span class="bar-percent" style="height:84%"><span class="num-percent">84%</span><span class="percent-subject">中药学综合知识</span></span>
</span>
<span class="bar">
<span class="bar-percent" style="height:60%"><span class="num-percent">60%</span><span class="percent-subject">中药一</span></span>
</span>
<span class="bar">
<span class="bar-percent" style="height:93%"><span class="num-percent">93%</span><span class="percent-subject">中药二</span></span>
</span>
<span class="bar">
<span class="bar-percent" style="height:80%"><span class="num-percent">80%</span><span class="percent-subject">药事管理</span></span>
</span>
</div>
</div>
html
<style>
.chart {
width: 300px;
position: relative;
margin: 0 auto;
border-bottom: 1px solid #ccc;
} .bar {
height: 170px;
width: 20px;
position: relative;
display: inline-block;
margin: 0 7px;
} .bar-div {
justify-content: space-around;
display: flex;
padding-top: 20px;
} .bar-percent {
background-color: #24BA09;
display: inline-block;
position: absolute;
bottom:;
width: 20px;
color: #fff;
line-height: 1.2;
text-align: center;
font-size: 12px;
} .num-percent {
font-size: 10px;
color: #999;
position: absolute;
top: -13px;
left:;
} .percent-subject {
position: relative;
top: 0%;
}
</style>
css
//提前引入jquery
<script>
window.onload=function(){
//为了兼容ie8,设置条形图的每个条形的margin值来定位
var outWidth=$('.bar-div').width();
var len=$('.bar-div .bar').length;
var width=$('.bar-div .bar').width();
var marginNum=(outWidth-len*width)/len/2-2;
$('.bar-div .bar').each(function(){
$(this).css({"margin":"0 "+marginNum+"px"});
});
//设置条形图中文字上下居中
$(".percent-subject").each(function(){
var outHeight=$(this).parent().height();
var height=$(this).height();
var result=(outHeight-height)/2;
$(this).css({"top":result+"px"});
});
}
</script>
js
即可实现上述图中效果。
CSS+HTML+JQuery实现条形图的更多相关文章
- CSS与JQuery的相关问题
文字隐藏:p div里面的文字过长时隐藏文字: overflow:hidden; text-overflow:ellipsis; white-space:nowrap; --------------- ...
- 使用CSS和jQuery实现对话框
因为项目中要显示一些对话框,但用alert显得太丑,后从网上找了一些插件,但有觉得不好用,因此自己试用CSS和jQuery写了一个对话框,代码如下: <!DOCTYPE html> < ...
- 使用CSS和jQuery实现tab页
使用jquery来操作DOM是极大的方便和简单,这儿只是简单的用一个使用css和jquery来实现的tab页来简单介绍一些jQuery的一些方便使用的方法,下面是html文件: <!DOCTYP ...
- 区域及分离、Js压缩、css、jquery扩展
后台管理区域及分离.Js压缩.css.jquery扩展 本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做 ...
- 动态加载js和css的jquery plugin
一个简单的动态加载js和css的jquery代码,用于在生成页面时通过js函数加载一些共通的js和css文件. //how to use the function below: //$.include ...
- JavaScript ,Css and Jquery In OpenERP 7.0
From: http://openerpbay.blogspot.jp/2013/02/javascript-css-and-jquery-in-openerp-70.html Hi fellows, ...
- css与jquery、图标字体
*)还能这样选择 header #search input[type="text"] *)按钮常用颜色:#008cBA(字母大小写没有区别) *)清除浮动后,text-align没 ...
- Jmeter之CSS选择器/JQuery选择器关联
选择器: CSS选择器或JQuery选择器是Jmeter支持的两种语法,下面对其两种语法进行简单介绍 CSS选择器 JQuery选择器 Chrome - 复制CSS选择器 Google Chrome在 ...
- 26、ASP.NET MVC入门到精通——后台管理区域及分离、Js压缩、css、jquery扩展
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做准备,由于许久没有练习双截棍了,难免生疏,所以现在临时抱 ...
随机推荐
- 关于idea在运行web项目时部署的位置
(转) 以前一直很好奇,在idea中运行tomcat,把项目部署到其中,运行起来,然后我去tomcat目录下去看,根本找不到我部署的项目 那我的项目是咋运行的啊… - - 后来我就查啊查 ,纠结啊纠结 ...
- R语言学习——实例标识符
> patientID<-c(1,2,3,4)> age<-c(25,34,28,52)> diabetes<-c("Type1"," ...
- Django路由(url)
1.基本配置 from django.conf.urls import url from . import views urlpatterns = [ url(r'^articles/2003/$', ...
- 机器人行业中我们常说的roll、yaw、pitch是什么?
坐标系建立: 载体坐标系与载体坐标系的关系是三个Euler角:yaw,pitch,roll,反应了载体相对基准面的姿态. pitch是围绕X轴旋转,也叫做俯仰角.当X轴的正半轴位于过坐标原点的水平面之 ...
- C++笔记--thread pool【转】
版权声明:转载著名出处 https://blog.csdn.net/gcola007/article/details/78750220 背景 刚粗略看完一遍c++ primer第五版,一直在找一些c+ ...
- EasyUI datagrid formatter 属性
easyui的formatter属性可以帮助我们更加灵活的显示数据库中的数据. 比如,我有一个启用禁用字段,使用数字表示,1表示启用,2表示禁用,展示给客户的时候我当然希望是中文的形式. 只需要写这么 ...
- core dump文件的生成
#include <stdio.h> int main(int argc, char *argv[]) { char * p = "abcdefg"; p[] = '; ...
- BOS判断字段为空
- 异常SRVE0199E
后台生成导出exe表格,在tomcat自己环境下完全没问题到websphere环境下保SRVE0199E产生这个问题是因为response.OutputStream已经打开再次打开就报这个异常,前台如 ...
- es6 模本字符串拼接方法 ``
1.字符串拼接 可以使用 es6 ` ` 配合 ${xxx} 具体操作上代码 <!DOCTYPE html> <html lang="en"> < ...