Построение линейного графика и диаграммы от 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()
или как строки в следующих форматах:
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
Для работы плагина нам понадобиться библиотеки (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.
Сообщений нет. Вы можете стать первым.