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

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

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

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

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

Детали учебника

Сложность: Средняя

Тема: jQuery

демо

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

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

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

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

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

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

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

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

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

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

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

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

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

Разметка

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

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

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

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

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=1024">
      <title>Example 01: No CSS</title>
   </head>

   <body>
      <div id="wrapper">
         <div class="chart">
            <h3>Population of endangered species from 2012 to 2016</h3>
            <table id="data-table" border="1" cellpadding="10" cellspacing="0"
            summary="The effects of the zombie outbreak on the populations
            of endangered species from 2012 to 2016">
               <caption>Population in thousands</caption>
               <thead>
                  <tr>
                     <td>&nbsp;</td>
                     <th scope="col">2012</th>
                     <th scope="col">2013</th>
                     <th scope="col">2014</th>
                     <th scope="col">2015</th>
                     <th scope="col">2016</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <th scope="row">Carbon Tiger</th>
                     <td>4080</td>
                     <td>6080</td>
                     <td>6240</td>
                     <td>3520</td>
                     <td>2240</td>
                  </tr>
                  <tr>
                     <th scope="row">Blue Monkey</th>
                     <td>5680</td>
                     <td>6880</td>
                     <td>6240</td>
                     <td>5120</td>
                     <td>2640</td>
                  </tr>
                  <tr>
                     <th scope="row">Tanned Zombie</th>
                     <td>1040</td>
                     <td>1760</td>
                     <td>2880</td>
                     <td>4720</td>
                     <td>7520</td>
                  </tr>
               </tbody>
            </table>
         </div>
      </div>
   </body>
</html>

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

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

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

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

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

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

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

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

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

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

// В целях безопасности подождать, пока DOM все загрузит
$(document).ready(function() {

   // Создайте свою диаграмму из данных таблицы и укажите контейнер, в который нужно поместить диаграмму
   createGraph('#data-table', '.chart');

   // Здесь будут диаграммы
   function createGraph(data, container) {
      // Объявляем несколько переменных и элементов контейнера
      …

      // Создаем объект данных таблицы
      var tableData = {
         …
      }

      // Полезные переменные для получения доступа к табличным данным
      …

      // Сконструируйте диаграмму
      …

      // Установите высоту отдельных столбцов гистограммы
      function displayGraph(bars) {
         …
      }

      // Перезагрузите установки диаграммы и подготовьтесь к показу
      function resetGraph() {
         …
         displayGraph(bars);
      }

      // Функции-помощники
      …

      // Наконец, отобразите диаграмму через функцию reset
      resetGraph();
   }
});

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

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

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

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

// Объявите несколько простых переменных и элементы контейнера
var bars = [];
var figureContainer = $('<div id="figure"></div>');
var graphContainer = $('<div class="graph"></div>');
var barContainer = $('<div class="bars"></div>');
var data = $(data);
var container = $(container);
var chartData;
var chartYMax;
var columnGroups;

// Переменные счетчика
var barTimer;
var graphTimer;

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

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

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

// Создаем объект табличных данных
var tableData = {
   // Получаем цифровые данные из ячеек таблицы
   chartData: function() {
      …
   },
   // Получаем данные заголовка из заглавия таблицы
   chartHeading: function() {
      …
   },
   // Получаем данные легенды из тела таблицы
   chartLegend: function() {
      …
   },
   // Получаем самое высокое значение для шкалы оси y
   chartYMax: function() {
      …
   },
   // Получаем данные оси y из ячеек таблицы
   yLegend: function() {
      …
   },
   // Получаем данные оси x из заголовка таблицы
   xLegend: function() {
      …
   },
   // Сортируем данные по группам на основе количества колонок
   columnGroups: function() {
      …
   }
}

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

// Сортируем данные по группам на основе количества колонок
columnGroups: function() {
   var columnGroups = [];
   // Получаем количество колонок из первой строки тела таблицы
   var columns = data.find('tbody tr:eq(0) td').length;
   for (var i = 0; i < columns; i++) {
      columnGroups = [];
      data.find('tbody tr').each(function() {
         columnGroups.push($(this).find('td').eq(i).text());
      });
   }
   return columnGroups;
}

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

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

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

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

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

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

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

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

Вот код:

// Двигаемся сквозь группы колонок, добавляя по пути столбцы диаграммы
$.each(columnGroups, function(i) {
   // Создаем контейнер группы столбцов диаграммы
   var barGroup = $('<div class="bar-group"></div>');
   // Добавляем внутрь каждой колонки столбцы
   for (var j = 0, k = columnGroups.length; j < k; j++) {
      // Создаем объект столбцов (bar) для хранения свойств (метка, высота, код и т.д.) и добавляем его в массив
      // Позже устанавливаем высоту в displayGraph() для того, чтобы стало возможным последовательное отображение слева направо
      var barObj = {};
      barObj.label = this[j];
      barObj.height = Math.floor(barObj.label / chartYMax * 100) + '%';
      barObj.bar = $('<div class="bar fig' + j + '"><span>' + barObj.label + '</span></div>')
         .appendTo(barGroup);
      bars.push(barObj);
   }
   // Добавляем в гистограмму группы столбцов
   barGroup.appendTo(barContainer);
});

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

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

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

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

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

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

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

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

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

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

// Добавляем в диаграмму ось y
var yLegend   = tableData.yLegend();
var yAxisList   = $('<ul class="y-axis"></ul>');
$.each(yLegend, function(i) {
   var listItem = $('<li><span>' + this + '</span></li>')
      .appendTo(yAxisList);
});
yAxisList.appendTo(graphContainer);

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

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

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

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

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

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

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

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

// Добавляем в диаграмму столбцы
barContainer.appendTo(graphContainer);      

// Добавляем диаграмму в контейнер диаграммы
graphContainer.appendTo(figureContainer);

// Добавляем контейнер диаграммы в основной контейнер
figureContainer.appendTo(container);

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

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

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

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

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

// Устанавливаем индивидуальную высоту столбца
function displayGraph(bars, i) {
   // Изменили метод циклического просмотра из-за проблем с $.each, которые нормально не перезагружаются
   if (i < bars.length) {
      // Анимируем высоту с помощью функции jQuery animate()
      $(bars.bar).animate({
         height: bars.height
      }, 800);
      // Ожидаем определенное время, затем снова запускаем функцию displayGraph() для следующего столбца
      barTimer = setTimeout(function() {
         i++;
         displayGraph(bars, i);
      }, 100);
   }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// Перезагружаем установки диаграммы и готовимся к ее отображению
function resetGraph() {
   // Останавливаем всю анимацию и устанавливаем высоту столбца на 0
   $.each(bars, function(i) {
      $(bars.bar).stop().css('height', 0);
   });

   // Очищаем таймеры
   clearTimeout(barTimer);
   clearTimeout(graphTimer);

   // Перезагружаем таймер
   graphTimer = setTimeout(function() {
      displayGraph(bars, 0);
   }, 200);
}

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

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

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

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

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

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

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

CSS

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

#data-table {
   display: none;
}

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

/* Контейнеры */

#wrapper {
   height: 420px;
   left: 50%;
   margin: -210px 0 0 -270px;
   position: absolute;
   top: 50%;
   width: 540px;
}

#figure {
   height: 380px;
   position: relative;
}

#figure ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

.graph {
   height: 283px;
   position: relative;
}

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

/* Легенда */

.legend {
   background: #f0f0f0;
   border-radius: 4px;
   bottom: 0;
   position: absolute;
   text-align: left;
   width: 100%;
}

.legend li {
   display: block;
   float: left;
   height: 20px;
   margin: 0;
   padding: 10px 30px;
   width: 120px;
}

.legend span.icon {
   background-position: 50% 0;
   border-radius: 2px;
   display: block;
   float: left;
   height: 16px;
   margin: 2px 10px 0 0;
   width: 16px;
}

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

/* Ось x */

.x-axis {
   bottom: 0;
   color: #555;
   position: absolute;
   text-align: center;
   width: 100%;
}

.x-axis li {
   float: left;
   margin: 0 15px;
   padding: 5px 0;
   width: 76px;
}

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

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

/* Ось y */

.y-axis {
   color: #555;
   position: absolute;
   text-align: right;
   width: 100%;
}

.y-axis li {
   border-top: 1px solid #ccc;
   display: block;
   height: 62px;
   width: 100%;
}

.y-axis li span {
   display: block;
   margin: -10px 0 0 -60px;
   padding: 0 10px;
   width: 40px;
}

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

/* Столбцы диаграммы */

.bars {
   height: 253px;
   position: absolute;
   width: 100%;
   z-index: 10;
}

.bar-group {
   float: left;
   height: 100%;
   margin: 0 15px;
   position: relative;
   width: 76px;
}

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

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

.bar {
   border-radius: 3px 3px 0 0;
   bottom: 0;
   cursor: pointer;
   height: 0;
   position: absolute;
   text-align: center;
   width: 24px;
}

.bar.fig0 {
   left: 0;
}

.bar.fig1 {
   left: 26px;
}

.bar.fig2 {
   left: 52px;
}

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

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

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

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

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

.bar span {
   #fefefe url(../images/info-bg.gif) 0 100% repeat-x;
   border-radius: 3px;
   left: -8px;
   display: none;
   margin: 0;
   position: relative;
   text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
   width: 40px;
   z-index: 20;

   -webkit-box-shadow: rgba(0, 0, 0, 0.6) 0 1px 4px;
   box-shadow: rgba(0, 0, 0, 0.6) 0 1px 4px;
}

.bar:hover span {
   display: block;
   margin-top: -25px;
}

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

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

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

.fig0 {
   background: #747474 url(../images/bar-01-bg.gif) 0 0 repeat-y;
}

.fig1 {
   background: #65c2e8 url(../images/bar-02-bg.gif) 0 0 repeat-y;
}

.fig2 {
   background: #eea151 url(../images/bar-03-bg.gif) 0 0 repeat-y;
}

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

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

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

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

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

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

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

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

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

.fig0 {
   background: -webkit-gradient(linear, left top, right top, color-stop(0.0, #747474), color-stop(0.49, #676767), color-stop(0.5, #505050), color-stop(1.0, #414141));
}

.fig1 {
   background: -webkit-gradient(linear, left top, right top, color-stop(0.0, #65c2e8), color-stop(0.49, #55b3e1), color-stop(0.5, #3ba6dc), color-stop(1.0, #2794d4));
}

.fig2 {
   background: -webkit-gradient(linear, left top, right top, color-stop(0.0, #eea151), color-stop(0.49, #ea8f44), color-stop(0.5, #e67e28), color-stop(1.0, #e06818));
}

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

.bar span {
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #fff), color-stop(1.0, #e5e5e5));
   …
}

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

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

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

Вот пример:

.bar span {
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #fff), color-stop(1.0, #e5e5e5));
   display: block;
   opacity: 0;

   -webkit-transition: all 0.2s ease-out;
}

.bar:hover span {
   opacity: 1;
}

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

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

//Устанавливаем индивидуальную высоту столбцов
function displayGraph(bars, i) {
   // Изменили способ циклического просмотра из-за проблем с $.each, которое не перезапускается должным образом
   if (i < bars.length) {
      // Добавляем свойства перехода и посредством CSS устанавливаем высоту
      $(bars.bar).css({'height': bars.height, '-webkit-transition': 'all 0.8s ease-out'});
      // Ждем определенное время, затем снова запускаем функцию displayGraph() для следующего столбца
      barTimer = setTimeout(function() {
         i++;
         displayGraph(bars, i);
      }, 100);
   }
}
// Перезагружаем установки диаграммы и готовимся к ее отображению
function resetGraph() {
   // Устанавливаем высоту столбца на 0 и очищаем все переходы
   $.each(bars, function(i) {
      <strong>$(bars.bar).stop().css({'height': 0, '-webkit-transition': 'none'});</strong>
   });

   // Очищаем таймеры
   clearTimeout(barTimer);
   clearTimeout(graphTimer);

   // Заново запускаем таймер
   graphTimer = setTimeout(function() {
      displayGraph(bars, 0);
   }, 200);
}

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

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

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

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

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

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

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

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

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

Автор: Derek Mack

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

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

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки: ,

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

Комментарии Facebook:

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

  1. Рушана

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

  2. Vasya

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree