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 есть ещё масса методов и свойств, которые могут вам пригодиться – ссылка на скрипт. Там же находится более подробная документация и, возможно, решения под ваши конкретные задачи.
