gpt4 book ai didi

jquery - 制作饼图问题

转载 作者:行者123 更新时间:2023-11-27 22:57:19 24 4
gpt4 key购买 nike

我正在创建一个饼图,但没有变成我想要的。所以有人可以帮助我。

我想在下面的图像中制作图表。我现在想制作一个饼图作为图像。所以有人可以正确的 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>

但我想成为这个形象 enter image description here

最佳答案

您需要更改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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com