jquery实现一个环形图表效果代码

代码语言:html

所属分类:图表

代码描述:jquery实现一个环形图表效果代码

代码标签: 环形 图表 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<html>
<head>
   
<style>
@import url(//fonts.googleapis.com/css?family=Oswald:400);
        body
{
           
background: #222428;
           
font-family: "Oswald", sans-serif;
       
}
       
.chart {
           
position: absolute;
           
width: 450px;
           
height: 450px;
           
top: 50%;
           
left: 50%;
           
margin: -225px 0 0 -225px;
       
}
       
.doughnutTip {
           
position: absolute;
           
min-width: 30px;
           
max-width: 300px;
           
padding: 5px 15px;
           
border-radius: 1px;
           
background: rgba(0,0,0,.8);
           
color: #ddd;
           
font-size: 17px;
           
text-shadow: 0 1px 0 #000;
           
text-transform: uppercase;
           
text-align: center;
           
line-height: 1.3;
           
letter-spacing: .06em;
           
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
           
pointer-events: none;
           
&::after {
           
position: absolute;
           
left: 50%;
           
bottom: -6px;
           
content: "";
           
height: 0;
           
margin: 0 0 0 -6px;
           
border-right: 5px solid transparent;
           
border-left: 5px solid transparent;
           
border-top: 6px solid rgba(0,0,0,.7);
           
line-height: 0;
       
}
   
}
   
.doughnutSummary {
       
position: absolute;
       
top: 50%;
       
left: 50%;
       
color: #d5d5d5;
       
text-align: center;
       
text-shadow: 0 -1px 0 #111;
       
cursor: default;
   
}
   
.doughnutSummaryTitle {
       
position: absolute;
       
top: 50%;
       
width: 100%;
       
margin-top: -27%;
       
font-size: 22px;
       
letter-spacing: .06em;
   
}
   
.doughnutSummaryNumber {
       
position: absolute;
       
top: 50%;
       
width: 100%;
       
margin-top: -15%;
       
font-size: 55px;
   
}
   
.chart path:hover {
       
opacity: 0.65;
   
}
</style>

</head>
<body>
<div id="doughnutChart" class="chart">

</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script>
$(f.........完整代码请登录后点击上方下载按钮下载查看

网友评论0