我已经用vanilla css/js创建了一个饼图。在0-180度的范围内似乎都可以,但当我试图超过180度时,旋转方向似乎不对。看js小提琴:
<div class="pieContainer">
<div class="pieBackground"></div>
<div id="approvedSlice" class="hold">
<div id="approvedSlicePie" class="pie"></div>
</div>
</div>
<script>
document.getElementById("approvedSlice").style.transform = 'rotate(0deg)';
document.getElementById("approvedSlicePie").style.transform = 'rotate(305deg)';
</script>
<style>
.pieContainer {
display: inline-block;
position: relative;
top: 130px;
padding: 6px;
height: 40px;
}
.pieBackground {
position: absolute;
width: 40px;
height: 40px;
border-radius: 100%;
box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
}
.pie {
transition: all 1s;
position: absolute;
width: 40px;
height: 40px;
border-radius: 100%;
clip: rect(0px, 20px, 40px, 0px);
}
.hold {
position: absolute;
width: 40px;
height: 40px;
border-radius: 100%;
clip: rect(0px, 40px, 40px, 20px);
}
#approvedSlicePie {
background-color: #0a0;
}
</style>
https://jsfiddle.net/myvth518/
最佳答案
我最后做了两个切片,比较180度的部分:
<div class="pieContainer">
<div class="pieBackground"></div>
</div>
<style>
.pieContainer {
display: inline-block;
position: relative;
top: 130px;
padding: 6px;
height: 40px;
}
.pieBackground {
position: absolute;
width: 40px;
height: 40px;
border-radius: 100%;
box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
}
.pie {
transition: all 1s;
position: absolute;
width: 40px;
height: 40px;
border-radius: 100%;
clip: rect(0px, 20px, 40px, 0px);
}
.hold {
position: absolute;
width: 40px;
height: 40px;
border-radius: 100%;
clip: rect(0px, 40px, 40px, 20px);
}
</style>
<script>
GeneratePieSlice('#0a0', 'firstSlice', 0, 200);
GeneratePieSlice('#1d0eff', 'secondSlice', 200, 100);
GeneratePieSlice('#aa0000', 'thirdSlice', 300, 60);
function GeneratePieSlice(color, baseName, startPoint, length){
CreatePieRelatedDivs(color, baseName);
if (length <= 180) {
document.getElementById(baseName).style.transform = `rotate(${startPoint}deg)`;
document.getElementById(baseName + "pie").style.transform = `rotate(${length}deg)`;
return;
} else {
CreatePieRelatedDivs(color, baseName, true);
var pie1Start = startPoint;
var pie1End = 180;
var pie2Start = pie1Start + 180;
var pie2End = length - 180;
document.getElementById(baseName).style.transform = `rotate(${pie1Start}deg)`;
document.getElementById(baseName + "pie").style.transform = `rotate(${pie1End}deg)`;
document.getElementById(baseName + "2").style.transform = `rotate(${pie2Start}deg)`;
document.getElementById(baseName + "pie2").style.transform = `rotate(${pie2End}deg)`;
return;
}
}
function CreatePieRelatedDivs(color, baseName, helper = false){
var approvedSliceId = "";
var pieId = "";
if (!helper){
approvedSliceId = baseName;
pieId = baseName + "pie";
} else {
approvedSliceId = baseName + "2";
pieId = baseName + "pie2";
}
var approvedSlice = document.createElement("div");
approvedSlice.id = approvedSliceId;
approvedSlice.className = "hold";
var pie = document.createElement("div");
pie.id = pieId;
pie.className = "pie";
pie.style = `background-color: ${color}`;
$('.pieContainer').append(approvedSlice);
$(`#${approvedSliceId}`).append(pie);
}
</script>
https://jsfiddle.net/myvth518/133/