За создание диаграмм с помощью только CSS спасибо Alen Grakalic, а я в свою очередь немного «оживил» диаграмму с помощью php и предлагаю посмотреть и детально разобрать как это работает…

Вы можете скачать исходный код примера, и воспроизвести это пример на своем сайте.

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

Повторюсь, я немного «оживил» пример, добавив php-код, который генерирует набор случайных двузначных чисел. Нажмите кнопку «Пересчитать» и диаграмма изменится.

Стоит только осознать идею Алена, как все становится понятным. Для построения диаграммы выбран элемент dl (definition list). Но можно рассматривать элементы dt (definition titles) как пункты по оси X и элементы dd (definition descriptions) как значения по оси Y.

Чтобы понять это, давайте посмотрим на пример разметки диаграммы без стилевого оформления. Вот так это выглядит:

1-й день

27

2-й день

53

А вот соответствующий этому HTML-код:

<dl>
  <dt>1-й день</dt>
  <dd>27</dd>
  <dt>2-й день</dt>
  <dd>53</dd>
</dl>

Далее добавляем внутрь элементов dd элементы span и внутри них элементы em. Элементам span назначаем имена классов. В итоге должно получиться вот это:

<dd><span class="type2 p80"><em>80</em></span></dd>

Теперь начнем разбираться с таблицей стилей.

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

Удаляем установленные по умолчанию поля и отступы и в следующем правиле задаем для элемента dl свойство background и определяем его ширину width и высоту height.
Файл bg_chart.gif – картинка фона для диаграммы в которой нарисованы оси X и Y. Картинка как раз имеет размеры 400х400 px.

dl#csschart dt{
    display:none;
}

Делаем невидимыми элементы dt, поскольку информация, содержащаяся в них (1-й день, 2-й день,…) нам не нужна.
Дальше – интереснее…. Элемент dd содержит два дочерних элемента – span и em. Таким образом можно манипулировать тремя элементами.
Элементы dd позиционируются с помощью добавления полей, установки их высоты в 100% и ширины в соответствии с шириной шага сетки на фоновой картинке. Элементы dd включаются в «плавающую» модель (float:left;), используется относительное (position:relative;) позиционирование, что позволяет сопоставлять дочерние по отношению к dd элементы (span и em) со своим родителем (dd). Ниже это можно увидеть в CSS-коде.

dl#csschart dd{
  position:relative;
  float:left;
  width:36px;
  height:360px;
  margin-top:20px;
}
dl#csschart dd.first{
  margin-left:22px;
}

Элементы span выполняют роль колонок, позиционируются абсолютно относительно своего родительского элемента (dd) и располагаются в самом низу, что позволяет им «вырастать» до нужного размера, базируясь на значении количества процентов. Элементы em – квадратики, где цифрами отображается количество процентов. Кусочек этого кода приведен ниже:

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;
}

Но как же получается требуемая высота?
Давайте снова обратим внимание на HTML-разметку.

<dd><span class="type2 p80"><em>80</em></span></dd>

Мы увидим, что элемент span имеет два css класса.
Первый класс определяет тип столбика диаграммы, посмотрите css-код и тут все станет понятно:

dl#csschart span.type1 {
  background:url(type1.gif) repeat-y;
}
dl#csschart span.type2{
  background:url(type2.gif) repeat-y;
}
dl#csschart span.type3{
  background:url(type3.gif) repeat-y;
}
dl#csschart span.type4{
  background:url(type4.gif) repeat-y;
}

Просто в качестве фонового изображения используются небольшие разноцветные полоски.
Второй же класс (p0 – p100) фактически определяет высоту элементов span.

dl#csschart span.p0{height:0%;}
dl#csschart span.p1{height:1%;}
dl#csschart span.p2{height:2%;}
dl#csschart span.p3{height:3%;}
dl#csschart span.p4{height:4%;}
.........................
dl#csschart span.p99{height:99%;}
dl#csschart span.p100{height:100%;}

Вот так работает эта штука.