410 Peity — простой jQuery плагин, конвертирующий элементы контента в простую диаграмму, линию или график.
Такой плагин работает в любом браузере, поддерживающим canvas: Chrome, Firefox, Opera, Safari. Peity также может добавлять тригер change на графические элементы.
Например, если вы изменили данные, то сможете с легкостью, сгенерировать графический элемент заново, с помощью триггера.
Круговые диаграммы
Чтобы показать круговую диаграмму, просто, вызовите функцию peity("pie"). Вы также сможете поменять (цвета)colours, (радиус)radius и (разделитель данных для диаграммы)delimeter.
HTML
|
1 2 3 |
<span class="pie">1/5</span> <span class="pie">226/360</span> <span class="pie">0.52/1.561</span> |
Javascript
|
1 |
$("span.pie").peity("pie"); |
Пользовательские радиусы и цвета
Цвета и радиусы меняются с помощью peity("pie", { radius: 42 }).
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<p class="radius"> <span class="r10">1/10</span> <span class="r9">2/10</span> <span class="r8">3/10</span> <span class="r7">4/10</span> <span class="r6">5/10</span> <span class="r5">6/10</span> <span class="r4">7/10</span> <span class="r3">8/10</span> <span class="r2">9/10</span> <span class="r1">10/10</span> </p> |
Javascript
|
1 2 3 4 5 6 7 8 9 |
$(".radius span").each(function() { var elem = $(this); var radius = elem.attr("class").match(/\d+/) * 4; elem.peity("pie", { colours: ["#C6D9FD", "#4D89F9"], radius: radius }); }); |
Линейные графики
Линейные графики задаются с помощью цифр, разделенных запятыми. У линейных графиков есть следующие настройки: (цвета)colour, (цвет линии)strokeColour, (ширина линии)strokeWidth, (разделитель данных для графика)delimeter, (ширина графика)width и (высота)height.
HTML
|
1 |
<span class="line">5,3,9,6,5,9,7,3,5,2</span> |
Javascript
|
1 |
$(".line").peity("line"); |
Ступенчатые диаграммы
Ступенчатые диаграммы задаются тем же способом, что и линейные графики и имеют следующие опции: (цвет)colour, (разделитель данных для диаграммы)delimeter, (ширина диаграммы)width и (ее высота)height.
HTML
|
1 |
<span class="bar">5,3,9,6,5,9,7,3,5,2</span> |
Javascript
|
1 |
$(".bar").peity("bar"); |
События
Peity добавляет тригер «change» на графический элемент, и теперь, если вы обновите данные, то просто вызовитеchange() и график обновится.
Недавно занимался чисткой ноутбука Acer, дело это непростое надо сказать. Поэтому лучше все-таки не заниматься этим самостоятельно, а доверить профессионалам, например, http://vremont.dp.ua/chistka-noutbuka-acer/
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<ul> <li> <span class="graph"></span> <select> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4" selected>4</option> <option value="5">5</option> </select> </li> <li> <span class="graph"></span> <select> <option value="0">0</option> <option value="1" selected>1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </li> <li> <span class="graph"></span> <select> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3" selected>3</option> <option value="4">4</option> <option value="5">5</option> </select> </li> </ul> <p id="notice">Еще рано.</p> |
Javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$("select").change(function(){ $(this) .siblings("span.graph") .text($(this).val() + "/" + 5).change(); }).change(); var chartUpdate = function(event, value, max) { $("#notice").text( "Диаграмма обновлена: " + value + "/" + max ); }; $("span.graph") .peity("pie") .bind("chart:changed", chartUpdate); |
Пользовательские типы диаграмм
Также, вы можете создать свой тип диаграммы, зарегистрировав с помощью Peity его имя, значения по умолчанию и функцию отображения графика.
|
1 2 3 4 5 6 |
$.fn.peity.add("custom", { colour: "#FFCC00" }, function() { ... } ) |
Значения по умолчанию
Такие значения могут быть изменены следующим образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
$.fn.peity.defaults.pie = { colours: ["#FFF4DD", "#FF9900"], delimeter: "/", radius: 16 }; $.fn.peity.defaults.line = { colour: "#c6d9fd", strokeColour: "#4d89f9", strokeWidth: 1, delimeter: ",", height: 16, max: null, width: 32 }; $.fn.peity.defaults.bar = { colour: "#4D89F9", delimeter: ",", height: 16, max: null, width: 32 }; |
Надеемся, статья была для вас полезной. А какой бы вы добавили новый график в Peity?
