2012-04-05 18 views
13

Jak utworzyć wykres kołowy z CSS, jak ten poniżej?Jak zrobić wykres kołowy w CSS

enter image description here

+3

FYI: Twój "krąg" nazywa się ** Wykres kołowy **: o) – balexandre

+0

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 (** przy użyciu Canvas HTML5 **) 4 możesz także używać HTML5 i jQuery, [LINK] (http://www.elated.com/articles/snazzy-animated-pie-chart-html5-jquery/) –

Odpowiedz

11

O mój! Czy widziałeś Narzędzia Google Chart?

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

To głupie łatwe do wdrożenia, ale mój problem z nią jest "zewnętrzny api" część. Jeśli Google postanowi, że to lub google pójdzie w dół, pa pa! Ale jeśli chodzi o piękno i wybór innych wykresów, wykresy google są fajnym znaleziskiem.

+0

Uważam, że możesz pobrać interfejs API google.visualization z na stronie [Google Visualization API Reference] (https://developers.google.com/chart/interactive/docs/reference), jednak warunki korzystania z usługi nie zezwalają na pobieranie i zapisywanie hosta google.load lub google. kod wizualizacji. –

0

O ile jestem świadomy to nie jest (jeszcze) możliwe z CSS3. Jednak nowy element html5 canvas zapewnia wszystko, czego potrzebujesz. Można go łatwo uzyskać i używać w javascript. Mały samouczek na temat podstawowego użycia można znaleźć here.

Inne pytanie na stackoverflow było nawet na ten sam temat. Zobacz "HTML5 Canvas pie chart". (Istnieje "Graphing Data in the HTML5 Canvas Element Part IV Simple Pie Charts" w pierwszej odpowiedzi na samouczek dotyczący wykresów kołowych przy użyciu elementów canvas)

0

Szukałem sposobów na zbudowanie tych ciast, albo za pomocą czystego CSS, albo nawet za pomocą JavaScript. Dziś znalazłem artykuł o SmashingMagazine, który wskazuje na talk from Lea Verou, gdzie całkowicie przybija temat. Naprawdę, naprawdę warto na zegarek!

Powiązane problemy