饼状统计图

最新推荐文章于 2025-04-17 14:18:46 发布

原创最新推荐文章于 2025-04-17 14:18:46 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#饼状图

软件开发专栏收录该内容

2 篇文章

订阅专栏

该页面展示了银川市公共图书馆的数据可视化界面，通过饼状图呈现了各分馆近30天的办证量排名及借阅活跃度分布比例。具体包括西夏图书馆、金凤区图书馆等的数据对比。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>银川市数字图书馆服务平台</title>
<link href="css/Yinchuan/main.css" type="text/css" rel="stylesheet" />
<link type="text/css" href="css/Yinchuan/main2.css" rel="stylesheet" />


</head>

<body>


<div class="header">
<div class="head w1200 center clear">
<div class="logo">
<h2><a href="#">银川市公共图书馆即时数据 —— 分馆的分布比例</a></h2>
</div>
<div class="time">2017年11月21日  星期二</div>
</div>
</div>
<div class="pieDiv">
<div class="pieName" style="display: flex;">
<div style="flex: 1;">
<span class="diamond" style="background:#fff; width: 20px;height: 20px;"></span><span>各馆借阅活跃度分布比例</span>
</div>
<div style="flex: 1; text-align: center;text-indent: 140px;">
<span class="diamond" style="background:#fff; width: 20px;height: 20px;"></span><span>各馆近30天办证量排名</span>
</div>

</div>
<div id="pieChart" class="pieChart"></div>
<div class="libname">
<ul>
<li>
<span class="diamond" style="background:#ff6d3a;"></span>银川市图书馆</li>
<li>
<span class="diamond" style="background:#2b4458;"></span>兴庆市图书馆</li>
<li>
<span class="diamond" style="background:#ffd55c;"></span>西夏市图书馆</li>
<li>
<span class="diamond" style="background:#0fce6e;"></span>西凤市图书馆</li>
</ul>
</div>
<div class="libname criname">
<ul>
<li>
<span class="circle" style="background:#ff6d3a;">1</span>银川市图书馆</li>
<li>
<span class="circle" style="background:#2b4458;">2</span>兴庆市图书馆</li>
<li>
<span class="circle" style="background:#ffd55c;">3</span>西夏市图书馆</li>
<li>
<span class="circle" style="background:#0fce6e;">4</span>西凤市图书馆</li>
</ul>
</div>
</div>

</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.7.2/d3.min.js"></script>
<script src="js/d3pie.min.js"></script>
<script>
var pie = new d3pie("pieChart", {
// "header": {
// "title": {
// "text": "Lots of Programming Languages",
// "fontSize": 24,
// "font": "open sans"
// },
// "subtitle": {
// "text": "A full pie chart to show off label collision detection and resolution.",
// "color": "#999999",
// "fontSize": 12,
// "font": "open sans"
// },
// "titleSubtitlePadding": 9
// },
"footer": {
"color": "#fff",
"fontSize": 10,
"font": "open sans",
"location": "bottom-left"
},
"size": {
"canvasWidth": 590,
"pieOuterRadius": "90%"
},
"data": {
"sortOrder": "value-desc",
"content": [{
"label": "西夏图书馆",
"value": 619,
"color": "#ff6d3a"
},
{
"label": "金凤区图书馆",
"value": 156,
"color": "#ffd55c"
},
{
"label": "兴庆区图书馆",
"value": 128,
"color": "#2b4458"
},
{
"label": "银川图书馆",
"value": 46,
"color": "#0fce6e"
},

]
},
"labels": {
"outer": {
"pieDistance": 32
},
"inner": {
"hideWhenLessThanPercentage": 3
},
"mainLabel": {
"fontSize": 12
},
"percentage": { //里面百分比颜色
"color": "#ffffff",
"decimalPlaces": 0
},
"value": {
"color": "#adadad",
"fontSize": 11
},
"lines": {
"enabled": true
},
"truncation": {
"enabled": true
}
},
"effects": {
"pullOutSegmentOnClick": {
"effect": "linear",
"speed": 400,
"size": 8
}
},
"misc": {
"gradient": {
"enabled": true,
"percentage": 100
}
}
});
</script>
<style>
.pieDiv{
margin-top: 20px;
}
.pieName{
color: #FFFFFF;
font-size: 28px;
margin: 0 0 20px 100px;
}
.pieChart {
float: left;
width: 600px;
}

.libname {
float: left;
color: #fff;
}

.libname li {
margin-top: 12px;
font-size: 16px
}
.criname{
width:400px;
float: right;

}
.diamond {
width: 14px;
height: 14px;
display: inline-block;
/*background-color: red;*/
transform: rotate(45deg);
-ms-transform: rotate(45deg);
/* Internet Explorer */
-moz-transform: rotate(45deg);
/* Firefox */
-webkit-transform: rotate(45deg);
/* Safari 和 Chrome */
-o-transform: rotate(45deg);
/* Opera */
margin: 0 10px 0 0;
/*让菱形浏览器上居中*/
}
.circle{
padding: 1px 7px;
display: inline-block;
border: none;
border-radius: 15px;
text-align: center;
margin-right: 10px;
}
</style>
</body>
</html>