Гистограммы и не только
Порой на ресурсе приходится отобразить какие-либо статистические данные: будь то сводная диаграмма из нескольких метрик, статистика для геймеров, биржевая сводка и многое другое. Ранее все решалось до боли просто: мы строили нужный график в таблицах excel, а затем, в виде картинки, помещали его у себя на сайте, но что делать, если необходимо подкорректировать данные или они обновляются, скажем, каждые 10 минут? Искать раба? Ну, уж нет, для построения графиков прямо на сайте есть более эффективные методы, и сегодня мы рассмотрим библиотеку morris.
Morris – это легковесная библиотека, при этом обладающая немалым функционалом для работы с графиками при помощи JavaScript. Но, чтобы ей воспользоваться, потребуется дополнительно подключить jQuery и Raphael. Вторая необходима для упрощения работы с векторной графикой в вебе (SVG и VML).
Пожалуй, для примера напишем самое простое представление данных, чтобы разобраться переходим на страницу демо.
Вначале подключаем скрипты и стили:
<link href="morris.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<script src="morris.min.js" type="text/javascript"></script>Теперь добавим HTML разметку:
<div id="graph"></div>Переходим к построению графика в виде гистограммы:
$(function(){
Morris.Bar({
element: "graph",
data: [
{
x: "2015 Чуть-чуть",
y: 0
},
{
x: "2015 Еще чуть-чуть",
y: 1
},
{
x: "2015 О, уже больше!",
y: 2
},
{
x: "2015 Давай-давай-давай!",
y: 3
},
{
x: "2016 Поперло!",
y: 4
},
{
x: "2016 Поперло!",
y: 5
},
{
x: "2016 Полным ходом!",
y: 6
},
{
x: "2016 Ух поперло!",
y: 10
},
{
x: "2016 Яяяяяяяяяяяяяяяяязь!",
y: 18
}
],
xkey: "x",
ykeys: ["y"],
labels: ["Y"],
barColors: function(row, series, type){
if(type === "bar"){
return "rgb(0, " + Math.ceil(255 * row.y / this.ymax) + ", 0)";
}else{
return "#000";
};
},
hoverCallback: function(index, options, content, row){
return "Y: " + row.y + "<br />" + "X: " + row.x;
}
});
});С первого взгляда может показаться, что пользоваться morris сложно, но это не так. Всё заключается в вызове метода bar() с переданными в него настройками графика гистограммы. Есть также возможность создавать и классические графики, но возвращаемся к нашему примеру. В element передаем имя id, в котором будет наш график. Далее идёт data, куда передаётся массив объектов с данными, которые будут отображены в нашем случае по осям x и y. В xkey указывается строка, содержащая имя атрибута, в которой указываются x метки. А ykeys и labels списки их значений. Это основные параметры, без которых график не будет построен.
Теперь перейдем к двум оставшимся методам barColors() и hoverCallback(), при помощи которых можем указать изменение цвета наших столбцов, а также сформировать их подписи, для более детального и визуально приятного восприятия данных. Мне же хотелось ещё добавить, что у библиотеки morris есть ещё масса методов и свойств, которые могут вам пригодиться – ссылка на скрипт. Там же находится более подробная документация и, возможно, решения под ваши конкретные задачи.