Визуализация данных на CSS |
|
|
Перевод:
http://habratchanka.habrahabr.ru/
Автор:
http://cssglobe.com/post/1272/pure-css-data-chart
Визуализация данных графиков, диаграмм в основном решается с помощью флэш и
некоторых языков программирования. Являются ли эти способы единственными?
Давайте попробуем реализовать эту задачу с помощью CSS.
Предисловие
В этом примере я не буду использовать ни JavaScript, ни любые другие языки. Все,
что мне нужно это хорошая разметка и код CSS.
Таким образом, наша цель состоит в том, чтобы представить данные таблицы в виде
диаграммы. Можно отметить, что данные диаграммы – это объект из 2х элементов,
непосредственно зависимых друг от друга. Поэтому, лучшим решением в отношении
структуры и семантики будет использование списков определений.
Почему? Ну, для начала, это список элементов. Несмотря на то, что список
является линейным, мы можем обозначить заголовки определений (элементы dt) как
пункты по оси X и описание определений (элементы dd) как значения по оси Y.
А делать мы будем следующее:
представим
вот в таком виде
лишь с помощью CSS кода
Реализация
Для примера я использовал период последних 12 дней и мое представление
работоспособности за день (что-то типа КПД рабочего дня) в процентах. Как вы
заметили, на 6й день процент был самый высокий, потому что я получил зарплату,
что и мотивировало меня :-)
Заголовки определений в данном случае будут сами дни по порядку от 1 до 12
<dt>Day 1</dt>
А описанием определений будут значения моего КПД в %
<dd>36</dd>
Внутри элемента dd я добавлю также элементы span и em. Не в целях изменения
структуры, а для того чтобы было достаточно элементов для работы со стилями.
Также присвою класс элементу, который в дальнейшим мы оформим.
Таким образом, описание определения будет выглядеть так:
<dd><span class="type2 p80"><em>80</em></span></dd>
Теперь можно заняться непосредственно 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 так:
<dd><span class="type2 p80"><em>80</em></span></dd>
Ну вот и весь трюк.
Конечно разметку можно запрограммировать, а не вводить вручную – все зависит от
поставленной задачи.
Посмотреть все это в реальном времени можно
тут или
скачать
архив.
|
