Уважаемые друзья, форма вопрос - ответ снова в строю!

Построение линейного графика и диаграммы ( Morris.js )

Добрый день друзья сегодня с Вами рассмотрим замечательный плагин построения графиков на сайте. Существует много различных плагинов построение графиков на сайте, в нашем случаи мы будем использовать плагин от Morris.js. Данный плагин позволяет строить четыре вида графиков:

  • График в виде ломаной линии
  • График в виде диаграммы
  • График в виде Bar
  • График в виде круга

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

Таблица свойств и методов для линейного графика Morris.Line(option).
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() или как строки в следующих форматах:
  • 2012
  • 2012 Q1
  • 2012 W1
  • 2012-02
  • 2012-02-24
  • 2012-02-24 15:00
  • 2012-02-24 15:00:00
  • 2012-02-24 15:00:00.000
Примечание: если используете метки времени в формате миллисекунд, рекомендуется проверить опцию 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 маркировка интервала. По умолчанию интервал будет рассчитан автоматически. Ниже приведены допустимые интервал строк:
  • "decade"
  • "year"
  • "month"
  • "week"
  • "day"
  • "hour"
  • "30min"
  • "15min"
  • "10min"
  • "5min"
  • "minute"
  • "30sec"
  • "15sec"
  • "10sec"
  • "5sec"
  • "second"
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

Для работы плагина нам понадобиться библиотеки (jQuery & Raphaël).


<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.js


  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: ['Нефть', 'Рубль']
});

График цены на нефть и курса доллара с 2008 по 2016 гг.

Линейный график
 

Диаграмма цены на нефть и курса доллара с 2008 по 2016 гг.

	

 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.

Нет комментариев, Вы можете стать первым!

Получить уведомление на Email

Введите код с картинки