[英]Two jquery pie charts same page
I have two adjustable jquery pie charts on the same page.我在同一页面上有两个可调整的 jquery 饼图。 I added PieID2 to create the second chart, but the first chart isn't completing the 360 degree circle now.
我添加了 PieID2 来创建第二个图表,但第一个图表现在没有完成 360 度圆。 Can anyone assist?
有人可以帮忙吗? I'm not sure what I need to change or add to get multiple pie charts on the same page and have all charts functioning properly.
我不确定需要更改或添加什么才能在同一页面上获取多个饼图并让所有图表正常运行。
https://codepen.io/Goatsy/pen/abYJQzE https://codepen.io/Goatsy/pen/abYJQzE
<section>
<div class="pieID pie">
</div>
<ul class="pieID legend">
<li>
<em>Unsheltered</em>
<span>514</span>
</li>
<li>
<em>Sheltered</em>
<span>410</span>
</li>
</ul>
</section>
<section>
<div class="pieID2 pie">
</div>
<ul class="pieID2 legend">
<li>
<em>Adults (25-60)</em>
<span>304</span>
</li>
<li>
<em>Youth (18-24)</em>
<span>87</span>
</li>
<li>
<em>Seniors</em>
<span>35</span>
</li>
<li>
<em>Children</em>
<span>4</span>
</li>
<li>
<em>Unknown</em>
<span>81</span>
</li>
</ul>
</section>
JS: JS:
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 createPie(dataElement, pieElement) {
var listData = [];
$(dataElement+" span").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 = [
"#182a54",
"#025971",
"#ecaa20",
"#5a622b",
"#82332e",
"purple",
"turquoise",
"forestgreen",
"navy",
"gray"
];
for(var i=0; i<listData.length; i++) {
var size = sliceSize(listData[i], listTotal);
iterateSlices(size, pieElement, offset, i, 0, color[i]);
$(dataElement+" li:nth-child("+(i+1)+")").css("border-color", color[i]);
offset += size;
}
}
createPie(".pieID.legend", ".pieID.pie");
createPie(".pieID2.legend", ".pieID2.pie");
The data from 1st class overrides the data from 1st pie since they both are asigned same slice class in function addSlice
第一类的数据会覆盖第一类的数据,因为它们都在函数
addSlice
中分配了相同的切片类
To Avoid this you need to modify 2 things in function addSlice
为了避免这种情况,您需要修改函数
addSlice
中的两件事
$("."+sliceID).css
to $(pieElement + " ."+sliceID).css
$("."+sliceID).css
更改为$(pieElement + " ."+sliceID).css
$("."+sliceID+" span").css
to $(pieElement + " ."+sliceID+" span").css
$("."+sliceID+" span").css
更改为$(pieElement + " ."+sliceID+" span").css
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; $(pieElement + " ."+sliceID).css({ "transform": "rotate("+offset+"deg) translate3d(0,0,0)" }); $(pieElement + " ."+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 createPie(dataElement, pieElement) { var listData = []; $(dataElement+" span").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 = [ "#182a54", "#025971", "#ecaa20", "#5a622b", "#82332e", "purple", "turquoise", "forestgreen", "navy", "gray" ]; for(var i=0; i<listData.length; i++) { var size = sliceSize(listData[i], listTotal); iterateSlices(size, pieElement, offset, i, 0, color[i]); $(dataElement+" li:nth-child("+(i+1)+")").css("border-color", color[i]); offset += size; } } createPie(".pieID.legend", ".pieID.pie"); createPie(".pieID2.legend", ".pieID2.pie");
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700); @keyframes bake-pie { from { transform: rotate(0deg) translate3d(0,0,0); } } body { font-family: "Open Sans", Arial; background: #EEE; } main { width: 400px; margin: 30px auto; } section { margin-top: 30px; } .pieID { display: inline-block; vertical-align: top; } .pieID2 { display: inline-block; vertical-align: top; } .pie { height: 200px; width: 200px; position: relative; margin: 0 30px 30px 0; } .pie::before { content: ""; display: block; position: absolute; z-index: 1; width: 100px; height: 100px; background: #EEE; border-radius: 50%; top: 50px; left: 50px; } .pie::after { content: ""; display: block; width: 120px; height: 2px; background: rgba(0,0,0,0.1); border-radius: 50%; box-shadow: 0 0 3px 4px rgba(0,0,0,0.1); margin: 220px auto; } .slice { position: absolute; width: 200px; height: 200px; clip: rect(0px, 200px, 200px, 100px); animation: bake-pie 1s; } .slice span { display: block; position: absolute; top: 0; left: 0; background-color: black; width: 200px; height: 200px; border-radius: 50%; clip: rect(0px, 200px, 200px, 100px); } .legend { list-style-type: none; padding: 0; margin: 0; background: #FFF; padding: 15px; font-size: 13px; box-shadow: 1px 1px 0 #DDD, 2px 2px 0 #BBB; } .legend li { width: 110px; height: 1.25em; margin-bottom: 0.7em; padding-left: 0.5em; border-left: 1.25em solid black; } .legend em { font-style: normal; } .legend span { float: right; } footer { position: fixed; bottom: 0; right: 0; font-size: 13px; background: #DDD; padding: 5px 10px; margin: 5px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section> <div class="pieID pie"></div> <ul class="pieID legend"> <li><em>Unsheltered</em><span>514</span></li> <li><em>Sheltered</em><span>410</span></li> </ul> </section> <section> <div class="pieID2 pie"></div> <ul class="pieID2 legend"> <li><em>Adults (25-60)</em><span>304</span></li> <li><em>Youth (18-24)</em><span>87</span></li> <li><em>Seniors</em><span>35</span></li> <li><em>Children</em><span>4</span></li> <li><em>Unknown</em><span>81</span></li> </ul> </section>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.