Визуализация данных на CSS

Визуализация данных графиков, диаграмм в основном решается с помощью флэш и некоторых языков программирования. Являются ли эти способы единственными? Давайте попробуем реализовать эту задачу с помощью CSS.

Предисловие
В этом примере я не буду использовать ни JavaScript, ни любые другие языки. Все, что мне нужно это хорошая разметка и код CSS.
Таким образом, наша цель состоит в том, чтобы представить данные таблицы в виде диаграммы. Можно отметить, что данные диаграммы – это объект из 2х элементов, непосредственно зависимых друг от друга. Поэтому, лучшим решением в отношении структуры и семантики будет использование списков определений.
Почему? Ну, для начала, это список элементов. Несмотря на то, что список является линейным, мы можем обозначить заголовки определений (элементы dt) как пункты по оси X и описание определений (элементы dd) как значения по оси Y.

А делать мы будем следующее:
представим

вот в таком виде

лишь с помощью CSS кода

Реализация
Для примера я использовал период последних 12 дней и мое представление работоспособности за день (что-то типа КПД рабочего дня) в процентах. Как вы заметили, на 6й день процент был самый высокий, потому что я получил зарплату, что и мотивировало меня :-)

Заголовки определений в данном случае будут сами дни по порядку от 1 до 12

Day 1

А описанием определений будут значения моего КПД в %

36

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

80

Теперь можно заняться непосредственно CSS
Содержание списков определений является элементом диаграммы (столбец), поэтому я присвою ему фоновый рисунок, определю ширину и высоту столбца насколько позволяет сам блок диаграммы. Так же, нужно обнулить все значения отступов по умолчанию.

dl#csschart, dl#csschart dt, dl#csschart dd{
margin:0;
padding:0;
}
dl#csschart{
background:url(bg_chart.gif) no-repeat 0 0;
width:467px;
height:385px;
}


Заголовки определений не имеют целью визуальное отображение, поэтому скроем их:

dl#csschart dt{
display:none;
}


Мы уже близко к развязке. Напомню что, элемент описания определений содержит 2 дочерних элемента: span и em. Это дает нам сразу 3 элемента для работы над ним.
Установим для соответвующие отступы, затем высоту и ширину, в пределах которого будет повтоярться наш фоновый рисунок. Установим привязку слева, чтобы элементы были выстроены в одну линию.

dl#csschart dd{
position:relative;
float:left;
display:inline;
width:33px;
height:330px;
margin-top:22px;
}
dl#csschart dd.first{
margin-left:33px;
}

Элемент span представляет собой содержание столбца, а элемент em будет тем самым квадратиком посередине столбца, содержащий его значение. Для span установим свойство абсолютного позиционирования и сделаем привязку к низу, чтобы столбец «рос» вверх.

dl#csschart span{
position:absolute;
display:block;
width:33px;
bottom:0;
left:0;
z-index:1;
color:#555;
text-decoration:none;
}
dl#csschart span em{
display:block;
font-style:normal;
float:left;
line-height:200%;
background:#fff;
color:#555;
border:1px solid #b1b1b1;
position:absolute;
top:50%;
left:3px;
text-align:center;
width:23px;
}

Схематично это можно изобразить так:


Так, как же нам узнать точные значения высоты элементов?
Мы реализуем это с помощью элемента span, указав ему высоту в %. Как вы заметили в коде выше, у элемента span 2 класса. Первый их них, определяет его тип (type1 — type4). В моем случае это сделано для того чтобы определить различные цвета. Второй класс (p0 — p100) как раз и будет отвечать за высоту столбца.

dl#csschart span.p0{height:0%;}
dl#csschart span.p1{height:1%;}
dl#csschart span.p2{height:2%;}
.
.
.
dl#csschart span.p100{height:100%;}

Прежде чем вставлять значения, мы должны присвоить все необходимые классы для элемента span так:

80

Ну вот и весь трюк.
Конечно разметку можно запрограммировать, а не вводить вручную – все зависит от поставленной задачи.
Посмотреть все это в реальном времени можно тут или скачать архив.