Оригинал статьи опубликован в блоге Khmerang.com, который ведет западный дизайнер, проживающий в столице Камбоджи - Пном-Пене. Ох, завидую я ему

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

Сначала, я подумал, что можно воспользоваться неплохим готовым способом от Apples to Oranges, однако при более близком ознакомлении я нашел в нем несколько важных usability-недостатков.

1. 1. Невозможность распечатать если в браузере стоят установки по умолчанию.
2. 2. Невозможность скопировать диаграмму в Word или Outlook, что часто бывает необъодимо для наших коммерческих клиентов.

Не просить же всех пользователей распечатывать страницы вместе с фоном… Попробуйте вставить содержание этой страницы в Word, и вы поймете в чем заключается проблема. Итак, мы решили пойти другим путем. Конечно, можно было бы просто использовать картинки, но это противоречит нашим высоким целям - легкости и usability.

Чего нам надо?

Допустим, нам нужна диаграмма посещений сайта в месяц. Вот такая:

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

Разметка.

Вбить информацию в эту таблицу не составит труда. Все понятно, ничего хитрого нет.


<table>
<tr>
<th>Visits 2005
<td>10000
<td>15000
<td>20000
<td>30000
<td>35000
<td>40000
<td>50000
<td>60000
<td>70000
<td>80000
<td>90000
<td>100000
</tr>
<tr>
<th>
<th>Jan
<th>Feb
<th>Mar
<th>Apr
<th>May
<th>Jun
<th>Jul
<th>Aug
<th>Sep
<th>Oct
<th>Nov
<th>Dec
</tr>
</table>


Этот код даст нам вот такую простенькую табличку:

Visits 2005	10000	15000	20000	30000	35000	40000	50000	60000	70000	80000	90000	100000
	Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec

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

Картинки.

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

- для столбиков
- для линий

Картинка столбика будет уменьшаться или расти в зависимости от числовых данных. Важно, чтобы она была высокая, иначе (если вы сделаете ее высоту 1px) это не сработает в IE при распечатке и копировании.

Делаем столбцы.

Как я говорил уже выше, у нас не получится использовать фоновые свойства, чтобы вставить картинки. Поэтому придется немного покопать разметку: нам нужно задать высоту столбцов в соответствии с числовыми показателями.

Диаграмма такова: максимальная высота столбика 200px, ширина постоянна, 37px. Таким образом, максимальная высота столика будет рассчитывать по такой формуле: значение / maxЗначение * maxВысота и округляться. Например, наши данные, начиная с января: 10000 / 100000 * 200 = 20, 15000 / 100000 * 200 = 30, 20000 / 100000 * 200 = 40…

Итак, вставим картинки:


<table class="bargraph">
<tr>
<th>Visits 2005
<td>10000
<td>15000
<td>20000
<td>30000
<td>35000
<td>40000
<td>50000
<td>60000
<td>70000
<td>80000
<td>90000
<td>100000
</tr>
<tr>
<th>
<th>Jan
<th>Feb
<th>Mar
<th>Apr
<th>May
<th>Jun
<th>Jul
<th>Aug
<th>Sep
<th>Oct
<th>Nov
<th>Dec
</table>


Обратите внимание, что я добавил class к нашей таблице. Ну как, пока “code is a poetry”?

CSS верстка.


.bargraph {
font: 0.6em/2em Arial;
color: #ddb;
border-collapse: collapse;
width: 476px;
}
.bargraph td {
padding:0;
margin:0;
vertical-align:bottom;
text-align:center;
background: #2d271c url(gridline.gif) 15px bottom;
}
.bargraph th {
background: #2d271c;
}
.bargraph img{
display:block;
border-right: 1px solid #000;
}


Готово! Симпатичная, распечатываемая, легко перевариваемая и деликатесная диаграмма! Посмотрите ее в действии.

Copy Paste.

Единственное, что осталось - сделать так, чтобы можно было бы копировать нашу диаграмму в Word. С примером выше это не получилось бы (если только копировать в Word страницу целиком, с CSS style’ами). Чтобы добиться нужного результата, необходимо немного замусорить нашу разметку стилями; вот так.

Ну что же, не идеально, зато работает. Замечу только, что лучше для этих целей использовать белый фон и черный текст (а не как у нас). Вот и все.

Лента времени

• « Андре Кертеш. Геометрия судьбы.
• » ЧУДО: Цифровая камера (обскура) из сканера - 115 (!) мегапикселей

В тему

• No related posts

Комментировать