Секторов может быть от 1 до 15 штук, а также дополнительный сектор «Остальное». Чтобы добавить сектор, скопируйте три строки:
описание
,
значение
и
цвет
, и измените номер сектора.
расположение
— показывает расположение диаграммы, имеет два значения
right
(справа)
или
left
(слева)
(по умолчанию «right»).
ширина
— ширина блока диаграммы (по умолчанию «200px»).
заголовок
— текстовая строка, расположенная выше списка секторов.
other
— текстовая строка, описывающая в списке секторов остаток значений до 100 % (например, «Другие» или «Иначе»). Без параметра — не показывает остаток в списке секторов.
описаниеN
— текстовая строка, описывающая название сектора в списке секторов.
значениеN
— размер сектора (в процентах). Знак процента ставить не нужно.
цветN
— цвет сектора, в случае если вы хотите использовать нестандартный цвет. По умолчанию подставляется цвет из таблицы ниже.
Таблица цветов по умолчанию
По умолчанию, цвета секторов выставляются следующим образом (в зависимости от номера сектора):
красный
зелёный
синий
жёлтый
фуксия
воды
коричневый
оранжевый
фиолетовый
сиена
малиновый
лайм
тёмно-бирюзовый
оливковый
серый
белый (остальное)
Ограничения
Шаблон не всегда корректно работает на мобильных устройствах.
Значения должны быть указаны в процентах.
Google Chrome
и
Safari
не до конца сглаживают границы секторов, так что линии получаются немного неровными.
Описания секторов ставятся не на сами сектора (на изображение), а только в список секторов.
Как это работает
Это экспериментальный шаблон, который рисует круговую диаграмму, используя единое изображение, сгенерированное анализатором функций с помощью CSS кода, и не является JavaScript-ом. Идея в том, что прозрачные смежные границы блоков
.