我正在创建一个饼图，但没有变成我想要的。所以有人可以帮助我。
我想在下面的图像中制作图表。我现在想制作一个饼图作为图像。所以有人可以正确的 html css 和 js 代码
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.bootcss.com/easy-pie-chart/2.1.4/jquery.easypiechart.min.js"></script>
</head>
<style>
.epie-chart {
width: 150px;
height: 150px;
position: re;
}
.epie-chart p {
display: inline-block;
position: absolute;
line-height: 24px;
text-align: center;
width: 114px;
font-size: 39px;
color: #ff6500;
}
</style>
<body>
<div class="epie-chart" data-percent="75">
<p>75%</p>
</div>
<div class="epie-chart" data-percent="90">
<p>90%</p>
</div>
<div class="epie-chart" data-percent="69">
<p>69%</p>
</div>
<div class="epie-chart" data-percent="79">
<p>79%</p>
</div>
</body>
<script type="text/javascript">
$(function() {
$('.epie-chart').easyPieChart({
easing: 'easeInOut',
barColor: 'white',
trackColor: 'blue',
scaleColor: false,
scaleLength: 5,
lineCap: 'butt',
lineWidth: 55,
size: 110,
rotate: 360,
animate: {
duration: 1000,
enabled: true
},
onStep: function(from, to, percent) {
$(this.el).find('.percent').text(Math.round(percent) + '%');
}
});
});
</script>
</html>但我想成为这个形象
最佳答案
您需要更改lineWidth
$(function() {
$('.epie-chart').easyPieChart({
easing: 'easeInOut',
barColor: 'white',
trackColor: 'blue',
scaleColor: false,
scaleLength: 5,
lineCap: 'butt',
lineWidth: 20,
size: 110,
rotate: 360,
animate: {
duration: 1000,
enabled: true
},
onStep: function(from, to, percent) {
$(this.el).find('.percent').text(Math.round(percent) + '%');
}
});
});.epie-chart {
width: 110px;
height: 110px;
display: block;
border-radius: 50%;
border: 2px solid #EC5F51;
position:relative;
}
.epie-chart:before{
content: "";
position: absolute;
width: 75px;
height: 70px;
background: white;
z-index: 0;
border-radius: 50%;
left: 17px;
top: 20px;
line-height: 114px;
text-align: center;
border: 1px solid;
}
.epie-chart p {
display: inline-block;
position: absolute;
line-height: 24px;
text-align: center;
width: 114px;
font-size: 39px;
color: #ff6500;
}<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.bootcss.com/easy-pie-chart/2.1.4/jquery.easypiechart.min.js"></script>
<div class="epie-chart" data-percent="75">
<p>75%</p>
</div>
<div class="epie-chart" data-percent="90">
<p>90%</p>
</div>
<div class="epie-chart" data-percent="69">
<p>69%</p>
</div>
<div class="epie-chart" data-percent="79">
<p>79%</p>
</div>关于jquery - 制作饼图问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59193170/