CSSing – Блог про CSS и все что с этим связано. Новые приемы и технологии и т д.

Графики

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

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

Что именно

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>

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>

Название партии я скрывал через 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>

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 раз*/

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
• Похожая идея графиков с отличной графической реализацией