cssing :: Архив :: Графики

7 марта, 2006

Графики

Недавно пришлось делать графики для процентных соотношений политических партий. Вышли довольно забавные варианты - делюсь.

Наверно все же и у меня есть читательницы. Всех их поздравляю с наступающим!!! :)

Что именно

Тут можно посмотреть пример. Как говорится это не rocket science. Тут все просто и вряд ли применяется какой то авангард. Но меня привлекает такой вид графиков и то как они просто получились - авось кому сгодится. Вот скрин для тех кто поленился кляцать:

Делал я их именно так - с помощью HTML-кода, а не ПХП библиотек или флеш штучек потому что так было проще :). А я никогда не ищу сложных путей. (почти)

HTML

Разумеется в основу всего этого я положил более или менее семантический с моей точки зрения код:

1. <div class="b-graph">
2. <!– классы e1-e12 нужны для позиций колонок –>
3. <ul class="e1">
4. </ul>
5. <ul class="e2">
6. …
7. </ul>
8. <ul class="e12">
9. </ul>
10. </div>

Где каждый ul есть как раз та разноцветаня колонка из первого графика в примере. Как легко догадаться каждый из элементов списка является “прослойкой” цвета в колонках. Внутри списков примерно такой код:

1. <li class="c1" style="height: 14px;">
2. <span>
3. <span class="hide">Название партии</span>14%
4. </span>
5. </li>
6. <li class="c2" style="height: 19px;"><span><span class="hide">Название партии</span>19%</span></li>

Номер каждого класса c1 c2 … с6 отвечает просто за цвет прослойки. Так как в каждой колонке они в одном порядке - нет ничего проще как в PHPшном цикле его расставлять.

Название партии я скрывал через CSS, а позднее и вообще решил убрать из кода - разумеется это не совсем правильно. Но по статистике там не было слепых пользователей и мобильных :(. Да и SEO была неактуальна в контексте проекта.

Вместо этого я добавил центрирование по вертикали. Как вы возможно уже знаете, при указании одинаковой height и line-height - одна строка текста внутри блока центрируется по вертикали (уже писал) А у нас как раз одна строка с процентами. :) Вот и хорошо.

1. <li class="c1" style="height: 14px;">
2. <span style="height: 14px; line-height: 14px;">
3. 14%
4. </span>
5. </li>
6. <li class="c2" style="height: 19px;"><span style="height: 19px; line-height: 19px;">19</span></li>

И так как за некоторые партии голосовало слишком мало народу - так что цифры попросту не влезали в эту прослойку - я расставлял через движок класс class=”view” для тех у кого достаточно места для показа процентов, примерно так:

1. <li class="c1" style="height: 14px;">
2. <span class="view" style="height: 14px; line-height: 14px;">
3. 14%
4. </span>
5. </li>

В результате при отключенных стилях мы бы имели что то вроде десятка списков с названиями партий и их процентами. Для полной доступности стоило конечно добавить туда еще и дату - так как каждая колонка соответствовала дате. Но по некоторым причинам(для тех кто не понял это лень и нехватка времени :)) пришлось ограничиться картинкой которую мне любезно предоставил ПМ. На ней уже были даты.

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

CSS

Подготовил поле:

1. .b-graph {
2. width:532px;
3. height:297px;
4. background:transparent url(b-graph.gif) no-repeat 0 0;
5. position:relative;/* для позиционирования колонок внутри*/
6. }

Затем стили для колонок и цвета для полосочек

1. .b-graph ul{
2. position:absolute;
3. bottom:18px;/* что бы низ колонок совпал с рисунком графика*/
4. width:30px;/* собссно ширина*/
5. }
6. сi{background:#xxx} /* у меня 6 раз*/

И наконец самое слабое место метода как по мне - позиционирование каждой колонки - так как страница с ограниченной шириной, то в моем случае их кол-во было не очень большим - поэтому я и использовал 13 разных классов для их позиционирования:

1. .e1{left:37px;}
2. .e2{left:72px;}
3. …
4. .e13{left:457px;}

Таким образом я их разместил через одинаковое расстояние, точно подгадав под фоновую картинку для графика.
Однако это и есть главный недостаток - так как писать такой код довольно неудобно - да и приходится при увеличении колонок его дописывать. Возможно сделаю более универсальную версию…

Вот что получилось.

К сожалению проблему whitespace между элементами списка в ИЕ 5.0 мне так и не удалось решить. Но ввиду его малого кол-ва, я про него “забыл”. Вообще же можно было отдавать отдельный CSS. Либо использовать какой то немного другой код. Хотя я еще не оставил надежды побороть таки глюк каким нить хаком :)

В остальных же всех броузерах работает отлично :)

Вот такие наскоро склепанные графики получились. Те что ниже и выглядят попроще построены по абсолютно такому же принципу - просто на одно измерение меньше.
Буду рад если кому то пригодится. Нет предела фантазии поиграться с фоном колонок :). Жаль есть предел времени. Но как по мне получилось довольно занятно, я таких графиков у наших “гуру” еще не видел :P.

Ваши предложения и замечания, комментарии приветствуются!

Ссылки

Еще про это писали:

• Мои графики
• Bar Graphs With Style
• CSS bar graphs и ссылка на пример
• CSS For Bar Graph
• Похожая идея графиков с отличной графической реализацией

принципы в основном похожие. Так что использовать нужно то, что удобно в данной ситуации. Ничего особо универсального нет.

XHTML/CSS, Полезности