І знову я продовжую тему графіків 🙂
До речі, в тому, що від twitter 'а є користь я недавно переконався на власному досвіді 🙂. У стрічці b1shop проскочила посилання на дуже цікавий плагін для jQuery , Призначений для створення графіків.
Про те як намалювати графік за допомогою JavaScript я писав у статті JavaScript бібліотеки для створення графіків і в ній же зробив деякі висновки.
В одному з них було твердження про те, що JS бібліотеки серйозно поступаються Flash аналогам в плані функціональності. За великим рахунком це правильно ... але бібліотека jqPlot має ряд можливостей, які, як я вважав раніше доступні тільки у flash .
Крім того, jqPlot дозволяє підключати додаткові плагіни, точніше більшість функцій реалізовано за допомогою плагінів. Таким чином, підключаючи тільки необхідні JS-файли ви можете зменшити розмір сторінки.
Можливостей у jqPlot багато, але мені відразу кинулися в очі редаговані графіки. На них ви можете переміщати точки за допомогою мишки.
Приклад створення такого графіка я і хочу показати в цій статті.
Як він працює ви можете побачити на демонстраційній сторінці
А якщо є бажання поекспериментувати - качайте архів.
SourceНам буде потрібно всього одна html Старинця.
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http : //www.w3.org/1999/xhtml "xml: lang =" en "lang =" en "> <head> <title> jqPlot Test </ title> <meta http-equiv =" content-type "content = "text / html; charset = utf-8" /> <meta http-equiv = "Content-Style-Type" content = "text / css" /> <! - [if IE]> <script language = " javascript "type =" text / javascript "src =" js / excanvas.min.js "> </ script> <! [endif] -> <link rel =" stylesheet "type =" text / css "href =" jquery.jqplot.min.css "/> </ head> <body> <div id =" myPlot "style =" width: 500px; height: 400px; "> </ div> <script type =" text / javascript " src = "js / jquery-1.3.2.min.js"> </ script> <script type = "text / javascript" src = "js / jquery.jqplot.min.js"> </ script> <script type = "text / javascript" src = "js / jqplot.dragable.min.js"> </ script> <script type = "text / javascript"> $ (function () {var data = [[0,0], [0.5,0.5], [1,0.3], [1.5,1]]; var plot1 = $ .jqplot ( 'myPlot', [data], {title: "переміщаються точки", axes: {xaxis: {tickOptions: {formatString: '% .1f'}}, yaxis: {tickOptions: {formatString: '% .1f'}}}}); }); </ Script> </ body> </ html>На цій сторінці ми розміщуємо один блок під назвою myPlot (рядок 18). Саме в ньому і буде розміщений графік.
Потім підключаємо файл зі стилями (рядок 13), бібліотеку jQuery і файли jqPlot (рядки 20-22). Тут потрібно звернути увагу на порядок підключення скриптів.
jQuery повинна йти першою, тому що jqPlot є плагіном для неї.
Потім підключаємо jquery.jqplot.min.js - це основний файл плагіна.
Файл jqplot.dragable.min.js є плагіном для jqPlot і тому підключається останнім. До речі, саме з його допомогою ми робимо графік редагується.
Тепер нам потрібно написати скрипт, який створить графік (рядки 24-41).
На початку ми створюємо масив з точками і зберігаємо його в змінної data.
Після цього, за допомогою методу jqplot будуємо графік. У першому параметрі передаємо id блоку в який потрібно помістити графік, у другому - масив з даними, в третьому - об'єкт з настройками.
Налаштувань, звичайно, дуже багато. Я навіть не буду намагатися перераховувати їх, для цього існує документація . В даному випадку вказані тільки назва графіка (рядок 27) та формати осей (рядки 31 і 36).
formatString: '% .1f' означає, що значення буде показано з точністю до одного знака після коми.
Усе. Графік готовий!
Всім, кого зацікавила ця бібліотека дуже рекомендую подивитися демонстраційні приклади на сайті jqPlot . Упевнений, ви знайдете багато цікавого 😉
До зустрічі!
Наша совместная команда Banwar.org. Сайт казино "Пари Матч" теперь доступен для всех желающих, жаждущих волнения и азартных приключений.