Конвертация элементов в мини-графики на jQuery

Peity — простой jQuery плагин, конвертирующий элементы контента в простую диаграмму, линию или график.

Такой плагин работает в любом браузере, поддерживающим canvas: Chrome, Firefox, Opera, Safari. Peity также может добавлять тригер change на графические элементы.

Например, если вы изменили данные, то сможете с легкостью, сгенерировать графический элемент заново, с помощью триггера.

Круговые диаграммы

Чтобы показать круговую диаграмму, просто, вызовите функцию peity("pie"). Вы также сможете поменять (цвета)colours, (радиус)radius и (разделитель данных для диаграммы)delimeter.

HTML

Javascript

Пользовательские радиусы и цвета

Цвета и радиусы меняются с помощью peity("pie", { radius: 42 }).

HTML

Javascript

Линейные графики

Линейные графики задаются с помощью цифр, разделенных запятыми. У линейных графиков есть следующие настройки: (цвета)colour, (цвет линии)strokeColour, (ширина линии)strokeWidth, (разделитель данных для графика)delimeter, (ширина графика)width и (высота)height.

HTML

Javascript

Ступенчатые диаграммы

Ступенчатые диаграммы задаются тем же способом, что и линейные графики и имеют следующие опции: (цвет)colour, (разделитель данных для диаграммы)delimeter, (ширина диаграммы)width и (ее высота)height.

HTML

Javascript

События

Peity добавляет тригер «change» на графический элемент, и теперь, если вы обновите данные, то просто вызовитеchange() и график обновится.
Недавно занимался чисткой ноутбука Acer, дело это непростое надо сказать. Поэтому лучше все-таки не заниматься этим самостоятельно, а доверить профессионалам, например, http://vremont.dp.ua/chistka-noutbuka-acer/

HTML

Javascript

Пользовательские типы диаграмм

Также, вы можете создать свой тип диаграммы, зарегистрировав с помощью Peity его имя, значения по умолчанию и функцию отображения графика.

Значения по умолчанию

Такие значения могут быть изменены следующим образом:

Надеемся, статья была для вас полезной. А какой бы вы добавили новый график в Peity?


Оставить комментарий