2015-04-30
613
В сети Интернет проводятся разные опросы, данные которых обрабатываются и представляются в различном виде. Один из распространенных способов представления данных – представление с помощью графиков или диаграмм. Так, с помощью диаграмм можно представить, например, наличие компьютеров и модемов жителей отдельного региона, частоту посещения сети Интернет различными группами пользователей, возрастное распределение пользователей Интернета, образовательный уровень посещающих Интернет, и многое другое. Для того чтобы строить такие диаграммы, надо иметь в распоряжении большой фактический материал. Приведем пример простых задач, при решении которых требуется полученный результат оформить в виде диаграммы, а обрабатываемая информация относится лишь к одному человеку.
Напишем сценарий, который строит диаграмму по данным о числе студентов на каждом факультете.
Диаграмма представляется с помощью изображений. Сначала в зависимости от исходных данных считаются значения требуемых величин, затем вычисляется высота каждого из изображений, которые помещаются в документ для формирования столбцов диаграммы. Столбцы диаграммы располагаются в ячейках таблицы, для каждого столбца выделена своя ячейка. Ячейки, образующие вторую строку таблицы, содержат подписи, к какому факультету относятся данные. Если подвести курсор мыши к изображению, то выводится числовое значение, соответствующее столбцу диаграммы, как показано на рис. 4.5.
|
|
|
Рис. 4.5. Вертикальная диаграмма
HTML- код, содержащий сценарий построения диаграммы, приведен в листинге 4.5.
| Листинг 4.5. Вертикальная диаграмма |
<html>
<head>
<title>Количество студентов на факультетах</title>
<script language=JavaScript>
<!--
function graph(obj)
{ var fac1 = Number(obj.f1.value) // первый факультет
var fac2 = Number(obj.f2.value) // второй факультет
var fac3 = Number(obj.f3.value) // третий факультет
var th = 150; // высота таблицы
var s = fac1+fac2+fac3 // общее число студентов
var d=document
k1 = th/s
d.images[0].height=Math.round(fac1*k1);
d.images[0].alt=fac1+" человек";
d.images[1].height=Math.round(fac2*k1);
d.images[1].alt=fac2+" человек";
d.images[2].height=Math.round(fac3*k1);
d.images[2].alt=fac3+" человек";
d.images[3].height=Math.round(s*k1);
d.images[3].alt=s+" человек";
}
function msg(s)
{ if (s < 0)
alert("Недопустимо значение количества часов меньшее нуля!");
}
//-->
</script>
<body bgcolor=#crcccc>
<center>
<h3>Количество студентов</h3>
<small>После заполнения соответствующих полей для того, чтобы увидеть диагррамму нажмите кнопку <b> Вычислить</b></small>
<form name=data>
<table bgcolor=#cccccc width=300 cellPadding=2 cellSpacing=2 border=1>
<tr>
<td align=left><b>Физический</b></td>
<td align=center><input type=text name=f1 size=5 value="0"
onChange="msg(this.value)"></td>
</tr>
<tr>
<td align=left><b>Экономический</b></td>
<td align=center><input type=text name=f2 size=5 value="0"
onChange="msg(this.value)"></td>
</tr>
<tr>
<td align=left><b>Юридический</b></td>
<td align=center><input type=text name=f3 size=5 value="0"
onChange="msg(this.value)"></td>
</tr>
<tr align=center>
<td colspan=2 bgcolor=#cccccc>
<input type=button value="Вычислить" onClick="graph(data)"></td>
</tr>
</table>
</form>
<h4>Диаграмма числа студентов по факультетам<h4>
<table width=212 height=150 cellPadding=0 cellSpacing=1 border=0>
<tr valign=bottom width=100 align=center>
<td bgcolor=#aaaaaa height=150><img src=1x1.gif width=75 height=0
border=0></td>
<td bgcolor=#aaaaaa height=150><img src=1x1.gif width=75 height=0
border=0></td>
<td bgcolor=#aaaaaa height=150><img src=1x1.gif width=75 height=0
border=0></td>
<td bgcolor=#aaaaaa height=150><img src=1x1.gif width=75 height=0
border=0></td>
</tr>
<tr valign=top align=center width=100>
<td height=40><small>Физики</small></td>
<td height=40><small>Экономисты</small></td>
<td height=40><small>Юристы</small></td>
<td height=40><small>Всего</small></td>
</tr>
</table></center></body></html>
|
|
|
