2个饼图,不同颜色和不同数据

时间:2019-02-27 05:07:03

标签: javascript

我正在寻找创建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");

谢谢

0 个答案:

没有答案