如何在 CSS 中制作饼图

Question

提问by Rohit Azad

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

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

enter image description here

在此处输入图片说明

Answer 1

采纳答案by Savanetech

Oh my! Have you seen Google Chart Tools?

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

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”部分。如果谷歌决定可以这样做或谷歌倒闭，再见图表！但就美观和其他图表的选择而言，谷歌图表是一个很酷的发现。

Answer 2

回答by MastaBaba

I find thisthe easiest CSS-only solution. Somewhat simplified below.

我发现这是最简单的纯 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

回答by Aaditya Pandey

I saw some people opting for Google Developers Tool, its very tough and it also uses JS and you only want CSS. So here is the most easy way, Pure CSS, made by using background gradient.

我看到有些人选择 Google Developers Tool，它非常难用，而且它也使用 JS，而您只想要 CSS。所以这里是最简单的方法，纯 CSS，通过使用背景渐变制作。

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

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

Answer 4

回答by user12944382

We can simply create with one simple property called conic gradient:

我们可以简单地使用一个称为圆锥梯度的简单属性来创建：

https://css-tricks.com/snippets/css/css-conic-gradient/

Answer 5

回答by Simbiat

Stumbled on this thread while search for the same. So far I found https://keithclark.co.uk/articles/single-element-pure-css-pie-charts/which explains how you can write even CSS for dynamically generated pies on pure CSS. The problem there is that is uses conic-gradient, which according to https://caniuse.com/#search=conic-gradientis not that widely supported yet. Solution from Mastababa is another alternative, but seems to me you will require a lot of adjustments to make it into a "library" and if you remove inner circle it looks a bit awkward.

在搜索相同的线程时偶然发现了这个线程。到目前为止，我找到了https://keithclark.co.uk/articles/single-element-pure-css-pie-charts/，它解释了如何在纯 CSS 上为动态生成的馅饼编写 CSS。那里的问题是使用 conic-gradient，根据https://caniuse.com/#search=conic-gradient尚未得到广泛支持。Mastababa 的解决方案是另一种选择，但在我看来，您需要进行大量调整才能使其成为“库”，如果您删除内圈，它看起来有点尴尬。

Answer 6

回答by rafaelbiten

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

我一直在寻找构建这些馅饼的方法，无论是通过纯 CSS 还是使用一些 Javascript。今天我在SmashingMagazine上找到了一篇文章，该文章指向Lea Verou 的一次演讲，她完全确定了这个主题。真的，非常值得一看！

Answer 7

回答by s1lence

As far as I'm aware this is no (yet) possible with css3. However the new html5 canvaselement 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（还）不可能做到这一点。然而，新的 html5canvas元素提供了您想要的一切。它可以通过 javascript 轻松访问和使用。可以在此处找到有关基本用法的小教程。

An other question on stackoverflow 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)

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

Answer 8

回答by Jonas Merhej

I found this solution on code pen. You can change value in data-attributes wich was what I was looking for: https://codepen.io/AtomicNoggin/pen/fEish

我在代码笔上找到了这个解决方案。您可以更改我正在寻找的数据属性中的值：https: //codepen.io/AtomicNoggin/pen/fEish

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

如何在 CSS 中制作饼图

提问by Rohit Azad

采纳答案by Savanetech

回答by MastaBaba

回答by Aaditya Pandey

回答by user12944382

回答by Simbiat

回答by rafaelbiten

回答by s1lence

回答by Jonas Merhej

相关推荐

最近更新

标签

如何在 CSS 中制作饼图

提问by Rohit Azad

采纳答案by Savanetech

回答by MastaBaba

回答by Aaditya Pandey

回答by user12944382

回答by Simbiat

回答by rafaelbiten

回答by s1lence

回答by Jonas Merhej

相关推荐

CSS Twitter 引导程序可滚动模式

如何在一个 css 选择器中访问两个 Id

CSS 是否可以在按钮元素上使用文本溢出：省略号？

Internet Explorer 的 CSS 规则限制

相关推荐

最近更新

标签