Гостевая
Форум
Разделы
Главная страница
Js скрипты
Php скрипты
Html шаблоны
Книги по Web дизайну
Статьи


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

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

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

[2 страница]

Пример скрипта


А теперь рассмотрим практический пример скрипта для "табличного" вывода диаграммы.

#!/usr/bin/perl

#Исходные данные для вывода диаграммы
#массив $data - данные для вывода (уже в пикселях).
#$val - количество выводимых столбцов (соотв количеству элементов $data).

$data[1]=200; $color[1]=#FF0000;
$data[2]=100; $color[2]=#00FF00;
$data[3]=150; $color[3]=#0000FF;
$data[4]=400; $color[4]=#00FFFF;
$data[5]=500; $color[5]=#FF00FF;
$data[6]=600; $color[6]=#FFFF00;
$val=6;

#Ниже расположен код сортировки выводимых на диаграмме значений
#В процессе его работы на основе массива @data создается отсортированный
#массив @stp и хэш %lvl с количеством столбцов таблицы для каждого
#столбика диаграммы

$rows=1;
$stp[0]=0;
$stp[1]=$data[1];
$lvl{$data[1]}=1;
$i=2;

while(
$i<=$val){

$p=0; $x=1;

while(
$x<=$rows && $p==0)
{
if (
$data[$i]==$stp[$x]){$p=1;$lvl{$data[$i]}=$x;goto a1;};

if (
$data[$i]<$stp[$x]){
#Вставка нового значения в середину массива @stp
for ($y=$rows+1;$y>=$x;$y=$y-1){$stp[$y+1]=$stp[$y];};
$stp[$x]=$data[$i];
#Корректируем хэш %lvl с учетом сдвига @stp
foreach $itm(keys %lvl){if ($lvl{$itm}>=$x){$lvl{$itm}=$lvl{$itm}+1;};};
$lvl{$data[$i]}=$x;
$rows=$rows+1;
$p=1;
};

$x++;
};

if (
$p==0){$rows=$rows+1;$stp[$rows]=$data[$i]; $lvl{$data[$i]}=$rows};


$i++;
};

#А здесь мы, собственно, выводим таблицу

print Content-Type: text/htmlnn;
print
<TABLE border=0>n<TR>;

#Выводим первую строку таблицы, задающую броузеру нужные ширины ячеек
#Она не будет отображаться, т.к. ячейки пустые
for ($k=1;$k<=$rows;$k=$k+1){
$w=$stp[$k]-$stp[$k-1];
print
<TD width=$w></TD>;
};
print
</TR>n;

#Выводим строки, содержащие диаграмму
for ($v=1;$v<=$val;$v=$v+1){
$tl=$lvl{$data[$v]};
$rst=$rows-$tl;
print
<TR>;
#Если видимая ячейка есть (выводимое значение не 0: $tl>0),
#то выводим ее:
if ($tl>0)
{print
<TD bgcolor=$color[$v] colspan=$tl> </TD>;};

#Если невидимая ячейка есть (выводимое значение не равно максимальному),
#то выводим ее:
if ($rst>0)
{print
<TD colspan=$rst></TD>;};

print
</TR>n;
};
print
</TR></TABLE>;

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

Допустим, нам надо вывести результаты голосования, которые передаются в переменных $za, $prot, $vozd в значениях процентов.

$width=400; #Желаемая ширина диаграммы

$data[1]=($za/100)*$width;
$data[2]=($prot/100)*$width;
$data[3]=($vozd/100)*$width;
$val=3;

Управление толщиной столбцов


В ряде случаев Вам может понадобиться явно задать толщину столбиков диаграммы, т.е. высоту строк таблицы. И здесь Вам встретится еще один "подводный камень" данного решения. Дело в том, что параметры width и height тэга <TD> задают не однозначные, а минимальные значения ширины и высоты ячейки таблицы. Т.е. если "по содержимому" ячейка меньше, чем указано в параметрах width и height, то она "растягивается" до нужных размеров.

Наш пример вообще не задает в тэгах <TD> параметр height, поэтому высота ячеек таблицы определяется размерами шрифта, которым "написан" символ &nbsp; в видимой ячейке (несмотря на то, что это символ пробела, он, как и любой другой символ, имеет свою высоту) и отступом между "абзацем" и границами ячейки. Соответственно, если не принять дополнительных мер, то на разных страницах и у разных посетителей выглядеть несколько по-разному.

"Общим видом решения" этой задачи является минимизация собственной высоты ячейки и задание ее высоты с помощью параметра height тэга <TD>.

Самым "радикальным" способом уменьшения высоты является помещение в видимую ячейку вместо & нетекстового содержимого, скажем, картинки размером 1x1 пиксель:

<IMG width=1 height=1 src=trans.gif>

а в trans.gif поместить прозрачное изображение в 1 пиксель.

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

Еще одним способ уменьшить "собственную" высоту ячеек - максимально уменьшить размер шрифта в "видимой" ячейке.
[0.001]