Гистограммы и не только

8 сентября 2015 Антон Кулешов 1543 0

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

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Waves - волна под курсором

21 мая 2015 Антон Кулешов

Эффекты при клике не столь популярны как hover effects, однако, сегодня мой взор упал на плагин под названием waves.

Ленивая загрузка картинок, используя jQuery

2 апреля 2016 Антон Кулешов

Важной частью работы любого сайта является скорость его загрузки у пользователя в браузере. Тут правило одно - чем быстрее, тем лучше. Оптимизировать проект не всегда возможно, и тут к нам на выручку приходят некоторые хитрости. Сегодня мы поговорим о «ленивой загрузке» картинок на сайте, и использовать будем jQuery плагин lazy load.

Сборник анимации на CSS3

22 августа 2015 Антон Кулешов

Сегодня для создания конкурентно-способного веб-ресурса приходится учитывать многое: начиная от интуитивно понятного дизайна страницы и заканчивая различными текстами, которые должны привлечь и удержать посетителя. Мы же в этой статье уделим внимание динамике, происходящей на страницах, которая стала неотъемлемой их частью. Если раньше для того, чтобы добавить какой-нибудь эффект нам приходилось использовать различные библиотеки или писать код на JavaScript, то сейчас лучший способ оживить сайт - это воспользоваться анимацией за счёт CSS3.