Графики

7 March, 2006

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

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

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

Что именно

Тут можно посмотреть пример. Как говорится это не rocket science. Тут все просто и вряд ли применяется какой то авангард. Но меня привлекает такой вид графиков и то как они просто получились – авось кому сгодится. Вот скрин для тех кто поленился кляцать:
мои графики
Делал я их именно так – с помощью HTML-кода, а не ПХП библиотек или флеш штучек потому что так было проще :). А я никогда не ищу сложных путей. (почти)

HTML

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

  1. <div class="b-graph">
  2. <!– классы e1-e12 нужны для позиций колонок –>
  3. <ul class="e1">
  4. </ul>
  5. <ul class="e2">
  6. </ul>
  7. <ul class="e12">
  8. </ul>
  9. </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. .e13{left:457px;}

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

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

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

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

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

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

Ссылки

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

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

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

19 комментариев к “Графики”

DenD | 1. 7 March, 2006

Около года назад, помнится, делал гистограмы для http://diac.com.ua (на главной справа)

Вариант с php+GD тогда почему-то сразу отпал, пришлось возится с html+CSS. А т.к. с CSS тогда был знаком очень слабо, возится пришлось основательно. Основная проблема была в том, чтобы подпись колонки съезжала вправо за границу 100% при достижении колонкой этих самых 100%. Задача мне казалась невыполнимой, а потом как-то все-таки победил :)

ganges | 2. 7 March, 2006

Респект. В следующий раз – давай вместе с PHP скриптом и конфигурацией :)

Юля Ромашкина | 3. 7 March, 2006

Есть читательницы, есть :-) Спасибо :-)

Spr!tE | 4. 9 March, 2006

http://www.surfare.net/~toolman/temp/diagram.html – чего только на одном CSS не делают люди =)

akella | 5. 9 March, 2006

Спасибо Дэн :). И Spr!tE – очень интересный линк – вот уж действительно терь есть чем пострадать в свободное время. :)
Читательницы(ца) пжлст ;)

Vladson | 6. 9 March, 2006

Горизонтальные (как на diac.com.ua) я тоже как-то делал, даже хотел написать заметку на хомячёк http://dkflbk.nm.ru/test001/html001.html но увы лень сделала своё дело и дальше планирования это не дошло…

Zmey | 7. 11 March, 2006

Юрка Юрий Викторович(прим. akella :)), цветовую гамму ты как то неважно подобрал. попробуй поменять. А о технологии ничего не говорю – даже рядом с тобой не стою: )

Code - веб-дизайнер (Creative Design Studio) | 8. 22 March, 2006

Слов нет! Просто круто… Чувствую слабость…

Setti | 9. 24 March, 2006

PHP библиотеки рулят :-) Для других задачь, конечно, понимаю.. Но с помощью jpegpaph можно такое делать!! :-)

Setti | 10. 24 March, 2006

Абажаю графики! :-)

zaARTix | 11. 24 March, 2006

Да Вы, батенька, маньяк :)
шучу, клева получилось, респект.
Даже и не допускал мысли раньше, что при помощи css можно организовать графики.

Сонечко | 12. 29 March, 2006

:))))

D@nil | 13. 29 April, 2006

Рульная статья, автору респект

Егор Булычев | 14. 1 May, 2006

очень интересно. буду пробовать.

Zigzag | 15. 24 August, 2006

имхо, техника из серии, посмотрите на что способен CSS, применение не будет оправданным, GD2 никто не отменял. игра не стоит свеч (применения на практике), опять же имхо.

akella | 16. 24 August, 2006

Не стоит спешить с выводами – GDI графики хороши на поверхности, и для внутреннего использования – на деле же, когда тебе надо сделать график такой как хочет дизайнер – никуда от HTML не денешься. Я все графики делю на три – HTML(в этом посте), PHP(твой вариант) и Flash. У всех свои преимущества и ниши. :) Не стоит ущемлять кого то.

egor egorrr | 17. 27 August, 2006

мне очень нравится простота кода

rybnadzorro | 18. 16 October, 2006

ИМХО, данный вариант очень хорош только как наглядное пособие возможностей CSS. На деле очень часто подобные графики копируются и вставляются в вордовские документы, просто складируются для писания какой-то аналитики и т.д. Данный способ практически сводит на нет большинство вариантов репродукции :)

+ Идёт в разрез с идеологией безстабличной цсс-ной вёрстки, ибо ЦСС берёт на себя функции по структурированию, когда должен отвечать только за внешний вид. Без конкретного ЦСС файла пользователь не увидит диаграммы, а это не есть хорошо.

akella | 19. 16 October, 2006

Ну во первых – на моем портале такие данные берутся сугубо из базы данных – не умею я складировать голоса сразу в вордовский документ. Собственно для этих нужд я их и придумал – не с потолка ж я их взял ). Да и видно по ХТМЛ коду что они так построены что бы было удобно их генерировать через ПХП или что угодно цикле. Так что аргумент про ворд для меня честно говоря удивителен и неактуален )

Не вижу никакого разреза с идеологией. А вот ты как раз путаешь роль ЦСС в отображении. Пользователь увидит просто данные которые структурированы с помощью HTML.
Или когда без ЦСС вместо трех колонок сайта ты видишь одну это тоже неправильно? ) Ибо ЦСС структурирует страницу? Эдак таблицами надо верстать и ваапще без использования ЦСС.

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

Я же написал, в посте, что добавление пустых спанов с датами сделает этот код идеально читабельным для юзеров без стилей – но я не добавил туда этих спанов из-за экономии кода и неоправданности моих усилий судя по статистике. Ну не будут эту страницу смотреть на КПК, к сожалению.

Оставить комментарий