Введение
При разработке некоторых видов скриптов, в частности - скриптов голосований, бывает желательно организовать в них наглядный вывод тех или иных статистических данных в виде диаграммы.
Обычно "графический" вывод CGI-скрипта организуется путем формирования скриптом рисунка в одном из форматов веб-графики (чаще всего GIF или PNG) и вставки ссылки на этот рисунок <IMG src="..."> на выводимую HTML-страничку.
Однако написание программного кода по формированию рисунков представляет значительные трудности, особенно для начинающих программистов, т.к. это предполагает либо доскональное изучение довольно сложных форматов графических файлов, либо использование библиотек для работы с графикой, написанных другими.
Все это осложняется еще и тем, что алгоритм сжатия данных LZW, используемый в GIF, является в настоящее время патентованным и небесплатным для использования. Иными словами, разработчики "железа" и ПО, которые используют данный алгоритм, должны платить патентные отчисления фирме-держателю патента. А поскольку такой порядок вещей совершенно неприемлем для разработчиков бесплатного ПО, то разработанные графические библиотеки либо вовсе не поддерживают формат GIF, либо поддерживают только формирование "несжатых" GIF-файлов.
Однако обязательно ли для вывода диаграмм на HTML-странице использовать "настоящую" графику? Нет ли "альтернативных способов"? И вообще, является ли использование графики лучшим и оптимальным путем вывода диаграмм?
В этой статье я предлагаю "альтернативный способ" вывода столбчатых (линейных) диаграмм, основанный на HTML-таблицах. Этот способ, по моему мнению, отличается сравнительной (а по сравнению с формированием графики - значительной) простотой реализации и хорошим качеством "результата".
Теория
Как известно, язык HTML позволяет управлять практически всеми параметрами таблиц. Суть предлагаемого метода заключается в том, что HTML-таблицу можно "сформировать" таким образом, что она будет выглядеть как вполне приличная диаграмма.
Например, так:
При этом разработчик ценой минимальных усилий может придать диаграмме практически любой вид - изменить цвета столбцов (или даже залить их рисунком), их ширину, расстояние между ними и т.д. Можно даже написать на столбцах текст. Причем все это делается только лишь изменением параметров и содержимого ячеек выводимой таблицы, а вся "техническая" нагрузка по формированию на экране пользователя таблицы нужного вида ложится на "плечи" броузера.
Выводимая диаграмма может быть горизонтальной или вертикальной. Далее мы в этой статье будем рассматривать горизонтальные диаграммы как наиболее простые и более наглядно иллюстрирующие идею.
Поскольку в горизонтальной диаграмме каждый столбец диаграммы представлен строкой таблицы, то далее, чтобы не внести путаницы, столбец таблицы я буду называть "столбец", а столбец диаграммы - "столбик". :-)
Вывод CGI-скрипта, формирующего такую диаграмму, может быть вставлен в страницу с помощью SSI или IFRAME. При этом надо иметь в виду, что диаграмма, вставленная на страницу через SSI, является частью самой страницы и, следовательно, сохраняется/отображается/кэшируется вместе с ней. В одних случаях это преимущество, в других - недостаток. Еще одним недостатком этого метода (на практике - не очень существенным) является то, что таблицу, в отличие от рисунка, нельзя масштабировать.
От теории к практике
Итак, как же нужно сделать таблицу, чтобы она выглядела как диаграмма?
В простейшем случае в качестве диаграммы можно построить таблицу с двумя ячейками в каждой строке. Первая ячейка будет собственно столбиком диаграммы (она видима и отображается нужным цветом или background-ом), а вторая - невидимая. Как известно, броузер отображает только те ячейки таблицы, у которых есть содержимое (непустые). Поэтому для того, чтобы сделать видимой первую ячейку-"столбик", в нее нужно поместить, по крайней мере, символ
Общая ширина этих двух ячеек для каждой строки должна быть одинакова (ширина таблицы), а количество строк соответствует количеству столбиков диаграммы (числу отображаемых значений).
И тут начинаются наши первые "подводные камни" на светлом пути к великой цели :-). Дело в том, что броузер не может "просто так", без ухищрений, построить таблицу, у которой в каждой строчке значения ширины столбцов разные! Для каждой выводимой таблицы броузер вычисляет ширины столбцов (одинаковые для каждой строки) и высоты строк (одинаковые для каждого столбца).
Из этого положения есть два выхода:
* Использовать для разных столбиков диаграммы разные таблицы, каждая из одной строки.
* Использовать возможность объединения ячеек: для каждой ячейки HTML-таблицы можно задать, на сколько строк и/или на сколько столбцов она "распространяется" (параметры rowspan и colspan тэга <TD>соответственно).
Во втором случае необходимо построить таблицу, у которой ширины столбцов соответствуют разности между соседними по величине отображаемыми значениями, а нужную ширину видимой ячейки-"столбика" в каждой строке получать "распространением" первой ячейки на нужное количество столбцов.
Пример: для отображения диаграммы со столбиками 100, 300 и 400 пикселей нам нужно построить таблицу с ширинами столбцов 100, 200 и 100. Первый столбик диаграммы "займет" один столбец таблицы, второй - два и третий - три. Соответственно, вторая, невидимая ячейка займет столько столбцов, сколько осталось.
Соответственно, программный код по формированию "таблицы-диаграммы" должен включать в себя алгоритм сортировки отображаемых значений и вычисления нужных ширин столбцов таблицы. Читать дальше...