javascript - CSS/JS 饼图不会超过 180 度

Question

我使用 vanilla css/js 创建了一个饼图。它似乎适用于任何 0-180 度，但当我尝试超过 180 度时，旋转似乎走错了方向。请参阅 js fiddle :

<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/

Answer 1

我最终为超过 180 度的部分做了 2 个切片:

<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/