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

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

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

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

Таблица свойств и методов для линейного графика .

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

Поддержи проект:

Сообщений нет. Вы можете стать первым.