如何在CSS中創建餅圖

如何使用CSS創建餅圖，如下所示？如何在CSS中創建餅圖

enter image description here

2012-04-05 Rohit Azad

供參考：你的'圓圖'被稱爲**餅圖**：o） – balexandre 2012-04-05 12:13:55

1. http://www.htmldrive.net/items/show/751/Pure-CSS3-Pie-Charts-effect 2. http://atomicnoggin.ca/blog/2010/02/20/pure-css3-pie-charts/ 3. http://elisabethrobson.com/?p=867（**使用HTML5 Canvas **）4 。你可以使用HTML5和jQuery，[LINK]（http://www.elated.com/articles/snazzy-animated-pie-chart-html5-jquery/） – 2013-01-22 04:42:56

哦，我的！你見過Google Chart Tools嗎？

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

這是愚蠢的容易實現，但我與它的問題是「外部API」的一部分。如果谷歌決定可以這個或谷歌下來，拜拜圖表！但就美觀和其他圖表的選擇而言，谷歌圖表還是一個很酷的發現。

來源

2013-02-27 21:13:02 Savanetech

我相信你可以從google.visualization API下載[Google Visualization API參考]（https://developers.google.com/chart/interactive/docs/reference）頁面，但是服務條款不允許您下載並保存或託管google.load或google。可視化代碼。 – 2014-09-26 13:54:42

據我所知，這是沒有（還）可以用CSS3。然而，新的html5 canvas元素提供了你想要的一切。它可以很容易地訪問和使用JavaScript。關於基本用法的小教程可以在here找到。

關於stackoverflow的其他問題甚至在同一主題。請參閱"HTML5 Canvas pie chart"。（"Graphing Data in the HTML5 Canvas Element Part IV Simple Pie Charts"第一次回答關於使用畫布元素的餅圖的教程）

來源

2012-04-05 12:11:50 s1lence

我正在尋找方法來建立這些派，無論是通過純CSS或甚至使用一些JavaScript。今天我發現了一篇關於SmashingMagazine的文章，指向一個talk from Lea Verou，她在那裏完全指出了這個問題。這真的很值得一看！

來源

2015-10-29 20:05:40 rafaelbiten

如何在CSS中創建餅圖

回答

相關問題