Morris.js: средство рисования красивых графиков при помощи jQuery и Raphaël

  • Tutorial
В позавчерашнем выпуске «Mozilla Hacks Weekly» увидал гиперссылку «Morris.js», пошёл по ней, почитал, порадовался — а теперь и вам поведаю.

Morris — это легковесный джаваскрипт (всего-то 3052 байта после миниатюризации) с открытым исходным кодом (распространяемым по упрощённой лицензии BSD), который для работы требует jQuery и Raphaël и строит с их помощью графики на простой сетке горизонтальных линий, наподобие такого:

[график]

По оси абсцисс откладывается время, по оси ординат — какие-нибудь зависящие от времени значения. (Morris изначально разрабатывался для сайта, показывающего общее число автомашин той или иной марки в Великобритании, так что для него естественно, что ось абсцисс — это ось времени.)

Графики реагируют на мышь: вспучиваются точки, соответствующие указанному мышью моменту во времени, и подле них появляются подсказки.

Достоинство скрипта — простота API. Приведённый мною пример создаётся вот таким вызовом:

// поквартальные данные, тонкие линии, цвета их заданы в явном виде
Morris.Line({
  element: 'quarterly',
  data: [
    {q: '2009 Q3', a: 100, b: 75},
    {q: '2010 Q2', a: 75, b: 50},
    {q: '2010 Q3', a: 75, b: 50},
    {q: '2011 Q1', a: 50, b: 25},
    {q: '2011 Q3', a: 50, b: 25},
    {q: '2011 Q4', a: 75, b: 50},
    {q: '2012 Q2', a: 100, b: 75}
  ],
  xkey: 'q',
  ykeys: ['a', 'b'],
  labels: ['Series A', 'Series B'],
  lineColors: ['#167f39','#044c29'],
  lineWidth: 2
});

Все необходимые подробности употребления API изложены в первоисточнике достаточно подробно — подглядывать в открытый исходник, скорее всего, не потребуется.

Единственное, чего «Моррису», на мой взгляд, недостаёт — так это вертикальных линий, перпендикулярных горизонтальным. Чтобы связь значений из одного и того же времени тотчас явствовала, а не только когда мышою поводить доведётся.

Предвижу также, что для кого-то итог работы «Морриса» покажется чрезмерно простым. Они, впрочем, всегда смогут прибегнуть к помощи gRaphaël и тем создавать несколько более навороченные графики.
Метки:
Поделиться публикацией
Комментарии 20
  • +3
    В gRaphaël напрягает, что нет почти никакой документации. Что-то сложнее примеров с сайта приходится делать наугад.
    • +2
      Верно подмечено. Вообще почти со всеми плагинами к Raphaël такая проблема: нет почти никакой документации и нет, кажется, никакого официального (и никакого неофициального сколько-нибудь полного) списка их. Я ничего не знал бы даже о самóм существовании gRaphaël, кабы не наткнулся случайно на упоминание его на Хабрахабре. Мог бы и не наткнуться.
      • 0
        Можно и просто рафаелем рисовать :) большого смысла подключать gRaphaël почему-то не вижу, если надо что-то сложнее, чем в примерах
        • +1
          К сожалению это была одна из причин отказа от использования, но ещё и сам функционал сомнительный. Для рисования в SVG — нет такого понятия как группы! Т.е. есть множества (set), но нет групп (тег g). Соответственно куча проблем с изменением порядка отображения (toFront, toBack).

          В общем сложилось впечатление, что фреймворк (Raphaël) для начинающих или не любителей заморачиваться. Какие либо сложные операции съедают всю его простоту.
        • 0
          Вот еще хотел привести пример моего графика на gRaphael, синтаксис не сильно сложней cash.pihel.jino.ru/?act=analiz&type=dyn&from=2012-02-08
          • +1
            Он игнорит hover на многие промежуточные точки
            • 0
              Да, есть такое дело. Возможно где-то моя ошибка в коде, лень разбираться.
          • +2
            Как вовремя.
            • +5
              Вот ещё хорошая библиотека: www.highcharts.com/
              Громоздкая правда (около 100Кб), но может похвастаться большими возможностями, замечательной документацией и простым API.
              • +3
                И платная.
                • +2
                  Только для коммерческого использования.
              • +2
                Мы в работе использует flot.js.
                На нём, например, сделаны эти графики потребления электроэнергии.
                • +4
                  И какой смысл давать ссылку на страницу, которая видна только вашим клиентам?
                  • 0
                    Не, видна всем. Я имел в виду тот график, который виден в тексте прямо на странице.
                    Ну, если хотите подробнее, то вот: пример1, пример2, пример3.
                • +1
                  На днях менял флешевые графики, остановился на графиках от Google.
                  Синтаксис очень похож, есть вертикальные линии и много чего еще.
                  • 0
                    Я тоже выбрал гугловские.
                  • +1
                    Какой библиотекой можно сделать вот такой график?
                    • 0
                      Весьма интересный вопрос, спасибо. У меня нет ни готового ответа на него, ни даже сколько-нибудь удовлетворительного представления о том, где и как искать ответ.
                  • +1
                    Спасибо за ссылку про Raphaël! Клевая вещь! :)

                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.