Различные графики и диаграммы сегодня неотъемлемая часть Интернета. Поэтому и мы попробуем разобраться, как с помощью библиотеки jQuery и плагина jqPlot существенно облегчить себе работу по созданию графиков и диаграмм для веб-сайта.

Попробуйте изменять график, перетаскивая с помощью мыши его узлы и посмотрите, как меняется линия тренда. Когда надоест – можно будет читать дальше…

Сразу скажу – плагин обладает очень большими возможностями, имеет просто огромное количество различных опций и описать все его возможности в одной статье возможным не представляется. Но я постараюсь рассказать об основных моментах, дать примеры, ссылки и т.д.

Итак, сначала необходимо подключить к веб-странице несколько необходимых файлов, среди которых, конечно же, файл библиотеки jQuery – jquery-1.3.2.min.js. Кроме этого надо подключить файл плагина jquery.jqplot.min.js и файл его стилевого оформления jquery.jqplot.css.
Я не упомянул еще об одном подключаемом файле, который предназначен для браузеров IE – excanvas.js. Для того, чтобы создавать графические формы, рисовать линии, вращать изображения, плагин использует тэг canvas – элемент спецификации Web Applications 1.0, которая со временем, вероятно, воплотится в язык HTML5. Браузеры FireFox, Opera, Chrome, Safari поддерживают тэг canvas. Как обычно, исключением оказался Internet Explorer – не то, что в 6 и 7 версиях, даже в 8 версии поддержка этого тэга не планируется. Тут на помощь пришла компания Google, реализовав для IE полноценный API Canvas – это и есть файл excanvas.js.

Если Вы подключили все необходимые файлы, можно заняться html-разметкой:

<div id="example" style="height:320px; width:400px;"></div>

И всего-то… В элемент div с идентификатором #example будем выводить получившиеся графики.

Первый пример самый простейший – используем практически все настройки по умолчанию.

$(function(){
  $.jqplot("example",  [ [
                 [0,0], [1,2],
                 [3,5.12], [5,13.1],
                 [7,33.6], [9,85.9],
                 [11,219.9]
  ] ]);
});

Мы передали плагину всего два параметра – идентификатор элемента, в который будет осуществляться вывод графика и координаты точек, по которым этот график будет построен. Все остальное плагин jqPlot проделал вполне самостоятельно и мы получили в итоге следующий график:

Есть еще необязательный (но на практике очень важный) параметр – объект, в котором плагину передаются многочисленные настройки. Получается, что применить на веб-странице плагин jqPlot с настройками по умолчанию очень легко, но гораздо сложнее изучить эти настройки. Этим и займемся…

$(function(){
  line1 = [[1,2],[2,4],[3,8],[4,16],[5,8],[6,4],[7,2]];
  line2 = [4, 8, 16, 24, 16, 16, 8];
  line3 = [16, 16, 12, 18, 26, 24, 6];
  $.jqplot("example",
           [line1,line2,line3],
           {
           	 title: "Демонстрационный график",
           	 axes: {
           	 	yaxis: {
           	 		min:0, max:30
           	 	 },
           	 	 xaxis: {
           	 	 	min:0, max:8
           	 	 }
           	 },
           	 series: [
           	   { color:"#4bb2c5",label:"Николай" },
           	   { color:"#EAA228",label:"Алексей" },
           	   { color:"#839557",label:"Василий" }
           	 ],
           	 legend: {
           	 	show: true,
           	 	location: "ne",
           	 	xoffset: 12,
           	 	yoffset: 12 }
           }
          );
});

На первый взгляд все очень-очень сложно. Но это только так кажется. Посмотрите, какой получился график в результате выполнения этого кода, а потом расшифруем, что же мы тут понаписали….

Подготавливаем три массива, по которым будут построены три графика. Затем мы вызываем плагин jqPlot, которому в первом аргументе передаем идентификатор элемента, в который будут выводиться графики, во втором аргументе передается массив из приготовленных ранее данных, и, наконец, третий аргумент – объект с настройками плагина. Если с первыми двумя аргументами все более или менее понятно, то с третьим аргументом знакомство только предстоит.

Итак, первое свойство объекта, которое называется title – его значением является строка, в которой можно указать название графика.

Следующее свойство имеет название axes. Значение этого свойства в свою очередь также является объектом, в свойствах yaxis и xaxis которого описываются соответствующие оси координат. И опять значениями свойств yaxis и xaxis являются объекты, но уже описывающие конкретные характеристики осей координат. В примере, в свойствах min и max указаны минимальные и максимальные значения для соответствующих шкал.

Следующее свойство объекта настроек – свойство series, является массивом, каждый элемент которого есть объект, характеризующий какой-либо из графиков. Нетрудно догадаться, что свойство color описывает цвет, а в свойстве label хранится метка для соответствующего графика.

Последнее свойство, представленное в примере – свойство legend. Это объект, характеризующий легенду графика. Свойство show этого объекта принимает логические значения. В случае true плагин будет отображать легенду. Свойство location – расположение легенды. Значение ne заставит плагин расположить легенду в правом верхнем углу, т.е. ne – это nord-east, на северо-востоке. Свойства xoffset и yoffset определят отступы легенды от края.

Попробуем создать круговую диаграмму, для чего используем вот такой код:

$(function(){
  line1 = [["груши",3],
           ["яблоки",7],
           ["апельсины",2.5],
           ["бананы",6],
           ["арбузы",5],
           ["дыни",4]];
  $.jqplot("example", [line1], {
    title: "Пример круговой диаграммы",
    seriesDefaults: {
      renderer: $.jqplot.PieRenderer,
      rendererOptions: {
        sliceMargin:8
      }
    },
    legend: { show:true }
  });
});

А вот результат выполнения этого кода:

Среди подключаемых внешних файлов произошли изменения. Дополнительно был подключен файл plugins/jqplot.pieRenderer.min.js, который служит как раз для того, чтобы иметь возможность организовать круговую диаграмму.
Вообще, надо отметить, что jqPlot, который является плагином для библиотеки jQuery, в свою очередь имеет некоторое количество собственных плагинов, которые используются для реализации различных видов графиков и действий над ними. Одним из таких плагинов и является файл jqplot.pieRenderer.min.js.

Рассмотрим javascript-код. В начале все практически так же, как и в предыдущих примерах. Готовим данные для построения диаграммы, которые храним в переменной line1. Обратите внимание, что метку можно указать непосредственно в массиве, описывающем конкретную величину. Затем вызываем плагин jqPlot, которому в первом аргументе передаем идентификатор элемента, в котором будет построена диаграмма. Во втором аргументе передаем массив, содержащий данные для построения диаграммы. И, наконец, третий аргумент – объект с настройками.

Первое и третье свойства этого объекта нам уже знакомы. Свойство title определяет заголовок диаграммы, а legend в данном случае заставит плагин отображать легенду диаграммы.

А вот с важным свойством seriesDefaults мы пока не встречались. Значением этого свойства является объект, в котором определяются настройки по умолчанию. Передавая в этом объекте его отдельные свойства, можно переопределить поведение плагина. Так мы изменяем значение опции renderer на $.jqplot.PieRenderer, в отличие от определенного по умолчанию значения $.jqplot.LineRenderer для того, чтобы рисовать не линейные графики, а круговую диаграмму. В опции rendererOptions, значение которой в свою очередь тоже является объектом, передаем одну из настроек – sliceMargin, для того чтобы организовать отступы между сегментами круговой диаграммы.

Следующий пример – диаграмма, где значения представлены в виде столбцов. Код примера:

$(function(){
  line1 = [14, 32, 41, 44, 40, 37, 29];
  line2 = [7, 12, 15, 17, 20, 27, 39];
  $.jqplot("example", [line1, line2], {
    title: "Пример диаграммы с метками значений",
    stackSeries: true,
    seriesDefaults: {
      renderer: $.jqplot.BarRenderer,
      rendererOptions: { barMargin: 25 },
      pointLabels: { stackedValue: true }
    },
    axes: {
      xaxis:{ renderer:$.jqplot.CategoryAxisRenderer },
      yaxis:{ ticks:[0, 20, 40, 60, 80] }
    }
  });
});

и то, что получается в итоге:

Мы были вынуждены подключить довольно большое количество внешних файлов для реализации такой диаграммы. Помимо библиотеки jQuery, стилевого файла плагина jqPlot и собственно самого файла плагина, потребовались файлы plugins/jqplot.barRenderer.min.js, plugins/jqplot.categoryAxisRenderer.min.js и plugins/jqplot.pointLabels.min.js.

На этот раз готовим данные в двух массивах – line1 и line2. Вызываем плагин jqPlot. Первый параметр – идентификатор элемента div, куда выводится диаграмма. Второй параметр – данные. Третий параметр – объект с настройками.

Опция title нам уже хорошо знакома – это заголовок диаграммы. С опцией stackSeries только предстоит познакомиться. Она может принимать логические значения. В данном случае значение true заставит плагин расположить столбцы друг за другом – «стопкой».

Следующая опция seriesDefaults нам тоже немного знакома. В свойстве renderer указываем значение $.jqplot.BarRenderer, чтобы рисовать диаграмму в виде столбцов. В свойстве rendererOptions передаем объект только с одним свойством barMargin, чтобы установить размеры полей для столбцов диаграммы.

И, наконец, опция pointLabels, в которой передаем плагину еще один объект с одним свойством – stackedValue. Значение true в нашем случае определит отображение значений столбцов диаграммы такой же «стопкой», как и сами столбцы.

Последние свойство в объекте настроек – axes, поможет нам описать оси координат в том виде, в котором мы их хотим видеть. В свойстве xaxis передаем объект, где в опции renderer указываем значение $.jqplot.CategoryAxisRenderer – т.е. плагин для jqPlot, который будет использован для построения оси X. Теперь значения шкалы не будут рассчитываться автоматически. Вместо этого под каждым столбцом диаграммы будет указано название категории, и поскольку мы не указали явно эти названия, то они будут обозначены цифрами. В свойстве yaxis передаем объект, где в опции ticks указываем массив, значения которого будут использованы для построения оси Y.

И наконец, последний пример – Вы его уже могли испытать в самом начале, там где можно изменять график с помощью мыши. Вот js-код:

$(function(){
  line1=[4, 25, 13, 22, 14, 17, 15];
  $.jqplot("example", [line1],
    { title: "Изменяемые значения и линия тренда" }
  );
});

Мы подключили два плагина: plugins/jqplot.dragable.min.js и plugins/jqplot.trendline.min.js. Первый реализует возможность перемещения узлов графика с помощью указателя мыши, второй – рассчитывает линию тренда.
Сам javascript-код довольно прост, так как мы не передаем никаких дополнительных настроек, за исключением заголовка. Остальные действия выполняем как обычно – готовим данные, вызываем плагин, которому передаем идентификатор целевого элемента, данные и немного настроек.

Скачать примеры статьи (рус.)
Сайт плагина jqPlot (англ.)
Скачать плагин jqPlot (англ.)
Демо на сайте разработчиков плагина (англ.)
Туториал по опциям плагина (англ.)
Перечень всех опций в удобочитаемом виде (англ.)