Создание анимированной гистограммы с помощью HTML, CSS и jQuery

Создание анимированной гистограммы с помощью HTML, CSS и jQuery

От автора: люди, по всему миру заседающие в советах директоров, любят хорошие диаграммы. Они сходят с ума по PowerPoint’у, маркированным спискам и фразам типа «запустить идею и посмотреть, что выйдет», «незамутненное мышление» и «легкая добыча», и чтобы все всегда «двигалось вперед». Обратно – не альтернатива для тех, кто способствует сдвигу парадигм в духе времени. Графики финансовых прогнозов, цифры квартальных продаж и насыщения рынка – мечты управляющего среднего звена.

Как мы, будучи веб-дизайнерами, можем справиться с насущной диаграммой? В действительности отобразить их в Сети можно нескольким способами. Можно просто создать изображение и прикрепить его к веб-странице. Но это не очень общедоступно или интересно. Можно использовать Flash, который весьма хорош для показа диаграмм  —  но опять же, не очень общедоступен. Кроме того, дизайнеры, разработчики и божества разлюбили Flash. Такие технологии, как HTML5, могут делать многое из того же, не нуждаясь в плагине. Адаптировать к этой задаче можно даже новый элемент HTML5 canvas. Онлайн предлагается множество инструментов составления диаграмм и графиков, которые тоже применимы. Но что, если нам нужно что-то более близкое к потребностям?

Существуют «за» и «против» широкого ряда доступных нам ресурсов, но этот учебник не будет их исследовать. Вместо того мы создадим собственную диаграмму с применением прогрессивно улучшенных крох CSS3 и jQuery. Потому что можем это.

демо

Что мы делаем?

Мы делаем это. И более того! Вот несколько возможностей расширения объясняемых в учебнике техник:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

— Индикатор выполнения, показывающий, сколько времени осталось человечеству в случае эпидемии зомби;

— Диаграмма, показывающая уровень снижения безопасности занятий на свежем воздухе во время эпидемии;

— Ужасающе похожая диаграмма, показывающая уровень снижения воспитанности во время эпидемии зомби;

— Увеличение уровня людей, не знающих об эпидемии, потому что они делились со своими зараженными друзьями на Facebook’е* тем, что делали на FarmVille.

Или можно было бы создать график или круговую диаграмму, которые просто иллюстрируют что-то полезное и не переполненное ужасами и зомби. Так что давайте начнем.

Что вам понадобится

— Текстовый редактор или редактор HTML. Выберите свой — здесь их много.

jQuery. Займитесь безопасным кодированием и возьмите самый последний. Держите вебсайт jQuery открытым, чтобы можно было во время процесса читать документацию.

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

— Современный и достойный веб-браузер для предварительного просмотра изменений.

Этого должно хватить. Пожалуйста, обратите внимание, что этот учебник – не введение ни в HTML, ни в CSS, ни в jQuery, ни в зомбиведение. Предполагается некоторый средний уровень знания этих трех технологий и живых мертвецов.

Разметка

HTML-основу диаграммы можно создать множеством способов. В этом учебнике мы начнем с table, потому что это самое здравое визуальное решение в случае, если не применяется JavaScript или CSS. Для доступности в колонке имеется большая галочка.

Скорее! Вам только что предоставили тревожные цифры. Прогнозируется, что количество загорелых зомби в несколько ближайших лет выйдет из-под контроля. Под непосредственной угрозой находятся углеродные тигры и голубые обезьяны. Затем загорелые зомби, скорее всего, возьмутся за нас. Но вы – просто дизайнер. Чем вы могли бы помочь?

Я знаю! Вы могли бы сделать веб-страницу, иллюстрирующую нашу неотвратимую кончину, с красивой, успокаивающей, отлично анимированной графикой!

Для начала давайте вставим эти данные в таблицу, где колонки отражают годы, а строки – различные виды.

Смотрите пример ниже, чтобы понять, как это выглядит неприкрыто, без применения CSS или JavaScript. Доступность этой таблицы даст возможность людям, использующим скринридеры, понять данные и прочесть послание между строк – «Спасайтесь! Зомби идут!»

Самая легкая часть окончена. Теперь давайте положимся на возможности CSS и JavasScript’а (посредством jQuery), чтобы иллюстрировать то, о чем нам говорят цифры. Технически наша задача – создать диаграмму, работающую во всех современных браузерах от IE 8 и далее.

Я сказал, во всех современных браузерах? IE 8 — счастливчик: ему повезло отвисать в компании классных ребят. Браузеры, поддерживающие CSS3, получат несколько дополнительных вливаний.

«Объединенными усилиями…»

Если хотите вызвать на помощь Капитана Планету, вам, возможно, придется поискать еще где-нибудь. Если хотите знать, как скомбинировать CSS и jQuery для создания диаграммы, иллюстрирующей нашу грядущую судьбу в руках растущей армии зомби, предпочитающих мозгам автозагар, то читайте больше.

Первое, что нужно сделать – это определить стили таблице с помощью некоторого количества основного CSS. Это – красивая безопасная сетка для тех, кто не включил в своем браузере JavaScript.

Начинаем работать с jQuery

Мы применим jQuery для создания своей диаграммы «на ходу», отдельно от исходной таблицы данных. Чтобы это сделать, нужно получить данные из таблицы и сохранить их в более применимом формате. Затем можно добавить в свой документ новые элементы, применяющие эти данные для конструирования диаграммы.

Давайте начнем с создания основной функции createGraph(). Я сократил некоторые из внутренних процессов этой функции, чтобы вы могли получить более ясную картину структуры. Не забывайте: вы всегда можете обратиться к исходному коду, имеющемуся в этом учебнике.

Вот наша основная структура:

Этой функции передаются два параметра:

1. Данные data в форме табличного элемента table;

2. Элемент container, где мы хотели бы в документе разместить свою диаграмму.

Далее мы объявим несколько переменных для управления своими данными и элементами контейнера плюс несколько переменных-датчиков времени для анимации. Вот код:

Здесь ничего особенно волнующего нет, но позже все это пригодится.

Получение данных

Помимо простого отображения данных хорошая гистограмма должен иметь красивый большой заголовок, четко маркированные оси и легенду с цветной маркировкой. Нам придется извлекать данные из таблицы и форматировать ее более выразительным образом в диаграмму. Чтобы сделать это, мы создадим объект JavaScript, хранящий наши данные в удобных маленьких функциях. Давайте родим свой объект tableData{}:

Тут у нас есть несколько функций, и они объясняются в комментариях к коду. Большая часть их весьма похожа, так что нам не нужно объяснять каждую. Вместо этого давайте выделим одну из них, columnGroups:

Вот как она делится:

— Создайте массив columnGroups[] для хранения данных;

— Получите количество колонок, посчитав ячейки таблицы (td) в первой строке;

— Для каждой колонки найдите количество строк в теле таблицы (tbody) и создайте другой массив для хранения данных табличной ячейки;

— Затем пройдитесь по каждой строке и выберите данные из каждой ячейки таблицы (посредством функции jQuery text()function), а затем добавьте их в массив данных табличной ячейки.

Когда наш объект уже полон первоклассных данных, можно начинать создавать составные элементы нашей гистограммы.

Применение данных

Используя функцию jQuery $.each, уже можно в любой точке циклически просматривать данные и создавать элементы, составляющие диаграмму. Один из самых ловких приемов касается вставки столбцов, представляющих каждый вид внутри годовых колонок.

Вот код:

За исключением заголовков, у нашей таблицы есть пять колонок с тремя строками. В нашей диаграмме это означает, что в каждой создаваемой нами колонке появятся по три столбца. Следующее изображение показывает, как будет сконструирована наша гистограмма:

Разбиваем ее:

— Создайте для каждой колонки div контейнера;

— Пройдитесь внутри каждой колонки для получения данных строки и ячейки;

— Создайте объект столбцов (barObj{}) для хранения свойств каждого столбца, таких как его метка, высота и разметка;

— Добавьте в колонку свойство разметки, применяя класс CSS ‘.fig’ + j для кодирования цвета каждого столбца в колонке и обернув метку в span;

— Добавьте объект в свой массив bars[], чтобы позже можно было иметь доступ к данным;

— Соедините все это вместе, добавив колонки в элемент контейнера колонки.

Приз тому, кто заметил, что мы не установили высоту столбцов. Это для того, чтобы позже лучше контролировать то, как они отображаются.

Теперь, когда у нас уже есть столбцы, давайте поработаем над метками своей гистограммы. Так как код для отображения меток весьма похож, объяснять вам его нет необходимости. Вот как мы отображаем ось y:

Более подробно здесь:

— Получите релевантные табличные данные для своих меток;

— Создайте для элементов неупорядоченный список (ul);

— Пройдитесь по данным меток и создайте для каждой метки пункт списка (li), обернув каждую метку в span;

— Прикрепите пункт к своему списку;

— Наконец, прикрепите список к элементу контейнера.

Повтором этого приема можно добавить легенду, метки оси x и заголовки своей диаграммы.

Перед демонстрированием гистограммы нужно убедиться, что все сделанное нами добавлено в элемент контейнера.

Отображение данных

Все, что осталось сделать в jQuery – это установить высоту каждого столбца. Вот где пригодится то, что ранее мы сохранили свойство высоты в объекте столбцов (bar).

Мы собираемся последовательно анимировать свою диаграмму, один столбец за другим.

Одно из возможных решений – применить функцию повторного вызова для оживления следующего столбца после окончания последней анимации. Однако анимация диаграммы будет слишком долгой. Вместо этого в нашей гистограмме будет применяться функция таймера для отображения каждого столбца через определенный промежуток времени независимо от того, сколько времени требуется каждому столбцу для набора своей высоты. Круто!

Вот функция displayGraph():

Что вы сказали? «Почему ты не используешь функцию $.each, как везде?» Отличный вопрос. Во-первых, давайте обсудим, что делает функция displayGraph(), а затем почему это так, как есть.

Функция displayGraph() принимает два параметра:

1. Столбцы для циклического просмотра.

2. Указатель (i), от которого нужно начинать повторение (начинающийся с 0).

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Давайте разобьем на части остальное:

— Если значение i меньше количества столбцов, то продолжайте;

— Получите текущий столбец из массива, применив значение i;

— Анимируйте свойство высоты (высчитанное как процент и хранимое в bars.height);

— Подождите 100 миллисекунд;

— Увеличьте i на 1 и повторите процесс для следующего столбца.

«Так почему же вам просто не применить перед анимацией функцию $.each с delay()?»

Можно было бы, и это отлично сработало бы… один раз. Но если вы попробовали бы перезагрузить анимацию через кнопку «Перезагрузить гистограмму» («Reset graph»), то события таймера четко не сработали бы и столбцы анимировались бы не поочередно.

Мне бы хотелось быть опровергнутым, и если имеется лучший способ делать это, не стесняйтесь озвучить его в разделе комментариев.

В продолжение вот вам resetGraph():

Давайте разберем resetGraph():

— Остановите всю анимацию и установите высоту каждого столбца обратно на 0;

— Освободите таймеры, чтобы не было запоздалой анимации;

— Подождите 200 миллисекунд;

— Вызовите displayGraph() для анимации первого столбца (при индексе 0).

Наконец, вызовите resetGraph() внизу createGraph() и наблюдайте за происходящим волшебством, греясь в лучах славы результата своего тяжкого труда.

Не так скоро, радость моя! Перед тем, как продолжить, нужно немного «приодеться».

CSS

Первое, что нам нужно сделать – это скрыть исходную таблицу данных. Это можно совершить множеством способов, но так как наш CSS будет загружаться задолго до JavaScript’а, давайте сделаем это наиболее простейшим способом:

Готово. Давайте создадим красивую область контейнера, в который поместим свою диаграмму. Так как при ее создании применялись несколько неупорядоченных списков, мы также перезагрузим стили для них. Важно передать элементам #figure и .graph position: relative, так как это закрепит элементы места в контейнерах в точности там, где нам нужно.

А теперь перейдем к легенде. Мы размещаем легенду прямо внизу контейнера (#figure) и выстраиваем пункты по горизонтали:

Ось x очень похожа на легенду. Мы выстраиваем элементы по горизонтали и закрепляем их ко дну контейнера (.graph):

Ось y немного сложнее и требует пары приемов. Мы передаем ей position: absolute, чтобы выделить ее из общего потока контента, но закрепить в своем контейнере. Растягиваем каждый li на полную высоту гистограммы и добавляем вверху рамки. Так на фоне получатся красивые горизонтальные линии.

Применяя возможности негативного поля, можно сместить числовые метки внутри span, чтобы они передвинулись вверх и влево. Отлично!

Теперь перейдем к мясу в нашем видовом сэндвиче: самим столбцам. Давайте начнем с элемента контейнера для столбцов и колонок:

Здесь ничего слишком сложного нет. Мы просто устанавливаем некоторые размеры контейнера и z-index для гарантии того, что они появятся перед маркировкой оси y.

Теперь к отдельным .bar:

Основные стили, на которые следует обратить здесь внимание:

— position: absolute и bottom: 0, что означает, что столбцы будут привязаны к низу нашей гистограммы и вырастут;

— столбцы каждого из видов (.fig0, .fig1 и .fig2), расположенные внутри .bar-group.

Теперь почему мы не минимизируем количество острых краев на любой из данных страниц, использовав свойство border-radius для закругления краев верхних левых и правых углов каждого столбца? OK, border-radius не очень-то необходим, но хорошо смотрится в поддерживающих браузерах. К счастью, последние версии самых популярных браузеров его поддерживают.

Так как мы разместили значения каждой ячейки таблицы в каждом столбце, можно добавить аккуратный маленький выпрыгивающий элемент, появляющийся при проведении мышью над столбцом:

Сначала выпрыгивание скрыто из виду посредством display: none. Затем, когда над элементом .bar проводят мышью, мы установили display: block для его показа и установили отрицательное margin-top для того, чтобы оно появлялось над каждым столбцом.

Свойства text-shadow, rgba и box-shadow сейчас поддерживаются большинством современных браузеров. Из них только Safari требуется префикс производителя (-webkit-) для того, чтобы заработало box-shadow. Обратите внимание, что эти свойства – просто украшения нашей гистограммы и не требуют понимания. Базовый уровень Internet Explorer’а 8 их просто игнорирует.

Наш последний шаг при сборке в единое целое – нужно кодировать цвет каждого столбца:

В этом примере я просто добавил background-color и background-image с вертикальной мозаикой. Так улучшатся стили столбцов и маленькие иконки, представляющие их в легенде. Красиво.

И, верьте или нет, это все!

Законченный продукт

Почти закругляемся. Думаю, мы сделали достаточно для привлечения внимания аудитории к угрозе перенаселенности зомби. Более того, я надеюсь, что вы почерпнули из этого учебника что-нибудь полезное и продолжите расширять границы того, что можно сделать в браузере  —  особенно с достойными сетевыми стандартами и без применения сторонних плагинов. Если у вас есть мысли о том, как расширить или улучшить что-то, увиденное здесь, не сомневайтесь и оставьте ниже комментарий или найдите меня на Twitter’е @derek_mack.

Приз: высвобождаем мощь CSS3

Это дополнение не так детализировано, как основной пример. Оно в основном служит в качестве выставочного стенда некоторых свойств, продуманных в спецификации CSS3.

Так как к данное время поддержка свойств CSS3 ограничена, то и их применение не распространено. Хотя некоторые из упомянутых характеристик прорываются в другие веб-браузеры, здесь лидируют основанные на Webkit Apple Safari и Google Chrome.

На самом деле мы можем создавать свои диаграммы, вообще не используя изображений, и даже анимировать столбцы с применением CSS вместо jQuery.

Давайте начнем с удаления из столбцов фоновых изображений, заменяя их свойством -webkit-gradient:

То же самое можно сделать с выскакивающими числами:

Для получения более полной информации о градиентах Webkit прочтите блог Surfin’ Safari.

Продолжая говорить о выскакивающих элементах, давайте представим -webkit-transition. Переходы CSS замечательно легко применять и понимать. Когда браузер обнаруживает изменение свойства элемента (высота, ширина, цвет, непрозрачность и т.д.), он делает переход к новому свойству.

И снова обратитесь к Surfin’ Safari за получением информации о -webkit-transition и анимации CSS3.

Вот пример:

При проведении мышью над столбцом поле и непрозрачность выскакивающего элемента изменятся. Это запускает событие перехода согласно установленным нами свойствам. Очень здорово.

Благодаря -webkit-transition мы можем немного упростить функции своего JavaScript’а:

Вот основное, что мы изменили:

— Установили высоту столбцов посредством функции jQuery css() и дали возможность переходам CSS позаботиться об анимации;

— При перезапуске гистограммы выключили переходы, так что высота столбцов мгновенно установилась на 0.

Посмотрите пример, если у вас установлена последняя версия Safari или Chrome’а.

Ультра-Мега-Приз от Webkit: теперь в 3-D!

Чтобы подсмотреть за тем, что будет происходить в будущем, посмотрите маленький эксперимент с эффектом 3-D и превращениями CSS. Для этого снова потребуется последняя версия Safari или Chrome’а:

Как и в нашем предыдущем примере Webkit, здесь нет изображений, а вся анимация управляется через CSS. Поцелуйте меня!

Не знаю, что делать со всей этой информацией. Но предупреждаю вас о потенциальном неправильном употреблении ваших новых возможностей. Словами нашего друга, Капитана Планета: «Все в твоей власти!»

Используйте ее с умом.

Автор: Derek Mack

Источник: //coding.smashingmagazine.com/

Редакция: Команда webformyself.

* Признана экстремистской организацией и запрещена в Российской Федерации.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Полное руководство

Изучите самый популярный язык разработки и станьте высокооплачиваемым профи

Подробнее

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии (2)

  1. Рушана

    Фантастика. Придется раз 10 читать.Спасибо.

  2. Vasya

    Полезная информация, хороший перевод, будем разбираться.