动态圆环图无法正确计算条带的大小

Question

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

目前，它没有正确计算图表中的条带-这是我的fiddle 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;
}

Answer 1

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

Answer 2

你在计算中犯了错误。您必须正确旋转。

​

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

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


                <div class="clip clip-1" style="transform: rotate(0deg);">
                    <div class="item item-1" data-rel="90" style="transform: rotate(90deg);"></div>
                </div>


                <div class="clip clip-2" style="transform: rotate(90deg);">
                    <div class="item item-2" data-rel="180" style="transform: rotate(90deg);"></div>
                </div>


                <div class="clip clip-3" style="transform: rotate(270deg);">
                    <div class="item item-3" data-rel="270" style="transform: rotate(90deg);"></div>
                </div>


                <div class="clip clip-4" style="transform: rotate(180deg);">
                    <div class="item item-4" data-rel="360" style="transform: rotate(90deg);"></div>
                </div>


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

<!-- begin snippet: js hide: false console: true babel: false -->

​