Добрый день друзья сегодня с Вами рассмотрим замечательный плагин построения графиков на сайте. Существует много различных плагинов построение графиков на сайте, в нашем случаи мы будем использовать плагин от Morris.js. Данный плагин позволяет строить четыре вида графиков:
В первой части статьи мы будем рассматривать два вида графика это создание ломанной прямой и создание графика в виде диаграммы. Данные графики имеют общие свойства и методы.
element
required |
ID (или ссылку) на элемент, в который необходимо вставить диаграмму (<div id="chartsLine" style="height:250px;"></div> ).
Примечание: этот элемент должен иметь ширину и высоту, определенными в его стиль. |
data
required |
Данные для построения диаграммы. Это массив объектов, содержащих X и Y атрибуты, как описано в xkey и ykeys .
Примечание: Сортировка здесь не имеет значения - Вы можете поставлять данные в любом порядке. Примечание 2: Если вам нужно обновить данные, используйте метод setData на объекте, Morris.Line . Есть пример использования setData в репозитории github. |
xkey
required |
Строка, содержащая имя атрибута, который содержит дату (X) значений.
Метки принимаются в виде миллисекундных отметок времени (такой же формат возвращает getTime() или как строки в следующих форматах:
dateFormat .
Примечание 2: строки date/time опционально могут содержать T между датой и временем, и/или суффикс Z для совместимости с датами по стандарту ISO-8601. |
ykeys
required |
Список строк, содержащий имена атрибутов, которые содержат значения Y (по одному для каждого ряда данных, которое будет изображено на графике или диаграмме). |
labels
required |
Список строк, содержащих ярлыки для ряда данных, которые будут изображены на графике (соответствующие значения параметра ykeys ). |
lineColors |
Массив, содержащий цвета для линий / точек. |
lineWidth |
Ширина линий в пикселях. |
pointSize |
Диаметр точек в пикселях. |
pointFillColors |
Цвета для точек. По умолчанию использует те же значения, что lineColors |
pointStrokeColors |
Цвета для очертания точек на графике. ( По умолчанию #ffffff). |
ymax |
Макс. граница для оси Y . Кроме того, установите режим 'Auto' для автоматического вычисления, или 'Auto [num]' , чтобы автоматически вычислить максимальное значение Y составляет не менее [num] . |
ymin |
Мин. граница для оси Y . Кроме того, установите режим 'Auto' для автоматического вычисления, или 'Auto [num]' , чтобы автоматически вычислить минимальное значение Y составляет наиболее [num] .
Подсказка: вы можете использовать это для создания графики с ложными происхождением. |
smooth |
Установите в false , чтобы отключить сглаживание линии. |
hideHover |
Установите в false , чтобы всегда показывать легенду.
Значение True или значение 'Auto' , чтобы показывать легенду при наведении курсора мыши на диаграмму.
Значение 'always' , чтобы никогда не показывать легенду |
hoverCallback |
Поддержка пользовательских функций, запускаемых при наведении курсора мыши на графике.
Функция может быть вызвана с индексом графика и набором опций. Пример: hoverCallback: function (index, options, content, row) { return "sin(" + row.x + ") = " + row.y; } |
parseTime |
Установите в false , чтобы пропустить парсинг даты/времени а для значений X , рассматривая их как равные расстояния. |
units |
Устаревшая опция. Пожалуйста, используйте postUnits. |
postUnits |
Cтроковое значение (например,'%' ) для добавления суффикса ко всем ярлыкам оси Y в конце. |
preUnits |
Cтроковое значение (например,'$' ) для добавления суффикса ко всем ярлыкам оси Y в начале. |
dateFormat |
Функция, которая принимает отметки времени и форматирует их для отображения в качестве метки диаграммы.
default: function (x) { return new Date(x).toString(); } |
xLabels |
Установка оси X маркировка интервала. По умолчанию интервал будет рассчитан автоматически. Ниже приведены допустимые интервал строк:
|
xLabelFormat |
Функция, которая принимает Date objects и форматирует их для отображения в качестве подписей оси X . Переопределение форматирования по умолчанию выбрана автоматическая этикетировочная машина или возможность xLabels .
Пример: function (x) { return x.toString(); } |
xLabelAngle |
Угол в градусах от горизонтальной оси X . |
yLabelFormat |
Функция, которая принимает значения Y и форматирует их для отображения в качестве метки оси Y .
Пример: function (y) { return y.toString() + 'km'; } |
goals |
Список значений Y для рисования горизонтальной линии, как "цель" на графике.
Пример: goals: [1.0, -1.0] |
goalStrokeWidth |
Ширина в пикселях целевых линий. |
goalLineColors |
Массив значений цветов. Если вы перечислите меньше цветов, чем здесь у вас линий, то значения будут циклическими. |
events |
Список значений по X для отрисовки вертикальных 'событийных' линий на графике.
Пример: events: ['2012-01-01', '2012-02-01', '2012-03-01'] |
eventStrokeWidth |
Ширина в пикселях линии. |
eventLineColors |
Массив цветов для линий. Принцип цикличности такой же, как и для целевых линий. |
continuousLine |
Установленно в false (по умолчанию), все null и undefined в рядах данных будут игнорироваться.
При установки в true , значения null будут обрывать графики, а undefined будут усреднены.
Примечание: в v0.5.0, эта настройка будет удалена и при null будет разрывать строки. |
axes |
Установленное значение false , чтобы отключить рисования осей X и Y . |
grid |
Установленное значение false , чтобы отключить рисование горизонтальных линий сетки. |
gridTextColor |
Установка цвета меток осей (default: #888). |
gridTextSize |
Установка размера точки метки (default: 12). |
gridTextFamily |
Установка шрифта для текста (default: sans-serif). |
gridTextWeight |
Сделать текст жирним (default: normal). |
fillOpacity |
Измените непрозрачность цвета заливки. Принимает значения от 0,0 (полностью прозрачный) и 1.0 (полностью непрозрачный). |
resize |
Установите в true чтобы включить автоматическое изменение размеров, когда содержащий элемент изменяет размер. (default: false).
Данная опция оказывает существенное влияние на производительность, поэтому по умолчанию отключена. |
Создание диаграммы области с помощью Morris.Area(option). Диаграммы с областями принимают все те же опции, линейных диаграммы, а также следующие дополнительные опции:
behaveLikeLine |
Установить true для наложения областей на верхней части друг с другом. |
Для построения графика необходимо иметь изначальные данные для построения точек ломанной линии на графике. в своем примере я буду использовать данные цены на нефть начиная с 2008 года по 2016 год, а также цену рубля относительно доллара за этот же период. Данные для построения графиков я буду брать с сервиса Яндекс.
Первый график будет в виде двух ломанных прямых, одна будет показывать цену нефти, а вторая цену рубля относительно доллара.
Скачиваем плагин с офф. сайта разработчика или подключаем плагин через CDN
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
Далее нам необходим контейнер в который мы поместим наш график. Внимани: у контейнера должен быть явно указана высота блока.
<div id="myfirstchart" style="height: 250px;"></div>
Далее дабавляем между тегами <script></script> следующий код:
Morris.Line({ //Контейнер для вывода графика element: 'myfirstchart', //Данные для графика data: [ { y: '2008', oil: 144, ruble: 24.48 }, { y: '2009', oil: 41, ruble: 28.26 }, { y: '2010', oil: 80, ruble: 29.59 }, { y: '2011', oil: 94, ruble: 30.60 }, { y: '2012', oil: 124, ruble: 31.22 }, { y: '2013', oil: 115, ruble: 30.42 }, { y: '2014', oil: 105, ruble: 33.15 }, { y: '2015', oil: 56, ruble: 56.49 }, { y: '2016', oil: 36, ruble: 75.95 } ], //Массив занчений для оси X xkey: 'y', //Префикс в конце для оси Y postUnits:' $', //Коридор цены за 1 доллар goals:[45.0, 27.0], goalStrokeWidth:2, goalLineColors:['#d9534f'], //Событийные линии по оси X events: ['2014-01-01', '2015-10-01'], eventStrokeWidth:2, eventLineColors:['#428bca'], //Цвет линий lineColors:['#5cb85c','#f0ad4e'], //Выводимые линии ykeys: ['oil', 'ruble'], //Названия линий labels: ['Нефть', 'Рубль'] });
Morris.Area({ //Контейнер element: 'area-example', //Данные data: [ { y: '2008', oil: 144, ruble: 24.48 }, { y: '2009', oil: 41, ruble: 28.26 }, { y: '2010', oil: 80, ruble: 29.59 }, { y: '2011', oil: 94, ruble: 30.60 }, { y: '2012', oil: 124, ruble: 31.22 }, { y: '2013', oil: 115, ruble: 30.42 }, { y: '2014', oil: 105, ruble: 33.15 }, { y: '2015', oil: 56, ruble: 56.49 }, { y: '2016', oil: 36, ruble: 75.95 } ], //Массив занчений для оси X xkey: 'y', //Массив цветов для линий lineColors:['#5cb85c','#f0ad4e'], //Выводимые линии ykeys: ['ruble', 'oil'], //Префикс в конце для оси Y postUnits:' $', //Названия линий labels: ['Рубль', 'Нефть'] });
В следующей части посвященной построению графиков на базе плагина Morris.js мы рассмотрим графики в виде Bar.