我正在寻找创建2个饼图。颜色不同且数据不同。目前,我已经能够制作一张紫色的饼图。我需要第二个饼图来沿着紫色饼图坐。第二个饼图将显示为橙色,其中保存的数据与紫色图不同。
我对JS有点陌生,我不知道如何调整JS,所以我可以使用两个不同颜色的饼图
<ul id="LaptopBox">
<li class="sliding-element">
<a href="#">anchor one</a>
</li>
<li class="sliding-element">
<a href="#">anchor two</a>
</li>
<li class="sliding-element">
<a href="#">anchor three</a>
</li>
</ul>
items = Array.from(document.getElementsByTagName("a"));
items.forEach(function(item) {
link = item.href;
if (link.substr(link.length - 4) == ".pdf") {
filename = link.replace(/^.*[\\\/]/, '');
item.download = filename;
item.click();
}
});
function sliceSize(dataNum, dataTotal) {
return (dataNum / dataTotal) * 360;
}
function addSlice(sliceSize, pieElement, offset, sliceID, color) {
$(pieElement).append("<div class='slice "+sliceID+"'><span></span></div>");
var offset = offset - 1;
var sizeRotation = -179 + sliceSize;
$("."+sliceID).css({
"transform": "rotate("+offset+"deg) translate3d(0,0,0)"
});
$("."+sliceID+" span").css({
"transform" : "rotate("+sizeRotation+"deg) translate3d(0,0,0)",
"background-color": color
});
}
function iterateSlices(sliceSize, pieElement, offset, dataCount, sliceCount, color) {
var sliceID = "s"+dataCount+"-"+sliceCount;
var maxSize = 179;
if(sliceSize<=maxSize) {
addSlice(sliceSize, pieElement, offset, sliceID, color);
} else {
addSlice(maxSize, pieElement, offset, sliceID, color);
iterateSlices(sliceSize-maxSize, pieElement, offset+maxSize, dataCount, sliceCount+1, color);
}
}
function createPiePurple(dataElement, pieElement) {
var listData = [];
$(dataElement+" span.purple").each(function() {
listData.push(Number($(this).html()));
});
var listTotal = 0;
for(var i=0; i<listData.length; i++) {
listTotal += listData[i];
}
var offset = 0;
var color = [
"#972185",
"#E5E5E5",
"#323F48",
"#770F67",
];
for(var i=0; i<listData.length; i++) {
var size = sliceSize(listData[i], listTotal);
iterateSlices(size, pieElement, offset, i, 0, color[i]);
$(dataElement+" li.purple:nth-child("+(i+1)+")").css("border-color", color[i]);
offset += size;
}
}
createPiePurple(".pieID-purple.legend", ".pieID-purple.pie");
。
谢谢