Существует несколько библиотек javascript, которые сделают это за вас. Конечно, нет нужды катать собственный код.
Если вы хотите написать свой собственный, имейте в виду, что для получения эффектов, доступных с некоторыми библиотеками, потребуется намного больше, чем минимальный js-код. Конечно, вы могли бы написать очень простой скрипт, который рисует круговые сегменты в довольно небольшом объеме кода, у него не будет анимации или динамических свойств, которые вы получили бы при использовании библиотеки. И большинство библиотек на самом деле не такие большие, учитывая, сколько они делают.
Моя любимая библиотека для подобных вещей - Рафаэль , а также его графическая сестринская библиотека г.Рафаэль .
Прелесть Рафаэля в том, что он позволяет очень легко создавать довольно сложную графику, в том числе несколько очень хороших анимированных графиков. Смотрите примеры на сайте выше, который включает в себя круговые диаграммы.
Это все на основе Javascript, так что вы можете обновить его на лету.
Кроме того, Raphael превосходит другие аналогичные библиотеки в том, что он работает безупречно даже в более старых версиях IE (вплоть до IE6!), Так как он использует SVG в современных браузерах и использует VML для старых версий IE. .
Надеюсь, это поможет.