如何用CSS創(chuàng)建一個(gè)類似下圖的餅狀圖？

我看到一些人選擇谷歌開發(fā)者工具，它很難，而且它也使用JS，你只想要CSS。所以這里是最簡(jiǎn)單的方法，純CSS，用背景漸變做出來的。

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

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

我發(fā)現(xiàn)這是最簡(jiǎn)單的純CSS解決方案。下面稍微簡(jiǎn)化一下。

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

我的天啊。你見過谷歌圖表工具嗎？

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

這很容易實(shí)現(xiàn)，但是我的問題是“外部api”部分。如果谷歌決定這樣做，或者谷歌倒下了，再見圖表！但是就美麗和其他圖表的選擇而言，谷歌圖表是一個(gè)很酷的發(fā)現(xiàn)。

據(jù)我所知，這在css3上是不可能的。然而，新的html5 canvas元素提供了您想要的一切。可以通過javascript輕松訪問和使用它。關(guān)于基本用法的小教程可以在這里找到。

stackoverflow上的另一個(gè)問題也是同樣的主題。參見“HTML5畫布餅圖”。(在關(guān)于使用畫布元素的餅圖教程的第一個(gè)答案中有“在HTML5畫布元素第四部分簡(jiǎn)單的餅圖中繪制數(shù)據(jù)”

我嘗試了一些答案，它們對(duì)我來說太復(fù)雜了，很難用動(dòng)態(tài)數(shù)據(jù)集來適應(yīng)。 我不需要將數(shù)據(jù)打印在圖表中，所以我最終采用了最簡(jiǎn)單的解決方案:

<div style="
        border-radius: 100%;
        width: 150px;
        aspect-ratio: 1;
        background: conic-gradient(blue 0deg 172deg, red 172deg 249deg, yellow 249deg 313deg, green 313deg 333deg, lightgreen 333deg 347deg, gold 347deg 360deg, pink 360deg 360deg
            );
    "></div>

通常用純css創(chuàng)建圖表并不是最好的方法。最好使用canvas或外部庫。

下面是一個(gè)不使用外部庫的餅狀圖，使用html5 canvas (fiddle):

var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");
var lastend = 0;
var data = [60,210,90];
var myTotal = 0;
var myColor = ['#afcc4c', '#95b524','#c1dd54'];
var labels = ['B', 'A', 'C'];

for(var e = 0; e < data.length; e++)
{
  myTotal += data[e];
}

// make the chart 10 px smaller to fit on canvas
var off = 10
var w = (canvas.width - off) / 2
var h = (canvas.height - off) / 2
for (var i = 0; i < data.length; i++) {
  ctx.fillStyle = myColor[i];
  ctx.strokeStyle ='white';
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.moveTo(w,h);
  var len =  (data[i]/myTotal) * 2 * Math.PI
  var r = h - off / 2
  ctx.arc(w , h, r, lastend,lastend + len,false);
  ctx.lineTo(w,h);
  ctx.fill();
  ctx.stroke();
  ctx.fillStyle ='white';
  ctx.font = "20px Arial";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  var mid = lastend + len / 2
  ctx.fillText(labels[i],w + Math.cos(mid) * (r/2) , h + Math.sin(mid) * (r/2));
  lastend += Math.PI*2*(data[i]/myTotal);
}

html, body{
  background: #c4c9e9
}

<canvas id="can" width="200" height="200" />

只使用HTML和CSS最簡(jiǎn)單的方法是使用下面的代碼:

.graph {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  margin: 50px 0;
  width: 150px;
  text-align: center;
}

.pie {
  width: 150px;
  aspect-ratio:1;
  position:absolute;
}
.pie:before,
.pie:after {
  content:"";
  position:absolute;
  border-radius:50%;
}
.pie:before {
  inset:0;
  background: radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
          conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
}
.no-round:before {
  background-size:0 0,auto;
}
.no-round:after {
  content:none;
}

<div style="display: flex; justify-content: center">
  <div style="display: flex; flex-flow: wrap; justify-content: space-around; max-width: 400px; width: 100%">
    <div class="graph" title="some title to display on hover">
      <div class="pie no-round" style="--p:83;--c:#FC4819;--b:15px"></div>
      <div class="pie no-round" style="--p:11;--c:#0089B0;--b:15px; rotate: 0.83turn"></div>
      <div class="pie no-round" style="--p:6;--c:#23B032;--b:15px;rotate: 0.94turn"></div>
    </div>
  </div>                        
</div>

我在CodePen上找到了這個(gè)解決方案。您可以更改數(shù)據(jù)屬性中的值，這正是我所尋求的:

/* 
  make each pie piece a rectangle twice as high as it is wide.
  move the transform origin to the middle of the left side.
  Also ensure that overflow is set to hidden.
*/
  .pie {
        position:absolute;
        width:100px;
        height:200px;
        overflow:hidden;
        left:150px;
        -moz-transform-origin:left center;
        -ms-transform-origin:left center;
        -o-transform-origin:left center;
        -webkit-transform-origin:left center;
        transform-origin:left center;
    }
/*
  unless the piece represents more than 50% of the whole chart.
  then make it a square, and ensure the transform origin is
  back in the center.

  NOTE: since this is only ever a single piece, you could
  move this to a piece specific rule and remove the extra class
*/
    .pie.big {
        width:200px;
        height:200px;
        left:50px;
        -moz-transform-origin:center center;
        -ms-transform-origin:center center;
        -o-transform-origin:center center;
        -webkit-transform-origin:center center;
        transform-origin:center center;
    }
/*
  this is the actual visible part of the pie. 
  Give it the same dimensions as the regular piece.
  Use border radius make it a half circle.
  move transform origin to the middle of the right side.
  Push it out to the left of the containing box.
*/
    .pie:BEFORE {
        content:"";
        position:absolute;
        width:100px;
        height:200px;
        left:-100px;
        border-radius:100px 0 0 100px;
        -moz-transform-origin:right center;
        -ms-transform-origin:right center;
        -o-transform-origin:right center;
        -webkit-transform-origin:right center;
        transform-origin:right center;
        
    }
 /* if it's part of a big piece, bring it back into the square */
    .pie.big:BEFORE {
        left:0px;
    }
/* 
  big pieces will also need a second semicircle, pointed in the
  opposite direction to hide the first part behind.
*/
    .pie.big:AFTER {
        content:"";
        position:absolute;
        width:100px;
        height:200px;
        left:100px;
        border-radius:0 100px 100px 0;
    }
/*
  add colour to each piece.
*/
    .pie:nth-of-type(1):BEFORE,
    .pie:nth-of-type(1):AFTER {
        background-color:blue;  
    }
    .pie:nth-of-type(2):AFTER,
    .pie:nth-of-type(2):BEFORE {
        background-color:green; 
    }
    .pie:nth-of-type(3):AFTER,
    .pie:nth-of-type(3):BEFORE {
        background-color:red;   
    }
    .pie:nth-of-type(4):AFTER,
    .pie:nth-of-type(4):BEFORE {
        background-color:orange;    
    }
/*
  now rotate each piece based on their cumulative starting
  position
*/
    .pie[data-start="30"] {
        -moz-transform: rotate(30deg); /* Firefox */
        -ms-transform: rotate(30deg); /* IE */
        -webkit-transform: rotate(30deg); /* Safari and Chrome */
        -o-transform: rotate(30deg); /* Opera */
        transform:rotate(30deg);
    }
    .pie[data-start="60"] {
        -moz-transform: rotate(60deg); /* Firefox */
        -ms-transform: rotate(60deg); /* IE */
        -webkit-transform: rotate(60deg); /* Safari and Chrome */
        -o-transform: rotate(60deg); /* Opera */
        transform:rotate(60deg);
    }
    .pie[data-start="100"] {
        -moz-transform: rotate(100deg); /* Firefox */
        -ms-transform: rotate(100deg); /* IE */
        -webkit-transform: rotate(100deg); /* Safari and Chrome */
        -o-transform: rotate(100deg); /* Opera */
        transform:rotate(100deg);
    }
/*
  and rotate the amount of the pie that's showing.

  NOTE: add an extra degree to all but the final piece, 
  to fill in unsightly gaps.
*/
    .pie[data-value="30"]:BEFORE {
        -moz-transform: rotate(31deg); /* Firefox */
        -ms-transform: rotate(31deg); /* IE */
        -webkit-transform: rotate(31deg); /* Safari and Chrome */
        -o-transform: rotate(31deg); /* Opera */
        transform:rotate(31deg);
    }
    .pie[data-value="40"]:BEFORE {
        -moz-transform: rotate(41deg); /* Firefox */
        -ms-transform: rotate(41deg); /* IE */
        -webkit-transform: rotate(41deg); /* Safari and Chrome */
        -o-transform: rotate(41deg); /* Opera */
        transform:rotate(41deg);
    }
    .pie[data-value="260"]:BEFORE {
        -moz-transform: rotate(260deg); /* Firefox */
        -ms-transform: rotate(260deg); /* IE */
        -webkit-transform: rotate(260deg); /* Safari and Chrome */
        -o-transform: rotate(260deg); /* Opera */
        transform:rotate(260deg);
    }
/*
NOTE: you could also apply custom classes (i.e. .s0 .v30)
but if the CSS3 attr() function proposal ever gets implemented,
then all the above custom piece rules could be replaced with
the following:

.pie[data-start] {
   transform:rotate(attr(data-start,deg,0);
}
.pie[data-value]:BEFORE {
   transform:rotate(attr(data-value,deg,0);
}
*/

<!-- 
for each piece of the pie chart create one div and give it
a data-value attribute that represents the amount (in degrees) that
represents its total visible portion, and a data-start attribute
that matches the amount rotation for the starting  (the cumulative value amount of all the previous pieces).

 
-->
<div class="pie" data-start="0" data-value="30"></div>
<div class="pie highlight" data-start="30" data-value="30"></div>
<div class="pie" data-start="60" data-value="40"></div>
<div class="pie big" data-start="100" data-value="260"></div>

以Aaditya Pandey為例，這是一個(gè)非常簡(jiǎn)單易用的解決方案，僅使用CSS:

.pie {
  width: 200px;
  height: 200px;
  background-image: conic-gradient(orange 50%, blue 50% 75%, red 75% 90%, green 90%);
  border-radius: 50%
}

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

你可以使用圓錐曲線漸變，當(dāng)你需要一些簡(jiǎn)單的東西時(shí)，它是很好的。但是看起來不會(huì)很棒。

你將得到一個(gè)更平滑的餅圖，帶有剪輯路徑和變換。當(dāng)值超過50%時(shí)，您只需要有一點(diǎn)邏輯來翻轉(zhuǎn)顏色和變換。

.smooth-pie-2 {
  clip-path: circle(50%);
  position: relative;
  display: block;
  width: 100px;
  height: 100px;
  background-color: #005744;
  box-sizing: border-box;
}

.smooth-pie-2 .after,
.smooth-pie-2 .before {
  position: absolute;
  display: none;
  width: 100px;
  height: 100px;
  background-color: #00AF89;
  box-sizing: border-box;
}

@supports(clip-path: circle(50%)) {
  .smooth-pie-2 .after,
  .smooth-pie-2 .before {
    display: block;
  }
}


/* just for demo */

main {
  display: flex;
  gap: 2em;
  font-family: sans-serif;
  margin: 0 2em;
}

section {
  display: flex;
  gap: 1em;
  flex-flow: column;
  font-family: sans-serif;
}

<main>
  <section>
    <h2>Smooth</h2>
    <!-- x <= 50% -->
    <div class="smooth-pie-2" style="width: 100px; height: 100px; background-color: #005744;" title="33%">
      <div class="before" style="transform: rotate(0.33turn) translatex(50px); background-color: #00AF89;"></div>
      <div class="after" style="transform: translatex(-50px); background-color: #00AF89;"></div>
    </div>
    <!-- x > 50% -->
    <div class="smooth-pie-2" style="width: 100px; height: 100px; background-color: #00AF89;" title="66%">
      <div class="before" style="transform: translatex(50px); background-color: #005744;"></div>
      <div class="after" style="transform: rotate(0.66turn) translatex(-50px); background-color: #005744;"></div>
    </div>
  </section>
  <section>
    <h2>Gradient</h2>
    <div style="width: 100px; height: 100px; border-radius: 50%; border: 1px solid #00000080; background-image: conic-gradient(#005744 33%, #00AF89 0%);"></div>
  </section>
</main>