php - 动态甜甜圈图无法正确计算 strip 尺寸

我正在尝试使用来自Wordpress中自定义字段的数据制作动态甜甜圈图。

目前，它无法正确计算图表​​中的带状-这是我的小提琴https://jsfiddle.net/sq6mh5wp/。仅作为示例，我将四个条带设置为四分之一，但是它只显示了三个条带，我在哪里出错？

这是实际的模板：

<div class="container">
  <div class="donut-chart-block block">
    <div class="donut-chart">

      <?php if( have_rows( 'pie_chart' ) ):
        $counter = 1; ?>
        <?php while( have_rows( 'pie_chart' ) ): the_row(); ?>

          <div class="clip clip-<?php echo $counter; ?>" style="transform: rotate(<?php echo the_sub_field( 'number' ); ?>deg);">
            <div class="item item-<?php echo $counter; ?>" data-rel="<?php echo the_sub_field( 'number' ); ?>" style="transform: rotate(<?php echo the_sub_field( 'number' ); ?>deg);"></div>
          </div>

        <?php $counter++;
        endwhile; ?>
      <?php endif; ?>

      <div class="center"></div>
    </div>
  </div>
</div>

这是CSS：

.donut-chart-block {
  overflow: hidden;
}

.donut-chart {
    position: relative;
  width: 200px;
  height: 200px;
  margin: 0px;
  border-radius: 100%;
  margin-left: auto;
  margin-right: auto;
}

.donut-chart .center {
    background: white;
    position: absolute;
    top: 50px;
    left: 50px;
    height: 100px;
    width: 100px;
    border-radius: 70px;
}

.clip {
  border-radius: 50%;
  clip: rect(0px, 200px, 200px, 100px);
  height: 100%;
  position: absolute;
  width: 100%;
}

.item {
  border-radius: 50%;
  clip: rect(0px, 100px, 200px, 0px);
  height: 100%;
  position: absolute;
  width: 100%;
  font-family: monospace;
  font-size: 1.5rem;
}

.donut-chart .item-1 {
  background-color: #178c8e;
}

.donut-chart .item-2 {
  background-color: #1e5eaa;
}

.donut-chart .item-3 {
  background-color: #eac947;
}

.donut-chart .item-4 {
  background-color: #143753;
}

.donut-chart .item-5 {
  background-color: #0faeb1;
}

最佳答案

您的第一个剪辑设置为0度旋转。但是，饼图上的0度的宽度为0。零=零，因此您需要将第一个剪辑更改为正数。然后，您将需要相应地调整其余部分。