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