在css的每个切片上创建半个饼图

Question

我正在尝试在每个切片上创建带有数字的饼图，并仅显示饼图的上半部分，因此它看起来或多或少像这个图像：

到目前为止，我的尝试是创建我的切片：https://jsfiddle.net/xbou5704/

.pie_chart {
    position: relative;
    width: 500px;
    height: 500px;
}

.pie {
    position: absolute;
    width: 100%;
    height: 100%;
    clip: rect(0 500px 500px 250px);
}

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

.pie.one {
    transform: rotate(-90deg);
}

.pie.two {
    transform: rotate(-70deg);
}

.pie.three {
    transform: rotate(-50deg);
}

.pie.four {
    transform: rotate(-30deg);
}

.pie.five {
    transform: rotate(-10deg);
}

.pie.six {
    transform: rotate(10deg);
}

.pie.seven {
    transform: rotate(30deg);
}

.pie.eight {
    transform: rotate(50deg);
}

.pie.nine {
    transform: rotate(70deg);
}

.pie .slice {
    transform: rotate(20deg);
}

.pie.one .slice {
    background-color: #A7A9AC;
}

.pie.two .slice {
    background-color: #A7A9AC;
}

.pie.three .slice {
    background-color: #A7A9AC;
}

.pie.four .slice {
    background-color: #A7A9AC;
}

.pie.five .slice {
    background-color: #A7A9AC;
}

.pie.six .slice {
    background-color: #A7A9AC;
}

.pie.seven .slice {
    background-color: #A7A9AC;
}

.pie.eight .slice {
    background-color: #A7A9AC;
}

.pie.nine .slice {
    background-color: #A7A9AC;
}

<div class="pie_chart">
    <div class="pie one">
      <div class="slice">
        <div class="text">0</div>
      </div>
    </div>
    <div class="pie two">
      <div class="slice">
        <div class="text">10</div>
      </div>
    </div>
    <div class="pie three">
      <div class="slice">
        <div class="text">20</div>
      </div>
    </div>
    <div class="pie four">
      <div class="slice">
        <div class="text">30</div>
      </div>
    </div>
    <div class="pie five">
      <div class="slice">
        <div class="text">40</div>
      </div>
    </div>
    <div class="pie six">
      <div class="slice">
        <div class="text">50</div>
      </div>
    </div>
    <div class="pie seven">
      <div class="slice">
        <div class="text">60</div>
      </div>
    </div>
    <div class="pie eight">
      <div class="slice">
        <div class="text">70</div>
      </div>
    </div>
    <div class="pie nine">
      <div class="slice">
        <div class="text">80</div>
      </div>
    </div>
  </div>

由于某些原因，我的数字没有显示，我假设它与我的CSS中的clip: rect()有关。

一旦我获得正确的CSS，我将尝试使用javascript为这个饼设置动画，使其逆时针旋转并动态显示更多数字，增加10。

我对创建实际的切片视觉效果并不太感兴趣。我只需要将文本定位在其实际切片的中心，因为稍后我将使用javascript逆时针旋转文本的旋转。

非常感谢任何帮助

Answer 1

您可以通过调整左上角和左上角的值来使用绝对定位：

.slice .text{
  color:white;
  font-weight:bold;
  transform: rotate(-10deg);
  position:absolute;
  top:5%;
  left:40%;
}

对齐切片容器中的文本。

.pie_chart {
    position: relative;
    width: 500px;
    height: 500px;
}

.pie {
    position: absolute;
    width: 100%;
    height: 100%;
    clip: rect(0 500px 500px 250px);
}

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

.pie.one {
    transform: rotate(-90deg);
}

.pie.two {
    transform: rotate(-70deg);
}

.pie.three {
    transform: rotate(-50deg);
}

.pie.four {
    transform: rotate(-30deg);
}

.pie.five {
    transform: rotate(-10deg);
}

.pie.six {
    transform: rotate(10deg);
}

.pie.seven {
    transform: rotate(30deg);
}

.pie.eight {
    transform: rotate(50deg);
}

.pie.nine {
    transform: rotate(70deg);
}

.pie .slice {
    transform: rotate(20deg);
}

.pie.one .slice {
    background-color: #A7A9AC;
}

.pie.two .slice {
    background-color: #A7A9AC;
}

.pie.three .slice {
    background-color: #A7A9AC;
}

.pie.four .slice {
    background-color: #A7A9AC;
}

.pie.five .slice {
    background-color: gold;
}

.pie.six .slice {
    background-color: #A7A9AC;
}

.pie.seven .slice {
    background-color: #A7A9AC;
}

.pie.eight .slice {
    background-color: #A7A9AC;
}

.pie.nine .slice {
    background-color: #A7A9AC;
}

.slice .text{
  color:white;
  font-weight:bold;
  position:absolute;
  transform: rotate(-10deg);
  top:5%;
  left:40%;
}

<div class="pie_chart">
    <div class="pie one">
      <div class="slice">
        <div class="text">0</div>
      </div>
    </div>
    <div class="pie two">
      <div class="slice">
        <div class="text">10</div>
      </div>
    </div>
    <div class="pie three">
      <div class="slice">
        <div class="text">20</div>
      </div>
    </div>
    <div class="pie four">
      <div class="slice">
        <div class="text">30</div>
      </div>
    </div>
    <div class="pie five">
      <div class="slice">
        <div class="text">40</div>
      </div>
    </div>
    <div class="pie six">
      <div class="slice">
        <div class="text">50</div>
      </div>
    </div>
    <div class="pie seven">
      <div class="slice">
        <div class="text">60</div>
      </div>
    </div>
    <div class="pie eight">
      <div class="slice">
        <div class="text">70</div>
      </div>
    </div>
    <div class="pie nine">
      <div class="slice">
        <div class="text">80</div>
      </div>
    </div>
  </div>

Answer 2

您尚未添加课程文字。如果你添加这个：

.text{
  text-align:center;
  z-index:2;
  padding-left:40%;
  padding-right:60%;
}

它将使文本div显示在饼图切片的顶部，并将数字居中于div上。如果你想让它们居中，你可以玩填充物。

Working fiddle here.

Answer 3

你需要撤消文本上的旋转，否则数字会很难。

.text{
transform: rotate(-10deg);
text-align:center;
margin-left: -15%;
margin-top:1em;
}

见工作pen