Студопедия — Построение диаграмм
Студопедия Главная Случайная страница Обратная связь

Разделы: Автомобили Астрономия Биология География Дом и сад Другие языки Другое Информатика История Культура Литература Логика Математика Медицина Металлургия Механика Образование Охрана труда Педагогика Политика Право Психология Религия Риторика Социология Спорт Строительство Технология Туризм Физика Философия Финансы Химия Черчение Экология Экономика Электроника

Построение диаграмм






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

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

Листинг 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>

 

Пример выполнения







Дата добавления: 2015-09-07; просмотров: 371. Нарушение авторских прав; Мы поможем в написании вашей работы!



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

Практические расчеты на срез и смятие При изучении темы обратите внимание на основные расчетные предпосылки и условности расчета...

Функция спроса населения на данный товар Функция спроса населения на данный товар: Qd=7-Р. Функция предложения: Qs= -5+2Р,где...

Аальтернативная стоимость. Кривая производственных возможностей В экономике Буридании есть 100 ед. труда с производительностью 4 м ткани или 2 кг мяса...

Почему важны муниципальные выборы? Туристическая фирма оставляет за собой право, в случае причин непреодолимого характера, вносить некоторые изменения в программу тура без уменьшения общего объема и качества услуг, в том числе предоставлять замену отеля на равнозначный...

Тема 2: Анатомо-топографическое строение полостей зубов верхней и нижней челюстей. Полость зуба — это сложная система разветвлений, имеющая разнообразную конфигурацию...

Виды и жанры театрализованных представлений   Проживание бронируется и оплачивается слушателями самостоятельно...

Различие эмпиризма и рационализма Родоначальником эмпиризма стал английский философ Ф. Бэкон. Основной тезис эмпиризма гласит: в разуме нет ничего такого...

Индекс гингивита (PMA) (Schour, Massler, 1948) Для оценки тяжести гингивита (а в последующем и ре­гистрации динамики процесса) используют папиллярно-маргинально-альвеолярный индекс (РМА)...

Методика исследования периферических лимфатических узлов. Исследование периферических лимфатических узлов производится с помощью осмотра и пальпации...

Studopedia.info - Студопедия - 2014-2024 год . (0.011 сек.) русская версия | украинская версия