Создание линейной диаграммы с помощью CSS

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

РАЗМЕТКА СТРАНИЦЫ

Первое что необходимо сделать, это создать HTML каркас.

<dl id="csschart">
	<dt>ПН</dt>
	<dd>36</dd>
	<dd>30</dd>
</dl>

Для реализации этого решения я буду использовать определенный список. Каждый день недели я поместил в тег <dt> и создал данные по этому дню <dd>. У меня получились две метки, один тег соответствует количеству посещений страницы, а другой процент от посещения всего сайта.

<dl>
	<dt>Mon</dt>
	<dd class="p36"><span><b>36</ b ></span></dd> /*процент посещений*/
	<dd class="sub p30" ><span><b>30</ b ></span></dd> /*количество посещений*/
</dl>

Каждому тегу <dd> задаем свой класс, который будет соответствовать проценту этого бара. Другой класс, который мы добавили, будет рисовать сам график со значениями. Добавили тег <span> для облегчения создания CSS стилей.

СТИЛИ ДИАГРАММЫ

dl#csschart, dl#csschart dt, dl#csschart dd{
	margin:0;
	padding:0;
}
dl#csschart{
	background:url(../images/bg_chart.gif) no-repeat 0 0;
	width:454px;
	height:360px;
	padding-left:11px;
}
dl#csschart dt{
	display:none;
}
dl#csschart dd{
	position:relative;
	float:left;
	display:inline;
	width:33px;
	height:330px;
	margin-top:22px;
}
dl#csschart span{
	position:absolute;
	display:block;
	width:33px;
	bottom:0;
	left:0;
	z-index:1;
	color:#555;
	text-decoration:none;
}
dl#csschart span b{
	display:block;
	font-weight:bold;
	font-style:normal;
	float:left;
	line-height:200%;
	color:#fff;
	position:absolute;
	top:5px;
	left:3px;
	text-align:center;
	width:23px;
}
		/* Стили для даграммы. */
dl#csschart span{
	height:50%;
	background:url(../images/bar.png) repeat-y;
}
dl#csschart .sub{
	margin-left:-33px;
}
dl#csschart .sub span{
	background:url(../images/subBar.png) repeat-y;
}
dl#csschart .p0 span{height:0%}
dl#csschart .p1 span{height:1%}
dl#csschart .p2 span{height:2%}
dl#csschart .p3 span{height:3%}
dl#csschart .p4 span{height:4%}
dl#csschart .p5 span{height:5%}
/*Так до 100%*/

Первое, что нам необходимо сделать, это сбросить все поля и отступы, чтобы диаграмма выглядела одинаково во всех браузерах. Затем мы определяет ширину и высоту для идентификатора csschart. Мы используем фоновое изображение, чтобы сделать деление на оси и создания фоновой сетки. Также мы задали значение float, чтобы следующая диаграмма переносилась в левую сторону.

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

В нижней части мы определяем фоновое изображение для промежутков времени. Наконец, мы создаем 101 класс для каждого процентного пункта от 0% до 100%. Чтобы Вы поняли, что каждый тег выполняет, я нарисовал картинку:

ДОБАВЛЕНИЕ ОСЕЙ

Как Вы могли заметить, у нас, пока, нет осей. Сейчас мы займемся этим. Для добавления, осей мы будем использовать неупорядоченный список. Разместить оси необходимо перед диаграммой.

<ul class="yAxis">
	<li>100</li>
	<li>90</li>
	<li>80</li>
	<li>70</li>
	<li>60</li>
	<li>50</li>
	<li>40</li>
	<li>30</li>
	<li>20</li>
	<li>10</li>
</ul>

А после диаграммы мы разместим дни недели.

<ul class="xAxis">
	<li>Пн</li>
	<li>Вт</li>
	<li>Ср</li>
	<li>Чт</li>
	<li>Пт</li>
	<li>Сб</li>
	<li>Вс</li>
</ul>

СТИЛИ ДЛЯ ОСЕЙ

ul.xAxis{
	margin:0 0 0 27px;
	padding:0;
	float:left;
	clear:left;
	display:inline;
	width:454px;
}
ul.yAxis{
	margin:14px 0 0 0;
	padding:0;
	display:inline;
	float:left;
}
ul.xAxis li{
	float:left;
	list-style:none;
	width:33px;
	text-align:center;
}
ul.yAxis li{
	list-style:none;
	height:33px;
	text-align:right;
	float:left;
	clear:left;
}

Стили для осей не очень сложные. Мы просто поместили оси на место и задали фон для элементов списка li.

Картинки, какие я использовал, Вы можете скачать здесь.

Полный код должен выглядеть следующим образом:

<ul class="yAxis">
	<li>100</li>
	<li>90</li>
	<li>80</li>
	<li>70</li>
	<li>60</li>
	<li>50</li>
	<li>40</li>
	<li>30</li>
	<li>20</li>
	<li>10</li>
</ul>
<dl id="csschart">
	<dt>Пн</dt>
	<dd class="p36"><span><b>36</b></span></dd>
	<dd class="sub p30" ><span><b>36</b></span></dd>
	<dt>Вт</dt>
	<dd class="p45"><span><b>45</b></span></dd>
	<dd class="sub p35"><span><b>36</b></span></dd>
	<dt>Ср</dt>
	<dd class="p41"><span><b>41</b></span></dd>
	<dd class="sub p21"><span><b>51</b></span></dd>
	<dt>Чт</dt>
	<dd class="p48"><span><b>48</b></span></dd>
	<dd class="sub p30" ><span><b>36</b></span></dd>
	<dt>Пт</dt>
	<dd class="p55"><span><b>55</b></span></dd>
	<dd class="sub p15" ><span><b>36</b></span></dd>
	<dt>Сб</dt>
	<dd class="p80"><span><b>80</b></span></dd>
	<dd class="sub p71" ><span><b>36</b></span></dd>
	<dt>Вс</dt>
	<dd class="p72"><span><b>72</b></span></dd>
	<dd class="sub p53" ><span><b>36</b></span></dd>
</dl>
<ul class="xAxis">
	<li>Пн</li>
	<li>Вт</li>
	<li>Ср</li>
	<li>Чт</li>
	<li>Пт</li>
	<li>Сб</li>
	<li>Вс</li>
</ul>

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