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

в 8:06, , рубрики: jquery, Morris, Raphael, построение графиков, метки: , , ,

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

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

<img src="https://www.pvsm.ru/images/f23bdf6ff06dda2561e31105e6cb4602.png" alt="[график]"/>

По оси абсцисс откладывается время, по оси ординат — какие-нибудь зависящие от времени значения. (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 и тем создавать несколько более навороченные графики.

Автор: Mithgol

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js