Создание диаграмм средствами CSS

Want create site? Find Free WordPress Themes and plugins.

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

Причем, для отрисовки диаграммы осуществляется на сервере и пользователю выдается уже готовая картинка. В качестве примера могу привести библиотеку JPGraph, которая неплохо справляется с поставленными задачами. Но предположим, что мы не имеем возможности использовать у себя на сервере библиотеки для отрисовки графиков и диаграмм. Что же делать? Попробуем воспользоваться теми возможностями, которые нам дает CSS. Итак, приступим.

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

МесяцЧисло читателей
Январь120
Февраль140
Март180
Апрель210
Май200
Июнь220
Июль250
Август240
Сентябрь270
Октябрь280
Ноябрь270
Декабрь300

Попробуем эти данные отобразить в виде диаграммы. Для организации данных на странице, разметим их в виде таблицы.

Исходный HTML код:

<table>
 <tr>
  <th>Число читателей в 2006 году</th>
  <td>120</td>
  <td>140</td>
  <td>180</td>
  <td>210</td>
  <td>200</td>
  <td>220</td>
  <td>250</td>
  <td>240</td>
  <td>270</td>
  <td>280</td>
  <td>270</td>
  <td>300</td>
 </tr>
 <tr>
  <th></th>
  <th>Янв</th>
  <th>Фев</th>
  <th>Мар</th>
  <th>Апр</th>
  <th>Май</th>
  <th>Июн</th>
  <th>Июл</th>
  <th>Авг</th>
  <th>Сен</th>
  <th>Окт</th>
  <th>Ноя</th>
  <th>Дек</th>
 </tr>
</table>

Этот код будет отображен браузером вот так:

Число читателей в 2006 году120140180210200220250240270280270300
ЯнвФевМарАпрМайИюнИюлАвгСенОктНояДек

Но это явно не похоже на то, что мы хотели, не правда ли ?
Для того чтобы таблица отображалась в виде диаграммы, нам потребуются две картинки. Первая — для отображения столбиков диаграммы, вторая — для отображения фона.

Теперь приступим к созданию столбиков… Изменим разметку страницы, вставив тэги с изображениями колонок. Высота колонок будет задана в параметре height изображения. В нашем примере мы самостоятельно вычислим высоту столбиков, но в реальности скрипт должен самостоятельно их высчитывать. Это достаточно просто сделать. Высота каждого столбика будет вычислена так:

Значение / Максимальное значение * Максимальная высота картинки

Итак, вставим изображения столбиков в код:

<table>
 <tr>
  <th>Число читателей в 2006 году</th>
  <td>120<img src="column.gif" width="36" height="80" alt="120" /></td>
  <td>140<img src="column.gif" width="36" height="93" alt="140" /></td>
  <td>180<img src="column.gif" width="36" height="120" alt="180" /></td>
  <td>210<img src="column.gif" width="36" height="140" alt="210" /></td>
  <td>200<img src="column.gif" width="36" height="133" alt="200" /></td>
  <td>220<img src="column.gif" width="36" height="147" alt="220" /></td>
  <td>250<img src="column.gif" width="36" height="167" alt="250" /></td>
  <td>240<img src="column.gif" width="36" height="160" alt="240" /></td>
  <td>270<img src="column.gif" width="36" height="180" alt="270" /></td>
  <td>280<img src="column.gif" width="36" height="187" alt="280" /></td>
  <td>270<img src="column.gif" width="36" height="180" alt="270" /></td>
  <td>300<img src="column.gif" width="36" height="200" alt="300" /></td>
 </tr>
 <tr>
  <th></th>
  <th>Янв</th>
  <th>Фев</th>
  <th>Мар</th>
  <th>Апр</th>
  <th>Май</th>
  <th>Июн</th>
  <th>Июл</th>
  <th>Авг</th>
  <th>Сен</th>
  <th>Окт</th>
  <th>Ноя</th>
  <th>Дек</th>
 </tr>
</table>

Также, мы присвоили таблице класс bargraph, который будет описан ниже.
А теперь опишем стиль таблицы. Вот код:

.bargraph {
    font: 0.6em/2em Arial;
    color: #000;
    border-collapse: collapse;
    width: 476px;
    border: 1px solid #AAA;
}  

.bargraph td {
    padding:0;
    margin:0;
    vertical-align:bottom;
    text-align:center;
    background: #FFF url(gridline.gif) 15px bottom;
}

.bargraph th {
    background: #DDD;
}

.bargraph img{
    display:block;
}

Ну вот и все. Смотрим, что получилось в итоге.

Did you find apk for android? You can find new Free Android Games and apps.
Закладка Постоянная ссылка.

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

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