В сети Интернет проводятся разные опросы, данные которых обрабатываются и представляются в различном виде. Один из распространенных способов представления данных - представление с помощью графиков или диаграмм. Так, с помощью диаграмм можно представить, например, наличие компьютеров и модемов жителей отдельного региона, частоту посещения сети Интернет различными группами пользователей, возрастное распределение пользователей Интернета, образовательный уровень посещающих Интернет, и многое другое. Для того чтобы строить такие диаграммы, н адо иметь в распоряжении большой фактический материал. Приведем пример простых задач, при решении которых требуется полученный результат оформить в виде диаграммы, а обрабатываемая информация относится лишь к одному человеку.
Напишем сценарий, который строит диаграмму по данным о числе студентов на каждом факультете. Диаграмма представляется с помощью изображений. Сначала в зависимости от исходных данных считаются значения требуемых величин, затем вычисляется высота каждого из изображений, которые помещаются в документ для формирования столбцов диаграммы. Столбцы диаграммы располагаются в ячейках таблицы, для каждого столбца выделена своя ячейка. Ячейки, образующие вторую строку таблицы, содержат подписи, к какому факультету относятся данные. Если подвести курсор мыши к изображению, то выводится числовое значение, соответствующее столбцу диаграммы.
| Листинг 6.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> </head> <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>
|
|
Пример выполнения
