如何在CSS中制作饼图

Question

如何使用CSS创建一个饼图,如下所示？

Answer 1

天啊!你看过谷歌图表工具吗？

https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart

这很容易实现,但我的问题是"外部api"部分.如果谷歌决定可以这个或谷歌下来,再见图表!但就美观和其他图表的选择而言,谷歌排行榜有点酷.

Answer 2

我发现这是最简单的纯CSS解决方案。下面略有简化。

    .pieContainer {
      height: 150px;
      position: relative;
    }
    
    .pieBackground {
      position: absolute;
      width: 150px;
      height: 150px;
      border-radius: 100%;
      box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
    } 
    
    .pie {
      transition: all 1s;
      position: absolute;
      width: 150px;
      height: 150px;
      border-radius: 100%;
      clip: rect(0px, 75px, 150px, 0px);
    }
    
    .hold {
      position: absolute;
      width: 150px;
      height: 150px;
      border-radius: 100%;
      clip: rect(0px, 150px, 150px, 75px);
    }
    
    #pieSlice1 .pie {
      background-color: #1b458b;
      transform:rotate(30deg);
    }
    
    #pieSlice2 {
      transform: rotate(30deg);
    }
    
    #pieSlice2 .pie {
      background-color: #0a0;
      transform: rotate(60deg);
    }
    
    #pieSlice3 {
      transform: rotate(90deg);
    }
    
    #pieSlice3 .pie {
      background-color: #f80;
      transform: rotate(120deg);
    }
    
    #pieSlice4 {
      transform: rotate(210deg);
    }
    
    #pieSlice4 .pie {
      background-color: #08f;
      transform: rotate(10deg);
    }
    
    #pieSlice5 {
      transform: rotate(220deg);
    }
    
    #pieSlice5 .pie {
      background-color: #a04;
      transform: rotate(70deg);
    }
    
    #pieSlice6 {
      transform: rotate(290deg);
    }
    
    #pieSlice6 .pie {
      background-color: #ffd700;
      transform: rotate(70deg);
    }
    
    .innerCircle {
      position: absolute;
      width: 120px;
      height: 120px;
      background-color: #444;
      border-radius: 100%;
      top: 15px;
      left: 15px; 
      box-shadow: 0px 0px 8px rgba(0,0,0,0.5) inset;
      color: white;
    }
    .innerCircle .content {
      position: absolute;
      display: block;
      width: 120px;
      top: 30px;
      left: 0;
      text-align: center;
      font-size: 14px;
    }

    <div class="pieContainer">
      <div class="pieBackground"></div>
      <div id="pieSlice1" class="hold"><div class="pie"></div></div>
      <div id="pieSlice2" class="hold"><div class="pie"></div></div>
      <div id="pieSlice3" class="hold"><div class="pie"></div></div>
      <div id="pieSlice4" class="hold"><div class="pie"></div></div>
      <div id="pieSlice5" class="hold"><div class="pie"></div></div>
      <div id="pieSlice6" class="hold"><div class="pie"></div></div>
      <div class="innerCircle"><div class="content"><b>Data</b><br>from 16<sup>th</sup> April, 2014</div></div>
    </div>

Answer 3

我看到有人选择了Google Developers Tool，它非常难用，它也使用JS，而您只需要CSS。因此，这是使用背景渐变制作的最简单的方法，即Pure CSS。

.pie {
  width: 400px;
  height: 400px;
  background-image: conic-gradient(orange 64%, blue 17%, black);
  border-radius: 50%
}

<div class="pie"></div>