Строим редактируемые графики с помощью JavaScript
И снова я продолжаю тему графиков 
Кстати, в том, что от twitter’а есть польза я недавно убедился на личном опыте . В ленте b1shop проскочила ссылка на очень интересный плагин для jQuery, предназначенный для создания графиков.
О том как нарисовать график с помощью JavaScript я писал в статье JavaScript библиотеки для создания графиков и в ней же сделал некоторые выводы.
В одном из них было утверждение о том, что JS библиотеки серьезно уступают Flash аналогам в плане функциональности. По большому счету это правильно… но библиотека jqPlot имеет ряд возможностей, которые, как я считал раньше доступны только во flash.
Кроме того, jqPlot позволяет подключать дополнительные плагины, точнее большинство функций реализовано с помощью плагинов. Таким образом, подключая только необходимые JS-файлы вы можете уменьшить размер страницы.
Возможностей у jqPlot много, но мне сразу бросились в глаза редактируемые графики. На них вы можете перемещать точки с помощью мышки.
Пример создания такого графика я и хочу показать в этой статье.
Как он работает вы можете увидеть на демонстрационной страничке
А если есть желание поэкспериментировать – качайте архив.
Нам потребуется всего одна 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. Уверен, вы найдете много интересного 
До встречи!
Понравилась статья? Подписывайтесь на продолжение 
!
Или на мой твиттер 
Добавьте эту страницу в 
Опубликовано в HTML, JavaScript, Web разработка View Comments
-
Никита
-
alextk77
-
Владимир
-
Iris
-
Владимир
-
pentol
-
Владимир
-
Rimlyanin
-
jumper91
-
serator
-
madbirdy
-
serator
-
Владимир
-
max
-
none
