Главная страница статей --> Советы по фотошопу, графике и хитрости в построении php кода

Использование HTML-таблиц для вывода диаграмм

Источник: realcoding.net

[1 страница]

Введение


При разработке некоторых видов скриптов, в частности - скриптов голосований, бывает желательно организовать в них наглядный вывод тех или иных статистических данных в виде диаграммы.

Обычно "графический" вывод CGI-скрипта организуется путем формирования скриптом рисунка в одном из форматов веб-графики (чаще всего GIF или PNG) и вставки ссылки на этот рисунок <IMG src="..."> на выводимую HTML-страничку.

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

Все это осложняется еще и тем, что алгоритм сжатия данных LZW, используемый в GIF, является в настоящее время патентованным и небесплатным для использования. Иными словами, разработчики "железа" и ПО, которые используют данный алгоритм, должны платить патентные отчисления фирме-держателю патента. А поскольку такой порядок вещей совершенно неприемлем для разработчиков бесплатного ПО, то разработанные графические библиотеки либо вовсе не поддерживают формат GIF, либо поддерживают только формирование "несжатых" GIF-файлов.

Однако обязательно ли для вывода диаграмм на HTML-странице использовать "настоящую" графику? Нет ли "альтернативных способов"? И вообще, является ли использование графики лучшим и оптимальным путем вывода диаграмм?

В этой статье я предлагаю "альтернативный способ" вывода столбчатых (линейных) диаграмм, основанный на HTML-таблицах. Этот способ, по моему мнению, отличается сравнительной (а по сравнению с формированием графики - значительной) простотой реализации и хорошим качеством "результата".

Теория


Как известно, язык HTML позволяет управлять практически всеми параметрами таблиц. Суть предлагаемого метода заключается в том, что HTML-таблицу можно "сформировать" таким образом, что она будет выглядеть как вполне приличная диаграмма.

Например, так:


 
 
 

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

Выводимая диаграмма может быть горизонтальной или вертикальной. Далее мы в этой статье будем рассматривать горизонтальные диаграммы как наиболее простые и более наглядно иллюстрирующие идею.

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

Вывод CGI-скрипта, формирующего такую диаграмму, может быть вставлен в страницу с помощью SSI или IFRAME. При этом надо иметь в виду, что диаграмма, вставленная на страницу через SSI, является частью самой страницы и, следовательно, сохраняется/отображается/кэшируется вместе с ней. В одних случаях это преимущество, в других - недостаток. Еще одним недостатком этого метода (на практике - не очень существенным) является то, что таблицу, в отличие от рисунка, нельзя масштабировать.

От теории к практике


Итак, как же нужно сделать таблицу, чтобы она выглядела как диаграмма?

В простейшем случае в качестве диаграммы можно построить таблицу с двумя ячейками в каждой строке. Первая ячейка будет собственно столбиком диаграммы (она видима и отображается нужным цветом или background-ом), а вторая - невидимая. Как известно, броузер отображает только те ячейки таблицы, у которых есть содержимое (непустые). Поэтому для того, чтобы сделать видимой первую ячейку-"столбик", в нее нужно поместить, по крайней мере, символ &nbsp;

Общая ширина этих двух ячеек для каждой строки должна быть одинакова (ширина таблицы), а количество строк соответствует количеству столбиков диаграммы (числу отображаемых значений).

И тут начинаются наши первые "подводные камни" на светлом пути к великой цели :-). Дело в том, что броузер не может "просто так", без ухищрений, построить таблицу, у которой в каждой строчке значения ширины столбцов разные! Для каждой выводимой таблицы броузер вычисляет ширины столбцов (одинаковые для каждой строки) и высоты строк (одинаковые для каждого столбца).

Из этого положения есть два выхода:

  • Использовать для разных столбиков диаграммы разные таблицы, каждая из одной строки.
  • Использовать возможность объединения ячеек: для каждой ячейки HTML-таблицы можно задать, на сколько строк и/или на сколько столбцов она распространяется (параметры rowspan и colspan тэга <TD>соответственно).

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

Пример: для отображения диаграммы со столбиками 100, 300 и 400 пикселей нам нужно построить таблицу с ширинами столбцов 100, 200 и 100. Первый столбик диаграммы "займет" один столбец таблицы, второй - два и третий - три. Соответственно, вторая, невидимая ячейка займет столько столбцов, сколько осталось.

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



Похожие статьи:
- Cookies - свежие булочки
- Метатэги
- Использование шаблонов дизайна в ASP.NET
- Прячем счётчики
- Хитрости табличного дизайна. (формируем рамку таблицы)
- Что такое дорвеи? Банят ли за них?
- Использование HTML-таблиц для вывода диаграмм
- И снова отказываемся от модуля CGI?
- Подробно о Robots.txt
- Удаление строки из файла
- Про тэги и метатэги
- Зачем нам нужен SSI
- Слежение за контентом на динамических сайтах


Оглавление | Обсудить на форуме | Главная страница сайта | Карта сайта |

Контакты
Редакция:
[0.001]