php - 动态 donut chart 无法正确计算 strip 的大小

Question

我正在尝试使用来自 Wordpress 自定义字段的数据制作一个动态圆环图。

目前它没有正确计算图表​​中的 strip - 这是我的 fiddle https://jsfiddle.net/sq6mh5wp/ .举个例子，我将四个 strip 设置为四分之一，但它只显示 3 个 strip ，我哪里出错了？

这是实际的模板:

<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;
}

Answer 1

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