2012-04-05 6 views
13

Как создать круговую диаграмму с CSS, как показано ниже?Как сделать круговую диаграмму в CSS

enter image description here

+3

FYI: ваша круговая диаграмма называется ** Круговая диаграмма **: 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 (** с использованием холста HTML5 **) 4 вы можете использовать HTML5 и jQuery тоже, [LINK] (http://www.elated.com/articles/snazzy-animated-pie-chart-html5-jquery/) –

ответ

11

О, мой! Вы видели инструменты Google Chart?

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

Это глупо легко реализовать, но моя проблема с ним является «внешним апи» часть. Если Google решает, может ли это или google уходит, пока до свидания! Но что касается красоты и выбора других графиков, диаграммы google - это классная находка.

+0

Я считаю, что вы можете загрузить API google.visualization из ссылку [API API визуализации Google] (https://developers.google.com/chart/interactive/docs/reference), однако условия предоставления услуг не позволяют загружать и сохранять или размещать google.load или google. код визуализации. –

0

Насколько я знаю, это не (пока) с CSS3. Однако новый элемент html5 canvas обеспечивает все, что вы хотите. Его можно легко получить и использовать над javascript. Небольшой учебник по базовому использованию можно найти here.

Другой вопрос о stackoverflow даже был на ту же тему. См. "HTML5 Canvas pie chart". (Существует "Graphing Data in the HTML5 Canvas Element Part IV Simple Pie Charts" в первом ответе на учебник о круговых диаграммах с использованием элементов холста)

0

Я искал способы создания этих пирогов, либо с помощью чистого CSS, либо даже с помощью Javascript. Сегодня я нашел статью о SmashingMagazine, которая указывает на talk from Lea Verou, где она полностью прибивает тему. Это действительно, действительно стоит смотреть!

Смежные вопросы