如何在CSS中制作饼图

How can I create a pie chart with CSS like the one below?

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

4 个解决方案

#1

Oh my! Have you seen Google Chart Tools?

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

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

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

This is stupid easy to implement, but my problem with it is the "external api" part. If google decides to can this or google goes down, bye bye chart! But as far as beauty and the selection of other charts, google charts is kinda a cool find.

这很容易实现，但我的问题是“外部api”部分。如果谷歌决定可以这个或谷歌下降，再见图表！但就美丽和其他图表的选择而言，谷歌排行榜有点酷。

#2

I was looking for ways to build these pies, either via pure CSS or even using some Javascript. Today I found an article on SmashingMagazine that points to a talk from Lea Verou where she totally nails the subject. It's really, really worth the watch!

我正在寻找通过纯​​CSS或甚至使用一些Javascript来构建这些馅饼的方法。今天我发现了一篇关于SmashingMagazine的文章，指出Lea Verou的一个演讲，她完全指出了这个主题。这真的值得一看！

#3

I find this the easiest CSS-only solution. Somewhat simplified below.

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

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

In the CSS below, each slice st

在下面的CSS中，每个切片st

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

#4

As far as I'm aware this is no (yet) possible with css3. However the new html5 canvas element provides everything you want. It can easily be accessed and used over javascript. A small tutorial on the basic usage can be found here.

据我所知，css3可能没有（尚未）。然而，新的html5 canvas元素提供了你想要的一切。它可以通过javascript轻松访问和使用。有关基本用法的小教程可以在这里找到。

An other question on * even was on the same topic. See "HTML5 Canvas pie chart". (There is "Graphing Data in the HTML5 Canvas Element Part IV Simple Pie Charts" in the first answer to a tutorial about pie charts using canvas elements)

*上的另一个问题甚至是关于同一主题。请参阅“HTML5 Canvas饼图”。 （在使用canvas元素的饼图教程的第一个答案中有“HTML5 Canvas Element Part 4 Simple Pie Charts中的图形数据”）