Morris.js

3 286

Сегодня разберём запуск и работу замечательного плагина Morris.js, позволяющего строить разнообразные графики.

Скачать (.zip, 204 Кб)

Установка

Добавляем morris.js и связанные с ним библиотеки (jQuery & Raphaël) на вашу страницу.

Если вы не желаете использовать CDN, тогда можно взять эти библиотеки из архива и залить на ваш хостинг, соответственно, ссылки на них нужно поменять.

Ваш первый график

Добавим элемент <div> на вашу страницу. В ней будет отрисовываться график. Убедитесь, что для этого элемента прописан ID, так как он будет использоваться в проекте.

Примечание: у вашего элемента div обязательно должны быть указаны размеры (ширина и высота).

Далее добавим <script> блок для запуска отрисовки графика на странице:

Если вы сделали все правильно, тогда у вас на странице будет отрисован похожий график:

Пример №1

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

Линейный график строится с помощью функции Morris.Line(options). Где options — набор опций для построения графика.

[w2hideshow]

Спецификация

yminМинимальное значение для оси Y. Также можно установить в значение 'auto', чтобы расчет минимального значения был автоматическим, или в 'auto [num]', чтобы дополнительно проверялось, что минимальное значение y было больше [num].

element
требуемая опция		 ID элемента, где будет строиться график.

Примечание: у этого элемента должны быть определены ширина и высота.
data
требуемая опция		 Данные для построения. Представляют собой массив объектов, содержащий атрибуты x и y.


Примечание: сортировка данных не имеет значения.


Примечание 2: Если вам нужно обновить данные, используйте метод setData
на объекте Morris.Line.
Вот пример использования setData.
xkey
требуемая опция		 Название оси X.

Метки времени принимаются в форме миллисекунд (такой же формат возвращает Date.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
требуемая опция		 Список строк, содержащий имена атрибутов из оси Y.
labels
требуемая опция		 Список строк, содержащий ярлыки для отображаемых графиков (соответствует значениям из ykeys).
lineColors Массив цветов отображаемых графиков.
lineWidth Ширина линий в пикселях.
pointSize Диаметр точек в пикселях.
pointFillColors Цвета для точек. По умолчанию, принимаются цвета линий из lineColors
pointStrokeColors Цвета контуров точек. (по умолчанию, #ffffff).
ymax Максимальное значение для оси Y. Также можно установить в значение 'auto', чтобы расчет максимального значения был автоматическим, или в 'auto [num]', чтобы дополнительно проверялось, что максимальное значение y было меньше [num].
smooth Установив в false, вы отключите сглаживание линий.
hideHover Установка в false сделает показ легенды постоянным.

Установка в 'auto' сделает показ легенды автоматическим. Т.е. тогда, когда курсор мыши будет проходить над графиком.

Установка в true отключит показ легенды.
hoverCallback Поддержка пользовательских функций, запускаемых при наведении курсора мыши на графике.

Функция может быть вызвана с индексом графика и набором опций.

например:
parseTime При установке в false, отключится парсинг даты/времени для оси X.
units
Устаревшая опция. Пожалуйста, используйте postUnits.
postUnits Суффикс для ярлыков по y (например: '%').
preUnits Префикс для ярлыков по y (например: '$').
dateFormat Функция, принимающая метки времени и форматирующая их в читаемые ярлыки.

по умолчанию, function (x) { return new Date(x).toString(); }
xLabels Установка интервала для оси x. По умолчанию, интервал рассчитывается автоматически. Далее приведен список поддерживаемых интервалов:

  • "decade"
  • "year"
  • "month"
  • "day"
  • "hour"
  • "30min"
  • "15min"
  • "10min"
  • "5min"
  • "minute"
  • "30sec"
  • "15sec"
  • "10sec"
  • "5sec"
  • "second"
xLabelFormat Функция, принимающая объекты дат и форматирующая их в читаемые ярлыки по оси x.

например: function (x) { return x.toString(); }
yLabelFormat Функция, принимающая значения по 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 и неопределенные значения в данных будут игнорированы и пропущены. Пустые места будут заменены на средние значения.

При установки в true, значения null будут обрывать графики, а неопределенные значения будут усреднены.
gridEnabled Установка в false запретит прорисовку осей x и
y.


Возможно, Вам будет интересно ↓↓↓

5 комментариев на “Morris.js”

    • Можно, но пока только вручную, изменяя вашу тему для WP.

      Сейчас я делаю плагин для WordPress с Morris.js, к концу недели будет готов. Тогда сможете вставлять графики также просто, как если бы вы писали тексты.

Оставить комментарий